@charset "utf-8";
/*====================================
 General
=====================================*/
h2 {
    font-size: clamp(24px, 9vw, 32px);
    line-height: 1.5;
}

/*====================================
 Next Contents
=====================================*/
.this_recruit_aboutus_message_index .bnr_area .link_bnr .link_scale::before {
    background-image: url(/dam/recruit/assets/images/aboutus/message/img_message_bnr.png);
}
@media screen and (max-width: 768px) {
    .this_recruit_aboutus_message_index .bnr_area .link_bnr .link_scale::before {
        background-image: url(/dam/recruit/assets/images/aboutus/message/img_message_bnr_sp.png);
    }
}

.this_recruit_ourchallenge_index .bnr_area .link_bnr .link_scale::before {
    background-image: url(/dam/recruit/assets/images/challenge/img_history_bnr.png);
}
@media screen and (max-width: 768px) {
    .this_recruit_ourchallenge_index .bnr_area .link_bnr .link_scale::before {
        background-image: url(/dam/recruit/assets/images/challenge/img_history_bnr_sp.png);
    }
}


/*====================================
 Message
=====================================*/
.message .uq_titlearea {
    width: 100%;
    height: 100%;
    aspect-ratio: 316 / 155;
    margin-top: unset;
    padding: unset;
    background-image: url(/dam/recruit/assets/images/aboutus/message/img_message_main.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.message .uq_bread_area {
    margin-top: unset;
    padding-top: 20px;
    padding-left: 20px;
}

.message .message_main_title {
    width: fit-content;
    padding: 40px;
}
@media screen and (max-width: 768px) {
    .message .message.uq_titlearea {
        aspect-ratio: 47 / 50;
        background-image: url(/dam/recruit/assets/images/aboutus/message/img_message_main_sp.png);
    }
    .message .message_main_title {
        padding: clamp(20px, 1.5vw, 40px);
    }
}

.message_box {
    width: 90%;
    margin: 40px auto;
    padding: 40px;
    border-radius: 10px;
}
.message_box_inner {
    margin-bottom: 60px;
}
.message_box_inner .txt_area:not(:last-child) {
    margin-bottom: 1.5rem;
}
.message_sign {
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 20px;
}

.message_sign span {
    display: block;
}
@media screen and (max-width: 768px) {
    .message_box {
        width: unset;
        margin-left: clamp(8px, 1.5vw, 24px);
        margin-right: clamp(8px, 1.5vw, 24px);
        padding-left: clamp(8px, 1.5vw, 24px);
        padding-right: clamp(8px, 1.5vw, 24px);
    }
    .message_sign {
        padding-right: clamp(8px, 1.5vw, 24px);
    }
}

/*====================================
 History
=====================================*/
.history_box {
    padding: 40px;
    border-radius: 10px;    
}

.history_box .uq_cat_title {
    font-size: clamp(20px, 3vw, 36px);
}
.history_box .uq_cat_title br._sp400 {
    display: none;
}

.history_box .txt_area {
    margin-top: 30px;
    margin-bottom: 40px;
}

.history_chapter {
    position: relative;
    margin-top: 80px;
    padding: 40px;
    border-radius: 10px;
}

.history_chapter h3 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    font-size: clamp(32px, 5vw, 60px);
}
.history_chapter h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(300px, 15vw, 500px);
    height: clamp(300px, 15vw, 500px);
    background-image: url(/dam/recruit/assets/images/challenge/bg_history_01.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
    transform: translateX(-50%) translateY(-30%);
}

.history_chapter h4 {
    text-align: center;
}

.history_chapter .img_area {
    margin-top: 20px;
    margin-bottom: 20px;
}

.history_chapter .history_column {
    margin-top: 40px;
}

.history_chapter .history_column .column_title {
    padding: 1rem;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.history_chapter .history_column .column_txt {
    padding: 40px;
    background-color: #d1d1c5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media screen and (max-width: 768px) {
    .history_box,
    .history_chapter,
    .history_chapter .history_column .column_txt {
        padding-left: clamp(20px, 1.5vw, 40px);
        padding-right: clamp(20px, 1.5vw, 40px);
    }
}
@media screen and (max-width: 400px) {
    .history_box .uq_cat_title br._sp400 {
        display: block;
    }    
}