@charset "UTF-8";

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

Name: renewal2024.css
Description: CSS for New Design Pages
Create: 2024.11.29
Update: 

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


/*===============================

	共通設定

================================*/


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


#Contents {
  color: #333;
  font-weight: 400;
  font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

#Contents a {
    text-decoration: none;
}

.GridSet.full {
    width: 100%;
}
.Section {
    padding: 0;
}
.Section .inner {
    box-sizing: border-box;
    max-width: 1275px;
    padding: 60px 30px;
    margin: auto;
}
.Section .inner.w1035 {
    max-width: 1035px!important;
}
.nowrap {
    white-space: nowrap;
}
.Show994 {
    display: none;
}
.bold {
    font-weight: bold;
}
.pb0 {
    padding-bottom: 0!important;
}



/*===============================

	/recruit/index.html

================================*/

/*
	ブランディング
================================*/

.branding {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 260px;
    padding-bottom: 260px;
    background-image: url(/image/h1/hsw/recruit/top/branding.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 70px;
}

.branding .content h1 {
    text-align: center;
    font-weight: bold;
    font-size: 343.75%;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.branding .content p {
    text-align: center;
    font-weight: bold;
    font-size: 150%;
    margin-bottom: 40px;
}

.branding .btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
.branding .btn li {
    width: 30%;
    max-width: 280px;
    height: 60px;
    margin-right: 26px;
}
.branding .btn li:last-child {
    margin-right: 0;
}

.branding .btn li a {
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: 0.3s;
    border-radius: 30px;
    background-repeat: no-repeat;
    background-size: 7px auto;
    background-position: right 20px center;
    font-size: 112.5%;
}

.branding .btn li.white a {
    background-color: #fff;
    color: #BE042B;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_red.svg);
}

.branding .btn li.white a:hover {
    background-color: #BE042B;
    color: #fff;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_white.svg);
}

.branding .btn li.red a {
    background-color: #BE042B;
    color: #fff;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_white.svg);
}

.branding .btn li.red a:hover {
    background-color: #fff;
    color: #BE042B;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_red.svg);
}



/*
	TOPICS
================================*/

.h2_recruit_topics {
    background: none;
    margin: 0;
    padding: 0;
    font-weight: normal;
    color: #BE042B;
    font-size: 187.5%;
    text-align: center;
    margin-bottom: 40px;
}

.list_topics {
    display: flex;
    flex-wrap: wrap;
    max-width: 840px;
    max-height: 120px;
    overflow-y: auto;
    margin: auto;
}

/* FireFox用 */
/*.list_topics {
    scrollbar-color: #BE042B #F2F2F2;
}*/

/* webkit系ブラウザ用 */
.list_topics::-webkit-scrollbar {
    width: 8px;
}
.list_topics::-webkit-scrollbar-track {
    background-color: #F2F2F2;
    border-radius: 0px;
}
.list_topics::-webkit-scrollbar-thumb {
    background-color: #BE042B;
    border-radius: 0px;
}

.list_topics dt {
    width: 130px;
    line-height: 140%;
    font-size: 112.5%
}
.list_topics dd {
    box-sizing: border-box;
    width: calc(100% - 130px);
    font-size: 112.5%;
    margin-bottom: 30px;
    padding-right: 15px;
}
.list_topics dd:last-child {
    margin-bottom: 0;
}
.list_topics dd a {
    color: #333;
}
.list_topics dd a:hover {
    text-decoration: underline!important;
}

.list_topics dd.topicLink .LinkListStyle1 a {
    /*color: #a94657;*/
    font-size: 112.5%;
}
.list_topics dd.topicLink .LinkListStyle1 a:hover {
    color: #b1000e;
}


/*
	ページ内リンク
================================*/

.bg_anchorlink_red {
    background-color: #BE042B;
    margin-top: 120px;
}

.toggle_accordion_red {
    display: none;
}

.anchorlink_red {
    display: flex;
    background-color: #BE042B;
    max-width: 1215px;
    margin: auto;
    margin-top: 30px;
}

.anchorlink_red li {
    width: 20%;
    height: 100px;
    position: relative;
}

.anchorlink_red li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px 10px;
    transition: 0.3s;
}
.anchorlink_red li a:after {
    content: '';
    position: absolute;
    height: 10px;
    width: 1px;
    background-color: #BE042B;
    right: 0;
    top: -10px;
}
.anchorlink_red li:last-child a:after {
    display: none;
}

.anchorlink_red li a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.anchorlink_red li a span {
    text-align: center;
}
.anchorlink_red li a span.eng {
    position: absolute;
    top: -30px;
    font-size: 87.5%;
    transition: 0.3s;
}
.anchorlink_red li a:hover span.eng {
    transform: translateY(-5px);
}
.anchorlink_red li a span.jp {
    display: inline-block;
    width: 100%;
    color: #fff;
    font-weight: bold;
}



/*
	リンク付きの<h2>
================================*/

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

.h2_with_link .link_more {
    margin-bottom: 15px;
}

.h2_with_link .link_more a {
    color: #BE042B;
    font-size: 137.5%;
    padding-right: 40px;
    background-repeat: no-repeat;
    background-size: 7px auto;
    background-position: right 5px bottom 5px;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_red.svg);
    transition: 0.3s;
}
.h2_with_link .link_more a:hover {
    opacity: 0.7;
    background-position: right 0 bottom 5px;
}

.h2_with_link .h2_recruit {
    margin-right: 80px;
}


/*
	<h2>のスタイル
================================*/

.h2_recruit,
.h2_recruit span {
    background: none;
    margin: 0;
    padding: 0;
    font-weight: normal;
    color: #333;
}
.h2_recruit {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 20px;
}
.h2_recruit:after {
    content: '';
    position: absolute;
    width: 110px;
    height: 2px;
    left: -30px;
    bottom: 0;
    background-color: #BE042B;
}
.h2_recruit span.eng {
    font-size: 100%;
    margin-bottom: 10px;
}
.h2_recruit span.jp {
    font-size: 237.5%;
}




/*
	<h3>のスタイル
================================*/

.h3_recruit {
    margin: 0;
    padding: 0;
    font-weight: normal;
    color: #333;
}
.h3_recruit span {
    display: block;
}
.h3_recruit span.eng {
    font-size: 87.5%;
    color: #BE042B;
    margin-bottom: 5px;
    
}
.h3_recruit span.jp {
    font-size: 137.5%;
}




/*
	日立ソリューションズ西日本について
================================*/

#about .inner {
    padding-bottom: 30px;
}


.list_about {
    display: flex;
    justify-content: space-between;
}

.list_about li {
    width: calc( (100% - 40px*3)/4 );
    justify-content: space-between;
}

.list_about li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

.list_about li a:hover {
    opacity: 0.7;
}

.list_about li a div.thumb {
    width: 100%;
    height: 200px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}
.list_about li a div.thumb.company {
    background-image: url(/image/h1/hsw/recruit/top/img_com.jpg);
}
.list_about li a div.thumb.business {
    background-image: url(/image/h1/hsw/recruit/top/img_biz.jpg);
}
.list_about li a div.thumb.benefits {
    background-image: url(/image/h1/hsw/recruit/top/img_ben.jpg);
}
.list_about li a div.thumb.numbers {
    background-image: url(/image/h1/hsw/recruit/top/img_num.jpg);
}
.list_about li a div.thumb.employees {
    background-image: url(/image/h1/hsw/recruit/top/img_emp.jpg);
}


