@charset "utf-8";

/* ------------------------------ */
/* 記事別専用 */
/* ------------------------------ */

/* 電力記事 */

#electric-power #feature_column_contents_head_whitebox{
    max-width: 540px;
}



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





}




/* パワエレ記事 */

#power-electronics #feature_column_contents_head_whitebox{
    max-width: 550px;
}

.pe_fieldmap_block_head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.pe_fieldmap_block_body {
    margin-top: 20px;
}
.pe_fieldmap_block_icon{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #999;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.pe_fieldmap_block_icon img{
    width: 100%;
    height: auto;
}
.pe_fieldmap_block_text{
    width: calc(100% - 80px);
    box-sizing: border-box;
    padding-left: 20px;
}
.pe_fieldmap_block_title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 4px;
}
.pe_fieldmap_block_description{
    font-weight: 500;
}
ul.pe_fieldmap_list{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}
ul.pe_fieldmap_list > li{
    width: calc(100% / 3);
    box-sizing: border-box;
    padding: 0 12px;
}
.pe_fieldmap_list_thumb{
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
}
.pe_fieldmap_list_thumb img{
    width: 100%;
}
.pe_fieldmap_block {
    padding: 20px 24px 24px;
    background: #f5f5f5;
    border-radius: 16px;
}
#pe_fieldmap{
    margin-top: 40px;
}
#pe_fieldmap .pe_fieldmap_block{

}
#pe_fieldmap .pe_fieldmap_block:not(:first-of-type){
    margin-top: 32px;
}
.pe_fieldmap_list_item {
    line-height: 1.5;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}
.pe_fieldmap_list_description {
    font-size: 15px;
    line-height: 1.6;
}


#mobility.pe_fieldmap_block{
    border: 2px solid #316daa;
    background: #f5f8fd;
}
#mobility .pe_fieldmap_block_icon{
    background: #316daa;
}
#mobility .pe_fieldmap_block_title{
    color: #316daa;
}
#mobility .pe_fieldmap_list_item{
    color: #153f67;
}

#robot.pe_fieldmap_block{
    border: 2px solid #5e8f34;
    background: #f5faf4;
}
#robot .pe_fieldmap_block_icon{
    background: #5e8f34;
}
#robot .pe_fieldmap_block_title{
    color: #5e8f34;
}
#robot .pe_fieldmap_list_item{
    color: #304f23;
}

#energy.pe_fieldmap_block{
    border: 2px solid #dc930a;
    background: #fef9f3;
}
#energy .pe_fieldmap_block_icon{
    background: #dc930a;
}
#energy .pe_fieldmap_block_title{
    color: #dc930a;
}
#energy .pe_fieldmap_list_item{
    color: #dc930a;
    color: #95490b;
}

#infra.pe_fieldmap_block{
    border: 2px solid #694f90;
    background: #f8f5fc;
}
#infra .pe_fieldmap_block_icon{
    background: #694f90;
}
#infra .pe_fieldmap_block_title{
    color: #694f90;
}
#infra .pe_fieldmap_list_item{
    color: #694f90;
    color: #2e1f47;
}

#possibility.pe_fieldmap_block{
    border: 2px solid #0c3f6e;
    background: #ebf0f8;
    padding: 24px 24px 24px;
}
#possibility .pe_fieldmap_block_icon{
    padding: 12px;
}
#possibility .pe_fieldmap_block_icon{
    background: #0c3f6e;
}
#possibility .pe_fieldmap_block_title{
    color: #0c3f6e;
    margin-bottom: 8px;
}

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

.pe_fieldmap_block_title{
    font-size: 22px;
}
.pe_fieldmap_block_icon{
    width: 64px;
    height: 64px;
}
.pe_fieldmap_block_text{
    width: calc(100% - 64px);
    padding-left: 16px;
}
.pe_fieldmap_block{
    padding: 20px 20px 24px;
}
.pe_fieldmap_block_body{
    margin-top: 16px;
}

ul.pe_fieldmap_list{
    display: block;
    margin: 24px 0 0;
}
ul.pe_fieldmap_list > li{
    width: 100%;
    padding: 0;
}
ul.pe_fieldmap_list > li:not(:first-of-type){
    margin-top: 24px;
}
.pe_fieldmap_block_description{
    margin-top: 16px;
}



}




