@charset "utf-8";

/* **************************************************

Name: style2.css

Description: /recruiting/css/style.css の追加修正

Create: 2026.07.30
Update: 

Copyright 2026 Hitachi Systems, Ltd.

***************************************************** */
#Contents {
    overflow-x: clip;
    padding-bottom: 65px;
}

@media screen and (max-width: 767px) {
    #Contents {
        padding-bottom: inherit;
    }
}

#Contents > .GridSet {
    padding-left: 0;
    padding-right: 0;
}

#Contents > .GridSet > .Grid4 > #Grid4Reset {
    position: relative;
    width: 100vw;
    left: calc((100vw - 100%) / -2);
}

@media (max-width: 1304px) {
    #Contents > .GridSet > .Grid4 > #Grid4Reset {
        width: 100%;
        left: 0;
    }
}


#contentsbox {
    font-family: "Hitachi Sans", "Noto Sans JP", "Yu Gothic UI", "Noto Sans", sans-serif;
}

#contentsbox .DateListStyle2 dl dt span {
    background: #222222;
}

.subContents h1 {
    color: #0c0c0c;
    background-image: url(/-/media/recruiting/image/common/bg_h1_v2.gif);
}

.subContents h1.sub {
    color: #cc0000;
}

.subContents h1.sub span {
    color: #0c0c0c;
}

.subContents h2 {
    color: #0c0c0c;
}

.subContents h2 span {
    color: #cc0000;
}

.button01.BtnStyle1 {
    background-color: #222222;
    border: 2px solid #222222;
}

.button01.BtnStyle1::before,
.button01.BtnStyle1::after {
    background-color: #222222;
}

.button01.BtnStyle1,
.button02.BtnStyle1 {
    text-decoration: none;
}

.button02.BtnStyle1:hover {
    color: #cc0000 !important;
    background-color: #fff;
}

.pageList {
    background: #f4f4f4;
}

.pageList li a {
	text-decoration: none !important;
}

.pageList li {
    width: 45%;
}

.pageList li a {
    color: #0c0c0c !important;
}

.pageList li dl dd span {
    color: #cc0000 !important;
}

.pageList li dl dd span:first-letter {
    color: #0c0c0c !important;
}

.pageList li dl dt img {
    width: 100%;
}

.pageList:has(li.list01_sub) {
    display: flex;
    gap: 37.25px;
    flex-wrap: wrap;
}

.pageList li.list01_sub,
.pageList li.list02_sub,
.pageList li.list03_sub,
.pageList li.list04_sub,
.pageList li.list05_sub,
.pageList li.list06_sub {
    width: calc((100% - 37.25px * 2) / 3);
    margin: 0;
    background-color: #fff;
}

.Under995 .pageList li {
    width: 100%;
}

.staff_txt {
    width: calc(100% - 500px);
}

.mapArea02 {
    width: calc(100% - 678px);
}

.img06 {
    margin: 70px auto 0;
    max-width: 100%;
}

.applicationBox {
    margin-left: calc((100% - 760px) / 2 );
}

.prfArea {
    background: #f4f4f4;
}

.comList dl dt {
    background: #cc0000;
}

.comList dl dd {
    background: #f4f4f4;
}

.comList dl dd a {
    color: #cc0000;
}

@media screen and (min-width: 995px) and (max-width: 1304px) {
    .OptionWideRWD .pageSummary {
        margin-left: 0;
        margin-right: 0;
    }
}

.pageSummary .summaryIndex .sumaryTitle {
    background-color: #cc0000;
}

.pageSummary .summaryIndex ul li {
    color: #0c0c0c;
}

.subContents .staff_txt h2 {
    color: #cc0000;
}

.policyBox dl dt span {
    color: #cc0000;
}

a.sitetop {
    background: #cc0000;
    text-decoration: none;
}

a.sitetop:hover {
    background: #0c0c0c;
}

.sitemapList li {
    background: #cc0000;
}

.sitemapList li:hover {
    background: #0c0c0c;
}

.sitemapList li a {
    text-decoration: none;
}

.sitemapList li.sub a {
    color: #0c0c0c;
}

.subContents  h2.system_a_area {
    font-size: 2rem;
    font-weight: bold;
    color: #cc0000;
    line-height: 1;
}