/*
	教育制度・キャリアアップ
================================*/

#training_career .inner {
    padding-top: 30px;
    padding-bottom: 30px;
}

.list_training_career {
    display: flex;
    justify-content: space-between;
}

.list_training_career li {
    width: calc( (100% - 40px)/2 );
    justify-content: space-between;
}

.list_training_career li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

.list_training_career li a:hover {
    opacity: 0.7;
}

.list_training_career li a div.thumb {
    width: 100%;
    height: 200px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}
.list_training_career li a div.thumb.training {
    background-image: url(/image/h1/hsw/recruit/top/img_tra.jpg);
}
.list_training_career li a div.thumb.career {
    background-image: url(/image/h1/hsw/recruit/top/img_car.jpg);
}


/*
	先輩の声（スライダー）
================================*/

#interview {
    overflow: hidden;
}
#interview .inner {
    padding-top: 30px;
}
.slick-list {
    overflow: visible;
}
.slick-slide.slick-active {
    opacity: 1;
}

.slick-slide:not(.slick-active) {
    opacity: 0.3;
}
.slide-arrow {
    cursor: pointer;
    margin: auto;
    position: absolute;
    top: 20%;
    width: 45px;
    z-index: 1;
}
.prev-arrow {
    left: -15px;
}
.next-arrow {
    right: -15px;
}

#js-insertSlider {
    display: none;
}
#js-insertSlider.show {
    display: block;
}

.slider_interview {
    margin-left: -20px;
    margin-right: -20px;
}
.slider_interview li {
    padding: 0 20px;
}

.slider_interview li a {
    transition: 0.3s;
    color: #333;
    position: relative;
}

.slider_interview li a:after {
    transition: 0.3s;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0); 
}

.slider_interview li a:hover:after {
    background-color: rgba(255, 255, 255, 0.3); 
}

.slider_interview li a div.photo {
    margin-bottom: 15px;
}

.slider_interview li a div.photo img {
    width: 100%;
}

.slider_interview li a p.job {
    display: inline-block;
    box-sizing: border-box;
    padding: 3px 5px;
    margin-bottom: 5px;
    color: #fff;
    background-color: #BE042B;
    font-size: 87.5%;
    border-radius: 4px;
}

.slider_interview li a p.copy {
    color: #BE042B;
    font-weight: bold;
    font-size: 112.5%;
    margin-bottom: 40px;
}

.slider_interview li a div.profile {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #F2F2F2;
    padding: 20px;
}

.slider_interview li a div.profile .initial {
    font-weight: bold;
    padding-right: 10px;        
}

.slider_interview li a div.profile .department {
    font-size: 87.5%;
    padding-left: 10px;
    border-left: solid 1px #DCDCDC;
}

.slider_interview li a div.profile .department p + p {
    margin-top: 1em;
}


.slider_btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider_btn div {
    width: 30px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 10px auto;
    background-position: center;
    cursor: pointer;
    margin-top: 40px;
    padding-bottom: 15px;
    border-bottom: solid 2px transparent;
}

.slider_btn div.play {
    background-image: url(/image/h1/hsw/recruit/top/bt_play_off.svg);
    margin-right: 10px;
}
.slider_btn div.play.active {
    background-image: url(/image/h1/hsw/recruit/top/bt_play_on.svg);
    border-color: #BE042B;
}
.slider_btn div.stop {
    background-image: url(/image/h1/hsw/recruit/top/bt_stop_off.svg);
    margin-left: 10px;
}
.slider_btn div.stop.active {
    background-image: url(/image/h1/hsw/recruit/top/bt_stop_on.svg);
    border-color: #BE042B;
}


/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    .slider_interview li a p.copy {
        margin-bottom: 20px;
    }
}



/*
	動画で知る日立ソリューションズ西日本
================================*/

#movies {
    background-color: #F2F2F2;
}

#movies.Section {
    
}

.list_movies {
    display: flex;
    justify-content: space-between;
}
.list_movies li {
    width: calc( (100% - 20px)/2 );
}
.list_movies li img {
    max-width: 100%;
}
.list_movies li h3 {
    color: #333;
    font-size: 125%;
}



/*
	採用情報について
================================*/

.list_information {
    max-width: 1030px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.list_information li {
    box-sizing: border-box;
    max-width: 220px;
    height: 220px;
    width: calc( (100% - 60px)/4 );
}

.list_information li a {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: solid 1px #BE042B;
    color: #BE042B;
    transition: 0.3s;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_red.svg);
    background-repeat: no-repeat;
    background-size: 7px auto;
    background-position: right 25px bottom 22px;
}

.list_information li a:hover {
    border: solid 1px #fff;
    background-color: #BE042B;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_white.svg);
}

.list_information li a h3 {
    font-weight: normal;
    color: #BE042B;
}
.list_information li a h3 span {
    display: block;
    text-align: center;
}
.list_information li a:hover h3 span {
    color: #fff;
}
.list_information li a h3 span.eng {
    font-size: 81.25%;
    margin-bottom: 5px;
}
.list_information li a h3 span.jp {
    font-size: 125%;
    font-weight: bold;
}


.btn_information {
    max-width: 1030px;
    margin: auto;
}
.btn_information a {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    width: 100%;
    height: 100px;
    border: solid 1px #BE042B;
    background-color: #BE042B;
    color: #fff;
    transition: 0.3s;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_white.svg);
    background-repeat: no-repeat;
    background-size: 8px auto;
    background-position: right 20px center;
}

.btn_information a:hover {
    color: #BE042B;
    background-color: #fff;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_red.svg);
}
.btn_information a span {
    text-align: center;
}
.btn_information a span.eng {
    font-size: 81.25%;
}
.btn_information a span.jp {
    font-size: 162.5%;
    font-weight: bold;
}

/* for - 1304px
=========================================================================================== */

@media screen and (max-width: 1304px) {
    
    .Section .inner {
        max-width: none;
        padding: 60px 0px;
    }
    
    #about.Section,
    #training_career.Section,
    #interview.Section,
    #movies.Section,
    #infomation.Section {
        margin-left: -15px;
        margin-right: -15px;
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .list_about {
        flex-wrap: wrap;
    }
    
    .list_about li {
        width: calc( (100% - 15px)/2 );
        justify-content: space-between;
        margin-bottom: 20px;
    }
    
    .list_about li:last-child {
        margin-bottom: 0;
    }
    
    .list_training_career li {
        width: calc( (100% - 15px)/2 );
    }
    
    
    .slider_interview {
        margin-left: 0px;
        margin-right: 0px;
    }
    .next-arrow {
        right: 5px;
    }
    .prev-arrow {
        left: 5px;
    }

}


/* for - 995 - 1304px
=========================================================================================== */