/* GX記事 */

#gx #feature_column_contents_head_whitebox{
    max-width: 608px;
}
#gx_fieldmap {
    margin-top: 40px;
}

ul.gx_fieldmap_list{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    margin: -32px -16px 0;
}
ul.gx_fieldmap_list > li{
    width: 50%;
    box-sizing: border-box;
    padding: 32px 16px 0;
}
.gx_fieldmap_card{
    border: 1px solid #000;
    border-radius: 16px;
    padding: 16px 20px 20px;
}
.gx_fieldmap_list_head{
    text-align: center;
    margin-bottom: 8px;
}
.gx_fieldmap_list_body{
    text-align: center;
}
.gx_fieldmap_list_title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
}
.gx_fieldmap_list_title:before{
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 4px;
    margin-right: 12px;
}
.gx_fieldmap_list_copy{
    display: inline-block;
    line-height: 1.5;
    font-size: 16px;
    background: #000;
    color: #fff;
    font-weight: 500;
    padding: 4px 12px 5px;
    border-radius: 4px;
    margin-top: 12px;
}
.gx_fieldmap_list_description {
    line-height: 1.75;
    font-weight: 500;
    margin-top: 8px;
}

.gx_fieldmap_list_img{

}
.gx_fieldmap_list_img img {
    width: 75%;
}

li.gx_fieldmap01 .gx_fieldmap_list_title:before{
    content: "1";
    background: #197d09;
}
li.gx_fieldmap02 .gx_fieldmap_list_title:before{
    content: "2";
    background: #0164c2;
}
li.gx_fieldmap03 .gx_fieldmap_list_title:before{
    content: "3";
    background: #fd6703;
}
li.gx_fieldmap04 .gx_fieldmap_list_title:before{
    content: "4";
    background: #57258e;
}
li.gx_fieldmap05 .gx_fieldmap_list_title:before{
    content: "5";
    background: #019ea3;
}

li.gx_fieldmap01 .gx_fieldmap_card{
    border: 1px solid #197d09;
}
li.gx_fieldmap02 .gx_fieldmap_card{
    border: 1px solid #0164c2;
}
li.gx_fieldmap03 .gx_fieldmap_card{
    border: 1px solid #fd6703;
}
li.gx_fieldmap04 .gx_fieldmap_card{
    border: 1px solid #57258e;
}
li.gx_fieldmap05 .gx_fieldmap_card{
    border: 1px solid #019ea3;
}

li.gx_fieldmap01 .gx_fieldmap_list_copy{
    background: #197d09;
}
li.gx_fieldmap02 .gx_fieldmap_list_copy{
    background: #0164c2;
}
li.gx_fieldmap03 .gx_fieldmap_list_copy{
    background: #fd6703;
}
li.gx_fieldmap04 .gx_fieldmap_list_copy{
    background: #57258e;
}
li.gx_fieldmap05 .gx_fieldmap_list_copy{
    background: #019ea3;
}

li.gx_fieldmap01 .gx_fieldmap_list_title{
    color: #197d09;
}
li.gx_fieldmap02 .gx_fieldmap_list_title{
    color: #0164c2;
}
li.gx_fieldmap03 .gx_fieldmap_list_title{
    color: #fd6703;
}
li.gx_fieldmap04 .gx_fieldmap_list_title{
    color: #57258e;
}
li.gx_fieldmap05 .gx_fieldmap_list_title{
    color: #019ea3;
}


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

ul.gx_fieldmap_list{
    margin: -24px 0 0;
}
ul.gx_fieldmap_list > li{
    width: 100%;
    padding: 24px 0 0;
}
.gx_fieldmap_list_title{
    font-size: 22px;
}
.gx_fieldmap_list_title:before{
    width: 36px;
    height: 36px;
    font-size: 24px;
    padding-bottom: 2px;
}
.gx_fieldmap_list_copy{
    font-size: 16px;
}


}



/* 防災インフラ記事 */

#disaster-prevention #feature_column_contents_head_whitebox{
    max-width: 590px;
}