.subContents h2.system_a_area span {
    color: #222222 !important;
    margin-left: 0;
}

#TopItw {
    background-image: url(/-/media/recruiting/image/top/bg_interview_2.jpg);
}

.checkList li {
    background: url(/-/media/recruiting/quality/image/bg_check_v2.jpg) no-repeat left;
}

.mapArea li.map01:hover, .mapArea li.map01.select {
    background-image: url(/-/media/recruiting/quality/image/map01_on_v2.png);
}

.mapArea li.map03:hover, .mapArea li.map03.select {
    background-image: url(/-/media/recruiting/quality/image/map03_on_v2.png);
}

.mapArea li.map04:hover, .mapArea li.map04.select {
    background-image: url(/-/media/recruiting/quality/image/map04_on_v2.png);
}

.mapArea li.map05:hover, .mapArea li.map05.select {
    background-image: url(/-/media/recruiting/quality/image/map05_on_v2.png);
}

.sitemapList li.sub {
    background: url(/-/media/recruiting/image/common/r_arw_2.png) no-repeat 98%;
}


/* TOPページ */
#top_visual :is(.commingsoon, .commingsoon2, .commingsoon3) {
    z-index: 1 !important;
    opacity: 1 !important;
}

#top_visual :is(.commingsoon, .commingsoon2, .commingsoon3) a {
    opacity: 1 !important;
}

#top_visual :is(.commingsoon, .commingsoon2, .commingsoon3):hover a img.off{
    opacity: 0 !important;
}

#top_visual :is(.commingsoon, .commingsoon2, .commingsoon3) a img.on {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 1 !important;
}

.jinzaiArea {
    background-size: cover !important;
}

.project_visu01 {
    text-align: center;
    margin: 60px 0;
}

.project_visu02 {
    margin-top: 40px;
    margin-bottom: 10px;
}

#TopMsg {
    display: flex;
    gap: 2rem 3rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;

    > div {
        max-width: 100%;
    }

    .button01 {
        margin-top: 0 !important;
        width: 300px !important;
        max-width: 100%;
    }
}


/* ===================== */
/* 共通パーツ */
/* ===================== */

/* 965pxコンテンツ */
.contents_box_s {
    width: calc(965px + 30px);
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 見出し */
.subContents .heading_m {
    text-align: center;
    margin: 80px 0 45px !important;
    padding: 14px 9px 0px;
    font-size: 1.5rem;
    line-height: 1.35;
    border: none;
    background: none;
    color: #0c0c0c;
}

@media (max-width: 995px) {
    .subContents .heading_m {
        font-size: 1.25rem;
    }
}

@media (max-width: 767px) {
    .subContents .heading_m {
        margin-top: 40px !important;
    }
}


/* セクション */
.section_box {
    margin: 80px 0 120px;
}

@media (max-width: 767px) {
    .section_box {
        margin-top: 40px;
        margin-bottom: 80px;
    }
}

.section_box_s {
    margin: 0 0 80px;
}

@media (max-width: 767px) {
    .section_box_s {
        margin-bottom: 60px;
    }
}



/* テーブル */
.DataTableStyle1.table_custom {
    font-size: 0.875rem;
    width: 100%;

    td, th {
        font-size: inherit;
    }

    th {
        font-weight: bold;

        &.width20 {
            width: 20%;
            min-width: 4rem;
        }
    }

    .ListStyle1 {
        font-size: inherit;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.table_title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #0c0c0c;
    margin: 3rem 0 1rem;
}

@media (max-width: 995px) {
    .table_title {
        font-size: 1.125rem;
    }
}



/* 数字を内容で記載するol */
.ListStyle1.ol_not_included_num {
    list-style: none;
    padding-left: 0;

    > li {
        margin-left: 1.2rem;
        text-indent: -1.2rem;
    }

    .num {
        width: 1.2rem;
        display: inline-block;
        position: relative;
        left: 1.2rem;
    }
}



/* 定義リスト */
.dlist_type1 {
    > div {
        display: flex;
    }

    dt {
        &::after {
            content: ' :';
            display: inline;
        }
    }

    dd {
        flex: 1;
    }

    &.title_character_count_4 > div > dt {
        width: 4.5rem;
    }

    &.title_character_count_3 > div > dt {
        width: 3.5rem;
    }
}