@media screen and (min-width: 995px) and (max-width: 1304px) {
    .OptionWideRWD .GridSet.full {
        width: 100%;
        max-width: none;
        margin: 0 0 0 0;
    }
    
    .OptionWideRWD .GridSet.full .Grid4{
        padding: 0;
    }
    
    .OptionWideRWD #Contents .branding {
        margin-left: -15px;
        margin-right: -15px;
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .bg_anchorlink_red {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {
    .Show994 {
        display: block;
    }
    
    .JS #Contents .branding {
        margin-left: -15px;
        margin-right: -15px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .JS .GridSet.full {
        width: auto;
        max-width: 100%;
        margin: 0;
        margin-left: -15px;
        margin-right: -15px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .JS .GridSet.full .Grid4 {
        padding: 0;
    }
    .bg_anchorlink_red {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    .branding .btn li {
        width: 33%;
        margin-right: 10px;
    }

}


/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    
    .JS h2 {
        margin: 0;
    }
    
    .branding {
        height: auto;
        padding-top: 65px;
        padding-bottom: 65px;
        background-image: url(/image/h1/hsw/recruit/top/branding_sp.jpg);
        margin-bottom: 40px;
    }
    
    .branding .content h1 {
        font-size: 175%;
    }
    .branding .content p {
        font-size: 87.5%;
    }
    
    .branding .btn {
        flex-direction: column;
    }
    .branding .btn li {
        width: 100%;
        max-width: 220px;
        margin-right: 0;
        margin-bottom: 12px;
        height: 50px;
    }
    .branding .btn li:last-child {
        margin-bottom: 0;
    }
    
    .branding .btn li a {
        font-size: 100%;
        background-position: right 15px center;
    }
    
    .JS h2.h2_recruit_topics {
        font-size: 125%;
        margin-bottom: 20px;
    }
    
    
    .list_topics dt,
    .list_topics dd {
        width: 100%;
        box-sizing: border-box;
        padding-right: 15px;
    }
    
    .list_topics dt {
        font-size: 87.5%;
    }
    
    .list_topics dd {
        font-size: 100%;
    }
    
    
    .bg_anchorlink_red {
        margin-top: 50px;
    }
    
    .toggle_accordion_red {
        position: relative;
        display: block;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 15px;
        border-bottom: solid 1px #fff;
        transition: 0.3s;
    }
    
    .toggle_accordion_red:after {
        content: '';
        position: absolute;
        top: 18px;
        right: 30px;
        width: 8px;
        height: 16px;
        transform: rotate(90deg);
        background-image: url(/image/h1/hsw/recruit/top/bt_arrow_white.svg);
        background-repeat: no-repeat;
        background-size: 8px auto;
        background-position: center;
    }
    .toggle_accordion_red.active:after {
        transform: rotate(-90deg);
    }
    .toggle_accordion_red:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    
    .accordion {
        display: none;
    }
    
    .anchorlink_red {
        flex-direction: column;
        margin-top: 0;
    }
    
    .anchorlink_red li {
        width: 100%;
        height: auto;
        position: relative;
    }
    .anchorlink_red li a:after {
        display: none;
    }
    .anchorlink_red li a span.eng {
        display: none;
    }
    .anchorlink_red li a span.jp {
        font-weight: normal;
        text-align: left;
    }
    
    
    .JS h2.h2_recruit {
        margin-left: 0;
        margin-bottom: 30px;
    }
    .h2_recruit:after {
        width: 187px;
    }
    .h2_recruit span.eng {
        font-size: 87.5%;
        margin-bottom: 5px;
    }
    .h2_recruit span.jp {
        font-size: 125%;
    }
    
    
    .h2_with_link {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    
    .h2_with_link h2.h2_recruit {
        margin-bottom: 5px;
    }
    .h2_with_link .link_more {
        width: 100%;
        text-align: right;
        margin-bottom: 0;
    }
    
    .h2_with_link .link_more a {
        font-size: 112.5%;
        padding-right: 30px;
    }
    
    .h2_with_link .h2_recruit {
        margin-right: 0;
    }
    
    
    .h3_recruit span.eng {
        font-size: 75%;
        margin-bottom: 0;
    }
    .h3_recruit span.jp {
        font-size: 112.5%;
    }
    
    
    .list_movies {
        flex-direction: column;
    }
    .list_movies li {
        width: 100%;
    }
    .list_movies li + li {
        margin-top: 60px;
    }
    
    .list_movies li h3 {
        font-size: 112.5%;
    }
    
    
    .list_information {
        flex-wrap: wrap;
        margin-bottom: 0;
    }
    
    .list_information li {
        box-sizing: border-box;
        max-width: none;
        height: 150px;
        width: calc( (100% - 15px)/2 );
        margin-bottom: 15px;
    }
    .list_information li:last-child {
        margin-bottom: 0;
    }
    
    .list_information li a h3 span.eng,
    .btn_information a span.eng {
        font-size: 62.5%;
    }
    .list_information li a h3 span.jp,
    .btn_information a span.jp {
        font-size: 112.5%;
    }
    
    .btn_information a {
        padding-top: 8px;
    }
    
}

/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {
    .list_about li a div.thumb,
    .list_training_career li a div.thumb {
        height: 150px;
    }
}


/*===============================

	下層ページのタイトルの設定

================================*/

.title {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
    padding-top: 40px;
    padding-bottom: 40px;
    min-height: 340px;   
}
.title.humanjob {
    background-image: url(/image/h1/hsw/recruit/humanjob/title.jpg);
}
.title.fresh {
    background-image: url(/image/h1/hsw/recruit/fresh/title.jpg);
}
.title.flow {
    background-image: url(/image/h1/hsw/recruit/flow/title.jpg);
}
.title.education {
    background-image: url(/image/h1/hsw/recruit/education/title.jpg);
}
@media screen and (max-width: 767px) {
    .title.education {
        background-image: url(/image/h1/hsw/recruit/education/title_sp.jpg);
    }
}
.title.welfare {
    background-image: url(/image/h1/hsw/recruit/welfare/title.jpg);
}
.title.number {
    background-image: url(/image/h1/hsw/recruit/number/title.jpg);
}
.title.work {
    background-image: url(/image/h1/hsw/recruit/work/title.jpg);
}

.title.experienced {
    background-image: url(/image/h1/hsw/recruit/experienced/title.jpg);
}
.title.disability {
    background-image: url(/image/h1/hsw/recruit/disability/title.jpg);
}

.title .content h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.title .content h1 span.eng {
    color: #BE042B;
    font-size: 125%;
    margin-bottom: 20px;
}
.title .content h1 span.jp {   
    font-size: 250%;
    font-weight: bold;
    text-align: center;
}

.title .content p {
    font-size: 125%;
    font-weight: bold;
    text-align: center;
}

/* for - 1304px
=========================================================================================== */

@media screen and (max-width: 1304px) {
    
    .title {
        margin-left: -15px;
        margin-right: -15px;
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    
    .title {
        min-height: 260px;
    }
    
    .title .content h1 {
        margin-bottom: 20px;
    }
    
    .title .content h1 span.eng {
        font-size: 87.5%;
        margin-bottom: 5px;
    }

    .title .content h1 span.jp {
        font-size: 137.5%;
    }

    .title .content p {
        font-size: 100%;
    }
}


/*===============================

	下層ページの背景画像の設定

================================*/

.bg_stripe {
    background-image: url(/image/h1/hsw/recruit/humanjob/bg_stripe_l.png),
                      url(/image/h1/hsw/recruit/humanjob/bg_stripe_r.png);
    background-repeat: no-repeat, no-repeat;
    background-size: 40% auto, 40% auto;
    background-position: left -200px top, right -200px top;
}

/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {
    .bg_stripe {
        background-image: url(/image/h1/hsw/recruit/humanjob/bg_stripe_l.png),
                          url(/image/h1/hsw/recruit/humanjob/bg_stripe_r.png);
        background-size: 40% auto, 40% auto;
        background-position: left -80px top, right -80px top;
    }
}

/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    .bg_stripe {
        background-image: url(/image/h1/hsw/recruit/humanjob/bg_stripe_sp_l.png),
                          url(/image/h1/hsw/recruit/humanjob/bg_stripe_sp_r.png);
        background-size: 150px auto, 150px auto;
        background-position: left -50px top, right -50px top;
    }
}


/*===============================

	下層ページ共通のスタイル

================================*/

.toggle_accordion_white {
    display: none;
}

.anchorlink_white {
    display: flex;
    justify-content: center;
    max-width: 1215px;
    margin: auto;
    margin-top: -30px;
    background-color: #fff;
    padding: 0 15px;
}
.anchorlink_white li {
    height: 100px;
    position: relative;
}
.anchorlink_white li + li {
    margin-left: 4.5%;
}
.anchorlink_white li a {
    position: relative;
    display: flex;
    padding: 30px 0px;
    color: #333;
    text-align: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-weight: bold;
    transition: 0.3s;
}

.anchorlink_white li a:after {
    content: '';
    position: absolute;
    bottom: 25px;
    right: 0;
    left: 0;
    margin: auto;
    width: 8px;
    height: 16px;
    transform: rotate(90deg);
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_red.svg);
    background-repeat: no-repeat;
    background-size: 8px auto;
    background-position: center;
    transition: 0.3s;
}

.anchorlink_white li a:hover {
    opacity: 0.7;
}

.anchorlink_white li a:hover:after {
    bottom: 22px;
}



.h2_underline {
    position: relative;
    font-weight: bold;
    font-size: 187.5%;
    text-align: center;
    background: none;
    padding: 0;
    margin-bottom: 45px;
    padding-bottom: 10px;
}

.h2_underline span {
    background: none;
    color: #333;
    padding: 0;
    font-size: 80%;
}

.h2_underline:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-bottom: 0;
    width: 110px;
    height: 2px;
    background-color: #BE042B;
}

.h2_bold {
    font-weight: bold;
    text-align: center;
    font-size: 162.5%;
    background: none;
    padding: 0;
    margin: 0;
    margin-bottom: 25px;
}



.card {
    display: grid;
    gap: 25px;
    box-sizing: border-box;
    justify-content: center;
}

.card.column1 {
    grid-template-columns: repeat(1, minmax(0, 435px));
}
.card.column2 {
    grid-template-columns: repeat(2, minmax(0, 435px));
}
.card.column3 {
    grid-template-columns: repeat(3, 1fr);
}


.card > li {
    box-sizing: border-box;
    background-color: #fff;
    padding: 33px 30px;
    border: solid 1px #F0F0F0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.11);
}


.card > li.wide {
    grid-column: 1/3;
}
.card > li.bg_pink {
    background-color: #F2CDD5;
    border: none;
    box-shadow: none;
}
.card > li.bg_yellow {
    background-color: #F2F2CD;
    border: none;
    box-shadow: none;
}


.card > li h3 {
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    font-size: 125%;
    color: #333;
}

.card > li.wide h3 {
    text-align: left;
}

.table {
    box-sizing: border-box;
    width: 100%;
    margin-top: 20px;
}

.table th {
    box-sizing: border-box;
    font-size: 100%;
    white-space: nowrap;
    background-color: #E2E2E2;
    text-align: center;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.table tr:first-child th {
    border-top: 1px solid #E2E2E2;
}
.table tr:last-child th {
    border-bottom: 1px solid #E2E2E2;
}

.table td {
    box-sizing: border-box;
    font-size: 100%;
    width: 100%;
    border-top: 1px solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
}


.table ul.LinkListStyle1 {
    font-size: 100%;
    margin-bottom: 0;
}
.table ul.LinkListStyle1 li a {
    background-position: right top 5px;
    padding-right: 25px;
}
.table ul.LinkListStyle1 li a:hover {
    text-decoration: underline!important;
}


.btn_entry {
    max-width: 550px;
    margin: auto;
    margin-top: 45px;
}
.btn_entry a {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    width: 100%;
    height: 100px;
    border: solid 1px #BE042B;
    background-color: #BE042B;
    color: #fff;
    transition: 0.3s;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_white.svg);
    background-repeat: no-repeat;
    background-size: 8px auto;
    background-position: right 20px center;
}
.btn_entry a:hover {
    color: #BE042B;
    background-color: #fff;
    background-image: url(/image/h1/hsw/recruit/top/bt_arrow_red.svg);
}
.btn_entry a span {
    text-align: center;
}
.btn_entry a span.eng {
    font-size: 81.25%
}
.btn_entry a span.jp {
    font-size: 150%;
    font-weight: bold;
}



.bg_gray {
    background-color: #F2F2F2;
    margin-top: 50px;
    margin-bottom: 50px;
}



.bg_gray .inner {
    padding-top: 50px;
    padding-bottom: 50px;
}


.grid_contact {
    display: grid;
    justify-content: center;
    align-items: center;
    gap: 25px 90px;
    grid-template-columns: auto auto;
}



.btn_contact a {
    display: inline-block;
    font-weight: bold;
    color: #333;
    font-size: 125%;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 60px 20px 40px;
    border: solid 2px #333;
    background-color: #fff;
    transition: 0.3s;
    border-radius: 50px;
    background-image: url(/image/jp/r1/icon/icon_inquiry_hd.gif);
    background-repeat: no-repeat;
    background-size: 24px auto;
    background-position: right 20px center;
}

.btn_contact a:hover {
    opacity: 0.7;
}



/* for - 1304px
=========================================================================================== */

@media screen and (max-width: 1304px) {
    
    .bg_gray {
        margin-left: -15px;
        margin-right: -15px;
        padding-right: 15px;
        padding-left: 15px;
    }
}


/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {
    
    .anchorlink_white li + li {
        margin-left: 2.5%;
    }
    
    .anchorlink_white li a {
        font-size: 87.5%;
    }
    
    .grid_contact {
        grid-template-columns: auto;
    }
    
    .btn_contact {
        width: 100%;
        max-width: 390px;
        text-align: center;
    }
    
    .btn_contact a {
        padding: 20px 0;
        text-align: center;
    }    
}



/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    
    
    .toggle_accordion_white {
        display: block;
        margin-top: -20px;
        background-color: #fff;
        position: relative;
        font-weight: bold;
        cursor: pointer;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 12px 22px;
        transition: 0.3s;
    }
    
    .toggle_accordion_white:after {
        content: '';
        position: absolute;
        top: 18px;
        right: 30px;
        width: 8px;
        height: 16px;
        transform: rotate(90deg);
        background-image: url(/image/h1/hsw/recruit/top/bt_arrow_red.svg);
        background-repeat: no-repeat;
        background-size: 8px auto;
        background-position: center;
    }
    .toggle_accordion_white.active:after {
        transform: rotate(-90deg);
    }
    
    
    .anchorlink_white {
        padding: 0;
        flex-direction: column;
        margin-top: 0;
    }
    .anchorlink_white li {
        height: auto;
        
    }
    .anchorlink_white li + li {
        margin-left: 0;
    }
    
    .anchorlink_white li a {
        padding: 12px 22px;
        background-color: #F8F8F8;
        justify-content: flex-start;
        font-size: 100%;
        font-weight: normal;
    }
    
    .anchorlink_white li a:after {
        display: none;
    }
    
    
    .JS .h2_underline {
        margin-bottom: 30px;
        font-size: 125%;
    }
    
    .JS .h2_underline:after {
        width: 80px;
    }
    
    .JS .h2_bold {
        margin-bottom: 25px;
        font-size: 125%;
    }
    
    .card.column1,
    .card.column2,
    .card.column3 {
        grid-template-columns: 100%;
    }
    
    .card > li.wide {
        grid-column: auto;
    }
    
    .card > li.wide h3 {
        text-align: center;
    }
    
    .table th,
    .table td {
        display: block;
        width: 100%;
        border-top: none;
        border-bottom: none;
    }
    
    .table th {
        border-left: solid 1px #E2E2E2;
        border-right: solid 1px #E2E2E2;
        text-align: left;
    }
    
    .table td {
        border-left: solid 1px #C0C0C0;
        border-right: solid 1px #C0C0C0;
    }
    .table tr:last-child td {
        border-bottom: solid 1px #C0C0C0;
    }
    
    .btn_entry a span.eng {
        font-size: 62.5%;
    }
    .btn_entry a span.jp {
        font-size: 112.5%;
    }
    .btn_entry a {
        padding-top: 8px;
    }
    
}



/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {
    .JS .table th, .JS .table td {
        font-size: 100%;
    }
}


/*===============================

	/recruit/humanjob/index.html

================================*/

.no-slider .slider_interview {
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 70px;
}
.no-slider .slider_interview li {
    width: calc((100% - 80px )/3);
    padding: 0;
    margin-bottom: 40px;
}
.no-slider .slider_btn {
    display: none;
}

/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {
    .no-slider .slider_interview li {
        width: calc((100% - 40px )/2);
    }
}

/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    .no-slider .slider_interview li {
        width: 100%;
    }
}