.gx_fieldmap_list_bgcolor li.gx_fieldmap01 .gx_fieldmap_card{
    background: #f6fbf4;
}
.gx_fieldmap_list_bgcolor li.gx_fieldmap02 .gx_fieldmap_card{
    background: #f5f8fd;
}
.gx_fieldmap_list_bgcolor li.gx_fieldmap03 .gx_fieldmap_card{
    background: #fdf6ec;
}
.gx_fieldmap_list_bgcolor li.gx_fieldmap04 .gx_fieldmap_card{
    background: #f6f3fc;
}
.gx_fieldmap_list_bgcolor li.gx_fieldmap05 .gx_fieldmap_card{
    background: #f4f9fc;
}


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





}





/* 製薬記事 */
#pharmaceutical #feature_column_contents_head_whitebox{
    max-width: 558px;
}
.gx_fieldmap_list_nonumber .gx_fieldmap_list_title:before{
    content: none !important;
}
#pharmaceutical .gx_fieldmap_list_img img{
    width: 154px;
}

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





}





/* 健康インフラ記事 */
#health-infrastructure #feature_column_contents_head_whitebox{
    max-width: 545px;
}
#health-infrastructure .gx_fieldmap_list_img img{
    width: 154px;
}

#health-infrastructure li.gx_fieldmap01 .gx_fieldmap_list_title:before{
    background: #E76987;
}
#health-infrastructure li.gx_fieldmap02 .gx_fieldmap_list_title:before{
    background: #019ea3;
}
#health-infrastructure li.gx_fieldmap03 .gx_fieldmap_list_title:before{
    background: #57258e;
}
#health-infrastructure li.gx_fieldmap04 .gx_fieldmap_list_title:before{
    background: #016ABE;
}
#health-infrastructure li.gx_fieldmap05 .gx_fieldmap_list_title:before{
    background: #519035;
}

#health-infrastructure li.gx_fieldmap01 .gx_fieldmap_card{
    border: 1px solid #E76987;
}
#health-infrastructure li.gx_fieldmap02 .gx_fieldmap_card{
    border: 1px solid #019ea3;
}
#health-infrastructure li.gx_fieldmap03 .gx_fieldmap_card{
    border: 1px solid #57258e;
}
#health-infrastructure li.gx_fieldmap04 .gx_fieldmap_card{
    border: 1px solid #016ABE;
}
#health-infrastructure li.gx_fieldmap05 .gx_fieldmap_card{
    border: 1px solid #519035;
}

#health-infrastructure li.gx_fieldmap01 .gx_fieldmap_list_copy{
    background: #E76987;
}
#health-infrastructure li.gx_fieldmap02 .gx_fieldmap_list_copy{
    background: #019ea3;
}
#health-infrastructure li.gx_fieldmap03 .gx_fieldmap_list_copy{
    background: #57258e;
}
#health-infrastructure li.gx_fieldmap04 .gx_fieldmap_list_copy{
    background: #016ABE;
}
#health-infrastructure li.gx_fieldmap05 .gx_fieldmap_list_copy{
    background: #519035;
}

#health-infrastructure li.gx_fieldmap01 .gx_fieldmap_list_title{
    color: #E76987;
}
#health-infrastructure li.gx_fieldmap02 .gx_fieldmap_list_title{
    color: #019ea3;
}
#health-infrastructure li.gx_fieldmap03 .gx_fieldmap_list_title{
    color: #57258e;
}
#health-infrastructure li.gx_fieldmap04 .gx_fieldmap_list_title{
    color: #016ABE;
}
#health-infrastructure li.gx_fieldmap05 .gx_fieldmap_list_title{
    color: #519035;
}

#health-infrastructure .gx_fieldmap_list_bgcolor li.gx_fieldmap01 .gx_fieldmap_card{
    background: #FDF3F4;
}
#health-infrastructure .gx_fieldmap_list_bgcolor li.gx_fieldmap02 .gx_fieldmap_card{
    background: #F1FAF9;
}
#health-infrastructure .gx_fieldmap_list_bgcolor li.gx_fieldmap03 .gx_fieldmap_card{
    background: #F4F3FB;
}
#health-infrastructure .gx_fieldmap_list_bgcolor li.gx_fieldmap04 .gx_fieldmap_card{
    background: #EFF6FE;
}
#health-infrastructure .gx_fieldmap_list_bgcolor li.gx_fieldmap05 .gx_fieldmap_card{
    background: #F5F8EF;
}

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





}




/* 四国エリア記事 */

#shikoku-area #feature_column_contents_head_whitebox{
    max-width: 540px;
}
#shikoku_area_fieldmap_img {
    text-align: center;
    margin-bottom: -140px;
}
#shikoku_area_fieldmap_img > img{
    width: 720px;
    margin: 0 auto;
}
.shikoku_area_fieldmap_block {
    padding: 20px 24px 24px;
    background: #fff;
    border-radius: 16px;
    margin-top: 16px;
    position: relative;
}
.shikoku_area_fieldmap_block_head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.shikoku_area_fieldmap_block_icon{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #999;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.shikoku_area_fieldmap_block_icon img{
    width: 100%;
    height: auto;
}
.shikoku_area_fieldmap_block_text{
    width: calc(100% - 80px);
    box-sizing: border-box;
    padding-left: 20px;
}
.shikoku_area_fieldmap_block_title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 4px;
}
.shikoku_area_fieldmap_block_description{
    font-weight: 500;
}

#paper-pulp.shikoku_area_fieldmap_block {
    border: 2px solid #47AF11;
}
#chemicals-materials.shikoku_area_fieldmap_block {
    border: 2px solid #FF5402;
}
#agricultural-machinery.shikoku_area_fieldmap_block {
    border: 2px solid #FE9E02;
}
#shipbuilding-marine-equipment.shikoku_area_fieldmap_block {
    border: 2px solid #0056CC;
}
#construction-industrial-machinery.shikoku_area_fieldmap_block {
    border: 2px solid #6523A0;
}
#energy-infrastructure.shikoku_area_fieldmap_block {
    border: 2px solid #019C9F;
}


#shikoku-area .gx_fieldmap_list_img img {
    width: 154px;
}
.gx_fieldmap_list_description_disc{
    text-align: left;
    margin-top: 16px;
}
.gx_fieldmap_list_description_disc > p{
    margin-top: 8px;
    position: relative;
    padding-left: 20px;
    font-weight: 500;
}
.gx_fieldmap_list_description_disc > p:before{
    content: "・";
    position: absolute;
    left: 0;
    top: 0;
}

#shikoku-area li.gx_fieldmap01 .gx_fieldmap_card{
    border: 1px solid #22952D;
}
#shikoku-area li.gx_fieldmap02 .gx_fieldmap_card{
    border: 1px solid #FD8706;
}
#shikoku-area li.gx_fieldmap03 .gx_fieldmap_card{
    border: 1px solid #1B74C8;
}
#shikoku-area li.gx_fieldmap04 .gx_fieldmap_card{
    border: 1px solid #F54E77;
}

#shikoku-area li.gx_fieldmap01 .gx_fieldmap_list_title{
    color: #22952D;
}
#shikoku-area li.gx_fieldmap02 .gx_fieldmap_list_title{
    color: #FD8706;
}
#shikoku-area li.gx_fieldmap03 .gx_fieldmap_list_title{
    color: #1B74C8;
}
#shikoku-area li.gx_fieldmap04 .gx_fieldmap_list_title{
    color: #F54E77;
}

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

    .shikoku_area_fieldmap_block_icon {
        width: 64px;
        height: 64px;
    }
    .shikoku_area_fieldmap_block_text {
        width: calc(100% - 64px);
        padding-left: 16px;
    }
    .shikoku_area_fieldmap_block_title{
        font-size: 20px;
    }
    .shikoku_area_fieldmap_block_description{
        margin-top: 16px;
    }

    #shikoku_area_fieldmap_img{
        margin-bottom: -24px;
    }



}




/* 化学業界記事 */