/*===============================

	/recruit/humanjob/XXX/index.html

================================*/


.humanjob .main_visual {
    overflow: hidden;
    margin-bottom: 85px;
}

.humanjob .main_visual .inner {
    display: flex;
    margin: auto;
    justify-content: flex-end;
}

.humanjob .main_visual .inner > div.text {
    width: calc( 50% - ( (100% - 1290px)/2 ) );
    max-width: 660px;
    box-sizing: border-box;
}

.humanjob .main_visual .inner > div.text h1 {
    border-bottom: solid 1px #BE042B;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 35px;
    background-color: #fff;
}

.humanjob .main_visual .inner > div.text h1 span.eng {
    color: #BE042B;
    font-size: 100%;
    margin-right: 30px;
}

.humanjob .main_visual .inner > div.text h1 span.jp {
    font-size: 125%;
    font-weight: bold;
}

.humanjob .main_visual .inner > div.text .job {
    display: inline-block;
    box-sizing: border-box;
    padding: 3px 20px;
    margin-bottom: 20px;
    color: #fff;
    background-color: #BE042B;
    font-size: 125%;
    border-radius: 4px;
}

.humanjob .main_visual .inner > div.text .copy {
    box-sizing: border-box;
    font-size: 225%;
    font-weight: bold;
    line-height: 140%;
    margin-bottom: 25px;
    padding-right: 15px;
}