#chemical-industry #feature_column_contents_head_whitebox{
    max-width: 556px;
}
#chemical_industry_fieldmap_img {
    text-align: center;
    margin-bottom: -140px;
}
#chemical_industry_fieldmap_img > img{
    width: 720px;
    margin: 0 auto;
}
.chemical_industry_fieldmap_block {
    padding: 20px 24px 24px;
    background: #fff;
    border-radius: 16px;
    margin-top: 16px;
    position: relative;
}
.chemical_industry_fieldmap_block_head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.chemical_industry_fieldmap_block_icon{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #999;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.chemical_industry_fieldmap_block_icon img{
    width: 100%;
    height: auto;
}
.chemical_industry_fieldmap_block_text{
    width: calc(100% - 80px);
    box-sizing: border-box;
    padding-left: 20px;
}
.chemical_industry_fieldmap_block_title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 4px;
}
.chemical_industry_fieldmap_block_description{
    font-weight: 500;
}

#advanced-materials.chemical_industry_fieldmap_block {
    border: 2px solid #4e9640;
}
#electronic-materials.chemical_industry_fieldmap_block {
    border: 2px solid #126eb5;
}
#basic-chemicals.chemical_industry_fieldmap_block {
    border: 2px solid #f1b921;
}
#life-sciences.chemical_industry_fieldmap_block {
    border: 2px solid #229f9b;
}
#resins-rubber-fibers.chemical_industry_fieldmap_block {
    border: 2px solid #f19027;
}
#agrochemicals-specialty-chemicals.chemical_industry_fieldmap_block {
    border: 2px solid #8f70b8;
}
#coatings-inks.chemical_industry_fieldmap_block {
    border: 2px solid #e75256;
}

#chemical-industry #shikoku_area_fieldmap_img{
    margin-bottom: 0;
    margin-top: -48px;
    margin-bottom: -16px;
}
#chemical-industry #shikoku_area_fieldmap_img > img{
    width: 560px;
}



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

    .chemical_industry_fieldmap_block_icon {
        width: 64px;
        height: 64px;
    }
    .chemical_industry_fieldmap_block_text {
        width: calc(100% - 64px);
        padding-left: 16px;
    }
    .chemical_industry_fieldmap_block_title{
        font-size: 20px;
    }
    .chemical_industry_fieldmap_block_description{
        margin-top: 16px;
    }

    #chemical_industry_fieldmap_img{
        margin-bottom: -24px;
    }

    #chemical-industry #shikoku_area_fieldmap_img{
        margin-top: -24px;
    }



}


.industry-map {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.job-card {
  --accent: #1688cb;
  --accent-dark: #092f69;
  --tint: #f2f7fd;
  display: grid;
  grid-template-columns: 25% 26% 7% 42%;
  align-items: center;
  min-height: 205px;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 15px;
  background-color: var(--tint);
}

.job-card--green {
  --accent: #47aa1d;
  --accent-dark: #27901e;
  --tint: #f4f9f2;
}

.job-card--yellow {
  --accent: #f1c400;
  --accent-dark: #b78b00;
  --tint: #fefbec;
}

.job-card--purple {
  --accent: #7769be;
  --accent-dark: #6556aa;
  --tint: #f6f5fb;
}

.job-card--cyan {
  --accent: #25b6b8;
  --accent-dark: #159b9d;
  --tint: #f3fafa;
}

.job-card--pink {
  --accent: #e45b88;
  --accent-dark: #cf4778;
  --tint: #fef5f6;
}

.job-card__visual {
  align-self: stretch;
  min-width: 0;
  overflow: hidden;
}

.job-card__visual img {
  width: calc(100% - 22px);
  height: calc(100% - 16px);
  margin: 8px 22px 8px 0;
  display: block;
  object-fit: contain;
  object-position: center;
}

.job-card__content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 14px;
}

.job-card__content--mission {
  padding-left: 12px;
  padding-right: 20px;
}

.job-card__label {
  align-self: flex-start;
  min-width: 56px;
  margin: 0 0 9px;
  padding: 5px 9px 6px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  letter-spacing: .04em;
}

.job-card h2,
.job-card h3 {
  margin: 0;
  color: var(--accent-dark);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .04em;
}

.job-card h2 {
  font-size: 27px;
}

.job-card--cyan h2,
.job-card--pink h2 {
  font-size: 22px;
  white-space: nowrap;
}

.job-card h3 {
  font-size: 21px;
  white-space: nowrap;
}

.job-card__description {
  margin: 9px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .025em;
}

.job-card__arrow {
  display: grid;
  place-items: center;
}

.job-card__arrow::before {
  content: "";
  width: 32px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

.job-card__arrow span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateX(-2px) rotate(45deg);
}

@media (max-width: 700px) {
  .industry-map {
    width: 100%;
  }

  .job-card {
    grid-template-columns: 34% 1fr 58px;
    min-height: 300px;
  }

  .job-card__visual {
    grid-row: 1 / 3;
  }

  .job-card__content {
    padding: 22px 18px;
  }

  .job-card__content--mission {
    grid-column: 2 / 4;
    padding-top: 0;
  }

  .job-card__arrow {
    grid-column: 3;
    grid-row: 1;
  }

  .job-card__label {
    margin-bottom: 10px;
  }

  .job-card h3 {
    white-space: normal;
  }

  .job-card__description {
    margin-top: 12px;
  }
}

@media (max-width: 520px) {
  .industry-map {
    width: 100%;
  }

  .job-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 14px;
    border-radius: 15px;
  }

  .job-card__visual {
    width: 100%;
    height: 210px;
  }

  .job-card__visual img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
  }

  .job-card__content {
    width: 100%;
    padding: 24px 22px;
  }

  .job-card__content--mission {
    padding-top: 8px;
    padding-bottom: 28px;
  }

  .job-card__label {
    min-width: 72px;
    margin-bottom: 14px;
    padding: 7px 12px;
    border-radius: 7px;
    font-size: 15px;
  }

  .job-card h2 {
    font-size: 24px;
  }

  .job-card h3 {
    font-size: 20px;
  }

  .job-card__description {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.75;
  }

  .job-card__arrow {
    width: 48px;
    height: 48px;
    margin: -4px 0 8px;
    transform: rotate(90deg);
  }

  .job-card__arrow::before {
    width: 32px;
  }

  .job-card__arrow span {
    width: 12px;
    height: 12px;
    border-width: 3px;
  }
}




/* 水インフラ記事 */
#water-infrastructure #feature_column_contents_head_whitebox{
    max-width: 540px;
}

:root {
  --blue: #07529e;
  --blue-dark: #003f86;
  --green: #25842e;
  --green-dark: #176f27;
  --ink: #101820;
}
.roles {
  width: min(100%, 820px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.role-card {
  --accent: var(--blue);
  --accent-dark: var(--blue-dark);
  --pale: #eaf4fc;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent), white 45%);
  border-radius: 16px;
  background: #fff;
}

.role-card--green {
  --accent: var(--green);
  --accent-dark: var(--green-dark);
  --pale: #edf8ee;
}

.role-card__title {
    min-height: 50px;
    margin: 0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent), white 10%), var(--accent-dark));
    font-size: 24px;
    font-weight: 600;
    /* letter-spacing: .04em; */
    line-height: 1.3;
}

.role-card__lead {
  min-height: 74px;
  margin: 0 24px;
  padding: 16px 8px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent), white 48%);
  text-align: center;
  font-weight: 600;
  line-height: 1.8;
}

.jobs { padding: 0 24px; }

.job {
  min-height: 124px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 260px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px dotted #b9c5ce;
}

.job:last-child { border-bottom: 0; }

.job__icon {
  width: 58px;
  height: 58px;
  border-radius: 6px;
  object-fit: contain;
}

.job__copy h3 {
  margin: 0 0 8px;
    color: var(--accent-dark);
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
}

.job__copy p { 
        margin: 0;
    font-weight: 500;
    line-height: 1.6;
    font-size: 15px;
}

.job__art {
  width: 100%;
  height: 108px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.fields {
    margin: 0 24px 24px;
    padding: 12px 8px 16px;
    border-radius: 11px;
    background: var(--pale);
}

.fields h3 {
  margin: 0;
  color: var(--accent-dark);
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 600;
  margin-bottom: 8px;
}

.fields ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  list-style: none;
}