.humanjob .main_visual .inner > div.text .department {
    font-size: 125%;
}

.humanjob .main_visual .inner > div.text .department p + p {
    margin-top: 20px;
}

.humanjob .main_visual .inner > div.text .initial {
    font-size: 187.5%;
    font-weight: bold;
    color: #BE042B;
}

.humanjob .main_visual .inner > div.photo {
    width: 50%;
    margin-right: calc(50% - 50vw);
    max-height: 646px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.humanjob .main_visual .inner > div.photo img {
    width: auto;
    height: 100%;
}


.humanjob .contents_photo_and_text p,
.humanjob .contents_only_text p,
.contents_message p {
    font-size: 112.5%;
}

.humanjob .Section:not(#interview) {
    padding: 0;
}
.humanjob .Section:not(#interview) .inner {
    padding: 0;
}

.humanjob .contents_photo_and_text {
    padding: 60px 0 0 0!important;
    position: relative;
    display: flex;
    margin-bottom: 120px;
}

.humanjob .contents_photo_and_text.reverse {
    flex-direction: row-reverse;
}

.humanjob .contents_photo_and_text .text {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    max-width: 638px;
    background-color: #fff;
    border-left: solid 1px #BE042B;
    border-bottom: solid 1px #BE042B;
    padding: 30px 50px 100px 50px;
    width: 50%;
}

.humanjob .contents_photo_and_text.reverse .text {
    border-left: none;
    border-right: solid 1px #BE042B;
    left: 0;
}

.humanjob .contents_photo_and_text .photo {
    width: 60%;
    max-width: 750px;
    max-height: 500px;
}
.humanjob .contents_photo_and_text .photo img {
    width: 100%;
    height: auto;
}


.humanjob .contents_only_text {
    box-sizing: border-box;
    max-width: 1030px;
    padding: 20px 50px 50px 50px;
    border: solid 1px #BE042B;
    margin: auto;
    margin-bottom: 120px;
}

.humanjob .contents_schedule {
    display: flex;
    margin-bottom: 120px;
}
.humanjob .contents_schedule > div {
    width: 50%;
}

.humanjob .contents_schedule > div.bg_normal {
    box-sizing: border-box;
    background-color: #F2CDD5;
    display: flex;
    justify-content: flex-end;
    padding: 60px 80px 100px 0;
}

.humanjob .contents_schedule > div.bg_busy {
    box-sizing: border-box;
    background-color: #FFA8BB;
    display: flex;
    justify-content: flex-start;
    padding: 60px 0 100px 80px;
}

.humanjob .contents_schedule > div > div {
    width: 445px;
}

.humanjob .contents_schedule > div > div > p.bg_white {
    box-sizing: border-box;
    background-color: #fff;
    width: 300px;
    text-align: center;
    font-size: 150%;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 30px;
    margin: auto;
    margin-bottom: 60px;
}

.humanjob .contents_schedule > div > div > ol.timeline {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.humanjob .contents_schedule > div > div > ol.timeline li {
    display: flex;
    font-size: 112.5%;
    
}

.humanjob .contents_schedule > div > div > ol.timeline li span.time {
    position: relative;
    display: inline-block;
    width: 110px;
    padding: 10px 0;
}

.humanjob .contents_schedule > div > div > ol.timeline li span.time:before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 74px;
    width: 2px;
    height: 100%;
    background-color: #666;
}
.humanjob .contents_schedule > div > div > ol.timeline li span.time:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 70px;
    width: 10px;
    height: 10px;
    background-image: url(/image/h1/hsw/recruit/humanjob/circle.svg);
    background-repeat: no-repeat;
    background-size: 10px 10px
}