.fields li {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.fields li img {
  width: 76px;
  height: 62px;
  margin: 0 auto 3px;
  display: block;
  object-fit: cover;
}

#water_infrastructure_work {
    margin-top: 40px;
}
#water_infrastructure_fieldmap {
    margin-top: 32px;
}
ul.w3_fieldmap_list{
    display: flex;
    flex-wrap: wrap;
    margin: -24px -12px 0;
}
ul.w3_fieldmap_list > li{
    width: calc(100% / 3);
    box-sizing: border-box;
    padding: 24px 12px 0;
}
.w3_fieldmap_list_card{
    border: 2px solid #D8DFE7;
    border-radius: 16px;
}
.w3_fieldmap_list_card_body{

}
.w3_fieldmap_list_card_body > img{
    width: 100%;
}
.w3_fieldmap_list_card_head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}
.w3_fieldmap_list_card_number{
    width: 32px;
    height: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #003D8D;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    border-radius: 50%;
    padding-bottom: 2px;
    margin-right: 12px;
}
.w3_fieldmap_list_card_title {
    color: #003D8D;
    font-weight: 600;
}
.w3_fieldmap_list_card_footer {
    padding: 12px 16px;
}
.w3_fieldmap_list_card_footer p {
    font-size: 15px;
    line-height: 1.75;
    font-weight: 500;
}
#water_infrastructure_fieldmap02 {
    margin-top: 48px;
    padding: 24px 32px 32px;
    background: #ecf3fd;
    border-radius: 16px;
}
.feature_column_main_body_article_parts_h4 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 24px;
    font-weight: 600;
    line-height: 1.5;
}
#water_infrastructure_fieldmap02 .gx_fieldmap_card{
    background: #fff;
}
#water_infrastructure_fieldmap02 .gx_fieldmap_list_img img{
    width: 120px;
}
#water_infrastructure_fieldmap02 .gx_fieldmap_list_title{
    font-size: 20px;
}

#water_infrastructure_fieldmap02 .gx_fieldmap_list_description{
    text-align: left;
    padding: 0 4px;
}

#water_infrastructure_fieldmap02 li.gx_fieldmap01 .gx_fieldmap_card {
    border: 1px solid #2c9487;
}
#water_infrastructure_fieldmap02 li.gx_fieldmap01 .gx_fieldmap_list_title {
    color: #2c9487;
}

#water_infrastructure_fieldmap02 li.gx_fieldmap02 .gx_fieldmap_card {
    border: 1px solid #684892;
}
#water_infrastructure_fieldmap02 li.gx_fieldmap02 .gx_fieldmap_list_title {
    color: #684892;
}

#water_infrastructure_fieldmap02 li.gx_fieldmap03 .gx_fieldmap_card {
    border: 1px solid #225fb0;
}
#water_infrastructure_fieldmap02 li.gx_fieldmap03 .gx_fieldmap_list_title {
    color: #225fb0;
}

#water_infrastructure_fieldmap02 li.gx_fieldmap04 .gx_fieldmap_card {
    border: 1px solid #ec951b;
}
#water_infrastructure_fieldmap02 li.gx_fieldmap04 .gx_fieldmap_list_title {
    color: #ec951b;
}

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

    .feature_column_main_body_article_parts_h4{
        font-size: 20px;
    }
    #water_infrastructure_fieldmap02{
        padding: 24px 20px 24px;
    }

    ul.w3_fieldmap_list{
        margin: -16px 0 0;
    }
    ul.w3_fieldmap_list > li{
        width: 100%;
        padding: 16px 0 0;
    }


}

@media (max-width: 720px) {
  .roles { grid-template-columns: 1fr; gap: 16px; }
  .role-card__title { font-size: 19px; }
  .role-card__lead { min-height: 0; font-size: 15px; }
  .role-card__lead br { display: none; }
  .job { grid-template-columns: 52px minmax(0, 1fr) 112px; }
  .fields li { font-size: 14px; }
}

@media (max-width: 520px) {
  .role-card__title { font-size: 18px; }
  .job {
    min-height: 0;
    padding: 16px 0;
    grid-template-columns: 48px 1fr;
    gap: 8px 10px;
  }
  .job__icon { width: 44px; height: 44px; font-size: 25px; }
  .job__copy h3 { font-size: 18px; }
  .job__art {
    grid-column: 1 / -1;
    width: min(100%, 230px);
    height: 88px;
    justify-self: center;
  }
  .fields { padding: 5px 9px 10px; }
  .fields ul { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; }
  .fields li:last-child { grid-column: 1 / -1; }
  .fields li img { width: 78px; height: 64px; }
}