.humanjob .contents_schedule > div > div > ol.timeline li span.detail {
    width: calc(100% - 110px);
    padding: 10px 0;
}

.humanjob .contents_schedule > div > div > ol.timeline li:first-child span.time,
.humanjob .contents_schedule > div > div > ol.timeline li:first-child span.detail {
    padding-top: 5px;
}

.humanjob .contents_schedule > div > div > ol.timeline li:first-child span.time:after {
    top: 13px;
}

.humanjob .contents_schedule > div > div > ol.timeline li:last-child span.time,
.humanjob .contents_schedule > div > div > ol.timeline li:last-child span.detail {
    padding-bottom: 5px;
}


.humanjob .contents_message {
    display: flex;
    align-items: center;
    margin-bottom: 90px;
}
.humanjob .contents_message > div {
    width: 50%;
}
.humanjob .contents_message > div img {
    width: 100%;
    height: auto;
}
.humanjob .contents_message > div.text {
    box-sizing: border-box;
    padding-left: 60px;
}

.humanjob .contents_message > div.text .bold {
    font-weight: bold;
    font-size: 150%;
    margin-bottom: 20px;
}



.h2_humanjob,
.h2_humanjob span {
    background: none;
    margin: 0;
    padding: 0;
    font-weight: normal;
    color: #333;
}
.h2_humanjob {
    margin-bottom: 16px;
    text-align: center;
}
.h2_humanjob span.eng {
    font-size: 87.5%;
    margin-bottom: 10px;
    color: #BE042B;
}
.h2_humanjob span.jp {
    font-size: 150%;
    font-weight: bold;
    line-height: 137.5%;
}

/* for - 995 - 1304px
=========================================================================================== */

@media screen and (min-width: 995px) and (max-width: 1304px) {
    .OptionWideRWD #Contents.humanjob .main_visual .inner > div.photo img {
        max-width: none;
        height: 100%;
    }
}


/* for - 1304px
=========================================================================================== */

@media screen and (max-width: 1304px) {
    
    .humanjob .main_visual {
        margin-right: -15px;
        padding-right: 15px;
    }
    
    .humanjob .main_visual .inner > div.text {
        width: 50%;
        max-width: 660px;
    }
    
    .humanjob .main_visual .inner > div.text .copy {
        font-size: 200%;
    }
    
    .humanjob .contents_schedule {
        margin-left: -15px;
        margin-right: -15px;
    }
    .humanjob .contents_schedule > div > div {
        width: 100%;
    }
    
    .humanjob .contents_schedule > div.bg_normal,
    .humanjob .contents_schedule > div.bg_busy {
        padding: 60px 30px;
    }
    
}



/* for - 994px
=========================================================================================== */

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

    .humanjob .main_visual {
        margin: 0 -15px 60px -15px;
        padding: 0;
    }
    .humanjob .main_visual .inner {
        display: flex;
        flex-direction: column-reverse;
        padding: 0 15px;
    }
    .humanjob .main_visual .inner > div.text,
    .humanjob .main_visual .inner > div.photo {
        width: 100%;
        max-width: none;
    }

    
    .humanjob .main_visual .inner > div.photo {
        margin: 0 -15px;
        padding: 0;
        width: calc(100% + 30px);
    }
    
    .humanjob .main_visual .inner > div.text {
        padding-left: 15px;
        padding-right: 15px;
        border-top: solid 1px #BE042B;
        border-bottom: solid 1px #BE042B;
        padding: 0 0 35px;
        transform: translateY(-10px);
    }
    
    .humanjob .main_visual .inner > div.text h1 {
        padding: 20px 15px;
    }
    
    
    .humanjob .main_visual .inner > div.text .job {
        margin-bottom: 15px;
    }

    .humanjob .main_visual .inner > div.text .copy {
        margin-bottom: 15px;
    }
    
    .humanjob .main_visual .inner > div.text .job {
        margin-left: 15px;
        margin-right: 15px;
    }
    .humanjob .main_visual .inner > div.text .copy,
    .humanjob .main_visual .inner > div.text .profile {
        padding: 0 15px;
    }

    
    .humanjob .contents_photo_and_text {
        margin-left: -15px;
        margin-right: -15px;
    }
    
    .humanjob .contents_photo_and_text,
    .humanjob .contents_photo_and_text.reverse {
        flex-direction: column-reverse;
        padding: 0!important;
    }
    
    .humanjob .contents_photo_and_text {
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 0;
        padding: 45px 15px 90px;
    }
    
    .humanjob .contents_only_text {
        border: none;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 0;
        padding: 45px 15px 60px;
    }
    .humanjob .border-top {
        border-top: solid 1px #BE042B;
    }
    .humanjob .border-bottom {
        border-bottom: solid 1px #BE042B;
    }
    
    
    .humanjob .contents_photo_and_text .text {
        padding: 30px 15px 60px 15px;
    }
    
    .humanjob .contents_photo_and_text .photo {
        width: 100%;
        max-width: none;
        max-height: none;
    }
    
    
    .humanjob .contents_photo_and_text .text {
        position: static;
        width: 100%;
        max-width: none;
        border-left: none;
    }
    .humanjob .contents_photo_and_text.reverse .text {
        border-right: none;
    }
    
    
    .humanjob .contents_message > div.text {
        padding-left: 30px;
    }
    
}




/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    
    .humanjob .main_visual {
        margin: 0 -15px 10px -15px;
    }

    .humanjob .main_visual .inner > div.text .initial {
        font-size: 112.5%;
    }
    
    
    .humanjob .main_visual .inner > div.text .job {
        font-size: 87.5%;
    }

    .humanjob .main_visual .inner > div.text .copy {
        font-size: 125%;
    }

    .humanjob .main_visual .inner > div.text .department {
        font-size: 87.5%;
    }
    
    
    .humanjob .contents_photo_and_text p,
    .humanjob .contents_only_text p,
    .contents_message p {
        font-size: 100%;
    }
    
    
    .humanjob .contents_schedule {
        flex-direction: column;
        margin-bottom: 0;
    }
    .humanjob .contents_schedule > div {
        width: 100%;
    }
    .humanjob .contents_schedule > div.bg_normal,
    .humanjob .contents_schedule > div.bg_busy {
        justify-content: center;
        padding: 40px 30px;
    }
    .humanjob .contents_schedule > div > div > p.bg_white {
        width: 100%;
        font-size: 112.5%;
        margin-bottom: 30px;
    }
    .humanjob .contents_schedule > div > div > ol.timeline li {
        font-size: 100%;
    }
    
    
    .humanjob .contents_message {
        flex-direction: column;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: 60px;
    }
    .humanjob .contents_message > div {
        width: 100%;
    }
    
    .humanjob .contents_message > div.photo {
        margin-bottom: 30px;
    }
    
    .humanjob .contents_message > div.text {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .humanjob .contents_message > div.text .bold {
        text-align: center;
        font-size: 112.5%;
        margin-bottom: 10px;
    }

    
    .JS h2.h2_humanjob {
        margin-bottom: 15px;
    }
    .h2_humanjob span.eng {
        font-size: 75%;
        margin-bottom: 5px;
    }
    .h2_humanjob span.jp {
        font-size: 112.5%;
    }
    
}



/*===============================

    採用の流れ
	/recruit/flow/

================================*/

.list_step {
    list-style-type: none;
    padding: 0;
    display: grid;
    gap: 20px 0;
    justify-content: center;
}

.list_step.six {
    grid-template-columns: repeat(auto-fit, calc( 1215px / 6 ))
}

.list_step.five {
    grid-template-columns: repeat(auto-fit, calc( 1215px / 5 ))
}

.list_step li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 195px;
    box-sizing: border-box;
    background-color: #ECECEC;
    background-image: url(/image/h1/hsw/recruit/flow/arrow_gray_r.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 25px 100%;
    padding: 20px 30px 20px 20px;
}

.list_step li:last-child {
    background-color: #BE042B;
    background-image: url(/image/h1/hsw/recruit/flow/arrow_red_r.svg);
}

.list_step li p:nth-child(1) {
    font-weight: bold;
    color: #BE042B;
    text-align: center;
    margin-bottom: 3px;
}
.list_step li p:nth-child(2) {
    font-weight: bold;
    font-size: 118.75%;
    text-align: center;
    line-height: 130%;
}
.list_step li p:nth-child(n+3) {
    font-weight: normal;
    font-size: 93.75%;
}

.list_step li:last-child p {
    font-weight: bold;
    color: #fff;
    font-size: 118.75%;
}




.list_links {
    display: flex;
    justify-content: space-between;
}

.list_links li {
    width: calc( (100% - 40px*2)/3 );
    justify-content: space-between;
}

.list_links li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

.list_links li a:hover {
    opacity: 0.7;
}

.list_links li a div.thumb {
    width: 100%;
    height: 200px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}
.list_links li a div.thumb.fresh {
    background-image: url(/image/h1/hsw/recruit/flow/img_newgraduate.jpg);
}
.list_links li a div.thumb.experienced {
    background-image: url(/image/h1/hsw/recruit/flow/img_expeople.jpg);
}
.list_links li a div.thumb.disability {
    background-image: url(/image/h1/hsw/recruit/flow/img_peoplewith.jpg);
}

/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {
    
    .list_links {
        flex-wrap: wrap;
    }
    
    .list_links li {
        width: calc( (100% - 15px)/2 );
        justify-content: space-between;
        margin-bottom: 20px;
    }
    
    .list_links li:last-child {
        margin-bottom: 0;
    }
    
}


/* for - 767px
=========================================================================================== */

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

    
    .list_step {
        gap: 0;
    }

    .list_step.six,
    .list_step.five {
        grid-template-columns: repeat(auto-fit, 100%);
    }
    

    .list_step li {
        min-height: auto;
        padding: 25px 20px 45px 20px;
        background-image: url(/image/h1/hsw/recruit/flow/arrow_gray_d.svg);
        background-position: bottom center;
        background-size: 100% 45px;
    }

    .list_step li:last-child {
        background-image: url(/image/h1/hsw/recruit/flow/arrow_red_d.svg);
    }
    
    .list_step li p:nth-child(1) {
        font-size: 81.25%;
    }
    .list_step li p:nth-child(2),
    .list_step li:last-child p {
        font-size: 106.25%;
    }
    
}


/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {
    
    .list_step li {
        background-size: 100% 35px;
    }
    
    .list_links li a div.thumb {
        height: 150px;
    }
}




/*===============================

    教育制度・キャリアアップ
	/recruit/education/

================================*/

.text_education {
    margin: 0 auto 40px;
    max-width: 930px;
}

.text_education.adjust {
    margin-top: 40px;
    margin-bottom: 0;
}

.flex {
    display: flex;
    box-sizing: border-box;
    align-items: flex-start;
}

.flex.itss {
    align-items: center;
    justify-content: center;
}

.flex.itss > *:nth-child(1) {
    width: calc(60% - 15px);
}
.flex.itss > *:nth-child(2) {
    box-sizing: border-box;
    width: calc(40% - 15px);
    background-color: #F2F2F2;
    padding: 25px 30px;
}

.flex.itss > *:nth-child(2) p {
    margin-bottom: 15px;
}


.align-items-center {
    align-items: center;
}

.reverse {
    flex-direction: row-reverse;
}
.flex:not(.reverse) > *:first-child {
    margin-right: 30px;
}
.flex.reverse > *:last-child {
    margin-right: 30px;
}

/* 固定幅 */
.flex .fixed {
    flex: 0 0 auto;
    max-width: 50%;
}

.flex .fixed.bg_white {
    background-color: #fff;
    text-align: center;
}

/* 可変幅 */
.flex .variable {
    
}

.Show428 {
    display: none;
}


/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    
    .flex,
    .reverse {
        flex-direction: column;
    }
    
    .flex:not(.reverse) > *:first-child,
    .flex.reverse > *:last-child  {
        margin-right: 0px;
    }
    
    .flex.itss > *:nth-child(1),
    .flex.itss > *:nth-child(2) {
        width: 100%;
    }
    
    .flex .fixed {
        max-width: none;
        width: 100%;
    }
    
    .flex > *:first-child {
        margin-bottom: 30px;
    }
}



/* for - 428px
=========================================================================================== */

@media screen and (max-width: 428px) {
    .Show428 {
        display: block;
    }
    .Hide428 {
        display: none;
    }
}




/*===============================

    福利厚生
	/recruit/welfare/

================================*/

.Section.welfare .inner {
    padding-top: 100px;
    padding-bottom: 100px;
}

.Section.welfare.bg_gray {
    margin-top: 0;
    margin-bottom: 0;
}

.img_wide {
    max-width: 1215px;
    margin-bottom: 45px;
}

/* for - 1304px
=========================================================================================== */

@media screen and (max-width: 1304px) {
    .img_wide {
        margin-left: auto;
        margin-right: auto;
    }
}

/* for - 1259px
=========================================================================================== */

@media screen and (max-width: 1259px) {
    .img_wide {
        margin-left: -15px;
        margin-right: -15px;
        max-width: none;
    }
    
    .img_wide img {
        width: 100%;
        height: auto;
    }
}

/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {
    .Section.welfare .inner {
        padding-top: 75px;
        padding-bottom: 75px;
    }
}

/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    
    .Section.welfare .inner {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .img_wide {
        margin-bottom: 25px;
    }
}



/*===============================

    数字で見る
	/recruit/number/

================================*/

.anchorlink_white.number {
    max-width: 750px;
}

.grid_number {
    display: grid;
    max-width: 1215px;
    box-sizing: border-box;
    margin: auto;
    gap: 60px 40px;
    box-sizing: border-box;
    justify-content: start;    grid-template-columns: repeat(24, [col-start] 1fr);
}

.grid_number li {
    display: grid;
    justify-items: center;
    align-items: center;
    background-color: #F2F2F2;
    grid-template-columns: 100%;
    grid-template-rows: 100px 100px auto;
    gap: 0;
    padding: 30px 15px;
    box-sizing: border-box;
    gap: 20px 0;
}

.bg_gray .grid_number li {
    background-color: #fff;
}



/* 会社について */
.grid_number li.grid_number_01 {
  grid-column: col-start 1 / span 10;
}
.grid_number li.grid_number_02 {
  grid-column: col-start 11 / span 5;
}
.grid_number li.grid_number_03 {
  grid-column: col-start 16 / span 9;
}
.grid_number li.grid_number_04 {
  grid-column: col-start 1 / span 8;
}
.grid_number li.grid_number_05 {
  grid-column: col-start 9 / span 5;
}
.grid_number li.grid_number_06 {
  grid-column: col-start 14 / span 11;
}


/* 働く人について */
.grid_number li.grid_number_07 {
  grid-column: col-start 1 / span 8;
}
.grid_number li.grid_number_08 {
  grid-column: col-start 9 / span 8;
}
.grid_number li.grid_number_09 {
  grid-column: col-start 17 / span 8;
}
.grid_number li.grid_number_10 {
  grid-column: col-start 1 / span 14;
}
.grid_number li.grid_number_11 {
  grid-column: col-start 15 / span 10;
}
.grid_number li.grid_number_12 {
  grid-column: col-start 1 / span 8;
}
.grid_number li.grid_number_13 {
  grid-column: col-start 9 / span 8;
}
.grid_number li.grid_number_14 {
  grid-column: col-start 17 / span 8;
}



/* 働きやすさ */
.grid_number li.grid_number_15 {
  grid-column: col-start 1 / span 8;
}
.grid_number li.grid_number_16 {
  grid-column: col-start 9 / span 8;
}
.grid_number li.grid_number_17 {
  grid-column: col-start 17 / span 8;
}
.grid_number li.grid_number_18 {
  grid-column: col-start 1 / span 5;
}
.grid_number li.grid_number_19 {
  grid-column: col-start 6 / span 14;
}
.grid_number li.grid_number_20 {
  grid-column: col-start 20 / span 5;
}
.grid_number li.grid_number_21 {
  grid-column: col-start 1 / span 8;
}



.grid_number li > *:nth-child(1) {
    align-self: center;
    justify-self: center;
}
.grid_number li > *:nth-child(2) {
    font-weight: bold; 
    text-align: center;
    font-size: 162.5%;
    align-self: center;
    justify-self: center;
}

.grid_number li .thin {
    display: block;
    font-weight: normal;
    font-size: 80%;
}

.grid_number li > *:nth-child(3) {
    color: #BE042B;
    text-align: center;
    font-size: 125%;
    align-self: end;
    justify-self: center;
}
.grid_number li .num {
    display: inline-block;
    line-height: 100%;
    font-family: Futura, 'Century Gothic';
    font-size: 340%;
    margin-right: 5px;
}

.grid_number li .text {
    display: inline-block;
    line-height: 100%;
    font-size: 300%;
}

.flex_number {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.flex_number > * + * {
    margin-left: 20px;
}

.notes {
    font-weight: normal;
    font-size: 60%;
}

.AdditionalNotesStyle2.number {
    margin-top: 70px;
}


/* for - 1304px
=========================================================================================== */

@media screen and (max-width: 1304px) {
    .grid_number {
        gap: 30px 20px;
    }
    .grid_number li .num {
        font-size: 300%;
    }
}

/* for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {
    
    /* 会社について */
    .grid_number li.grid_number_01 {
      grid-column: col-start 1 / span 12;
    }
    .grid_number li.grid_number_02 {
      grid-column: col-start 13 / span 12;
    }
    .grid_number li.grid_number_03 {
      grid-column: col-start 1 / span 12;
    }
    .grid_number li.grid_number_04 {
      grid-column: col-start 13 / span 12;
    }
    .grid_number li.grid_number_05 {
      grid-column: col-start 1 / span 9;
    }
    .grid_number li.grid_number_06 {
      grid-column: col-start 10 / span 15;
    }
    
    /* 働く人について */
    .grid_number li.grid_number_07 {
      grid-column: col-start 1 / span 12;
    }
    .grid_number li.grid_number_08 {
      grid-column: col-start 13 / span 12;
    }
    .grid_number li.grid_number_09 {
      grid-column: col-start 1 / span 24;
    }
    .grid_number li.grid_number_10 {
      grid-column: col-start 1 / span 24;
    }
    .grid_number li.grid_number_11 {
      grid-column: col-start 1 / span 12;
    }
    .grid_number li.grid_number_12 {
      grid-column: col-start 13 / span 12;
    }
    .grid_number li.grid_number_13 {
      grid-column: col-start 1 / span 12;
    }
    .grid_number li.grid_number_14 {
      grid-column: col-start 13 / span 12;
    }
    
    
    /* 働きやすさ */
    .grid_number li.grid_number_15 {
      grid-column: col-start 1 / span 12;
    }
    .grid_number li.grid_number_16 {
      grid-column: col-start 13 / span 12;
    }
    .grid_number li.grid_number_17 {
      grid-column: col-start 1 / span 12;
    }
    .grid_number li.grid_number_18 {
      grid-column: col-start 13 / span 12;
    }
    .grid_number li.grid_number_19 {
      grid-column: col-start 1 / span 24;
    }
    .grid_number li.grid_number_20 {
      grid-column: col-start 1 / span 12;
    }
    .grid_number li.grid_number_21 {
      grid-column: col-start 13 / span 12;
    }
    
    
    .grid_number li .num {
        font-size: 280%;
    }
}

/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {   
    .grid_number {
        gap: 15px 0;
    }
    .grid_number li {
        grid-template-rows: auto auto auto;
        gap: 0;
    }
    .grid_number li[class^="grid_number_"] {
      grid-column: col-start 1 / span 24;
    }
    
    .grid_number li > *:nth-child(1) {
        margin-bottom: 10px;
    }
    .grid_number li > *:nth-child(2) {
        margin-bottom: 15px;
        font-size: 125%;
    }
    .grid_number li > *:nth-child(3) {
        font-size: 100%;
    }
    .grid_number li .num {
        font-size: 237.5%;
    }
    .grid_number li .text {
        font-size: 200%;
    }
}



/*===============================

    事業内容について
	/recruit/work/

================================*/

.lead_work {
    font-weight: bold;
    color: #BE042B;
    font-size: 150%;
    text-align: center;
    margin-bottom: 35px;
}

.text_work_01 {
    text-align: center;
    font-size: 100%;
    margin-bottom: 65px;
}

.text_work_02 {
    max-width: 912px;
    margin: auto;
    text-align: center;
    font-size: 125%;
    margin-bottom: 50px;
}

.card + .h2_underline {
    margin-top: 75px;
}

.dot_red li {
    position: relative;
    padding: 0 0 0 20px;
}
.dot_red li:before{
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #BE042B;
    border-radius: 4px;
    top: 9px;
    left: 0;

}

.AdditionalNotesStyle2.work {
    margin-top: 70px;
}

/* for - 767px
=========================================================================================== */

@media screen and (max-width: 767px) {
    
    .lead_work {
        font-size: 125%;
        margin-bottom: 20px;
    }
    
    .text_work_01 {
        text-align: left;
    }

    .text_work_02 {
        max-width: 100%;
        text-align: left;
        font-size: 100%;
    }
    
    .card + .h2_underline {
        margin-top: 50px;
    }
    
}



/*===============================

    クロストーク
	/recruit/number/

================================*/

/*  Banner Lind
=========================================================================================== */

.bannerLink .inner {
    padding-bottom: 0;
}

.bannerLinkImg:hover {
    opacity: 0.7;
}