@charset "utf-8";
/* ************************************************** 
Name: add_career_top.css
Description: Top page CSS
Create: 2025.7.31
Copyright 2025 Hitachi, Ltd.
***************************************************** */ 

/* ================================================== 
BreakPoint
-1380
-1100
-769
-579
-399
===================================================== */


/*--------------------------------------------------------------------------------------- 
汎用
---------------------------------------------------------------------------------------*/
#Contents h3 {
  font-size: 1.5rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #Contents h3 {
    font-size: 1.5rem;
  }
}
.flexblock {
  margin-top: 40px;
}
.ico_link::after {
  background: #ffffff9e;
  content: '';
  display: block;
  width: 166px;
  height: 37px;
  position: absolute;
  z-index: -1;
  top: -5px;
  left: 0;
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 15% 100%);
}
/*--------------------------------------------------------------------------------汎用*/


/*--------------------------------------------------------------------------------------- 
構造
---------------------------------------------------------------------------------------*/
article {
  position: relative;
  z-index: 1;
}
/*--------------------------------------------------------------------------------構造*/


/*--------------------------------------------------------------------------------------- 
背景
---------------------------------------------------------------------------------------*/
section:nth-child(odd):not(.Contact) {
  background: var(--back)
}
/*--------------------------------------------------------------------------------背景*/


/*--------------------------------------------------------------------------------------- 
メインビジュアルコーナー #main-visual
---------------------------------------------------------------------------------------*/
#main-visual {
  background: url(/products/it/society/career/image/top/MV.jpg) no-repeat center;
  background-size: cover;
  height: 548px;
  position: relative;
}
@media screen and (max-width: 1024px) {
  #main-visual {
    background: url(/products/it/society/career/image/top/MV_sp.jpg) no-repeat center;
    background-size: cover;
  }
}
#main-visual h1 {
  font-size: 2.75rem;/*44px*/
  position: absolute;
  font-family:  "verdana", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-100px);
  text-shadow: 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1), 0px 0px 20px rgba(255, 255, 255, 1);
  width: 90%;
  font-weight: 500;
  color: #000;
}
@media screen and (max-width: 768px) {
  #main-visual h1 {
    font-size: 1.5rem;
    line-height: 1.4;
    transform: translate(-50%, -50%) translateY(-47px);
  }
}
/*---------------------------------------------------------------メインビジュアルコーナー*/


/*--------------------------------------------------------------------------------------- 
トップメッセージ .TopMessage
---------------------------------------------------------------------------------------*/
.TopMessage {
  overflow: hidden;
}
.TopMessage::after {
  content: '';
  display: block;
  width: 498px;
  height: 650px;
  background: url(/products/it/society/career/image/top/msg_01.png) no-repeat;
  background-size: contain;
  position:absolute;
  left: 50%;
  top: 24px;
  transform: translateX(calc(-50% + 280px));
}
@media screen and (max-width: 768px) {
  .TopMessage::after {
    width: 330px;
    height: 431px;
    top: unset;
    left: unset;
    bottom: 0;
    right: -52px;
    transform: unset;
  }
}
@media screen and (max-width: 579px) {
  .TopMessage::after {
    width: 274px;
    height: 358px;
    bottom: -62px;
    right: 4%;
  }
}
.body-copy dt {
  width: 73%;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .body-copy dt {
    margin-bottom: 160px;
  }
}
@media screen and (max-width: 579px) {
  .body-copy dt {
    width: 100%;
  }
}
.TopMessage .body-copy {
  padding-left: 56px;
  margin: 24px 0 48px;
}
@media screen and (max-width: 768px) {
  .TopMessage .body-copy {
    padding-left: 0;
    margin: 24px 0 0;
  }
}
@media screen and (max-width: 768px) {
  .TopMessage a {
  text-shadow: 0 0 18px #0000005c;  
  }
}
.Grid4:not(.link_position_right) .ico_link::after {
  width: 249px;
  top: -7px;
  clip-path: polygon(15% 0%, 100% 0%, 90% 100%, 15% 100%);
  left: -23px;
}
.Grid4:not(.link_position_right) .ico_link::before {
  top: -8px;
}
/*-----------------------------------------------------------------------トップメッセージ*/


/*--------------------------------------------------------------------------------------- 
事業紹介 .Project
---------------------------------------------------------------------------------------*/
/*背景*/
.Project {
  background: url(/products/it/society/career/image/top/back_Project.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.Project::before,
.Project::after {
  content: '';
  display: block;
  position: absolute;
  width: 1672px;
  max-width: 100%;
  height: 700px;
  background: #ffffff7a;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.Project::before {
  clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
}
.Project::after {
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}
.Project .body-copy {
  text-align: center;
  line-height: 1.8;
  position: relative;
  z-index: 2;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .Project .body-copy {
    text-align: left;
    margin-bottom: 48px;
    padding: 0 24px;
  }
}
/*------------------------------------------------------------------------------事業紹介*/


/*--------------------------------------------------------------------------------------- 
社員インタビュー .Interview
---------------------------------------------------------------------------------------*/
section:nth-child(odd).Interview {
  overflow: hidden;
  background: #f2f2f2 url(/products/it/society/career/image/top/back_Interview.jpg) no-repeat;
}
@media screen and (max-width: 768px) {
  section:nth-child(odd).Interview {
    padding-bottom: 80px;
  }
}
.Interview .flexblock {
  flex-wrap: nowrap;
  gap: 36px;
  justify-content: center;
}
.Interview figure {
  max-width: 90%;
  width: 757px;
  min-width: 50%;
}
.Interview .flexblock .body-copy {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-weight: 500;
  line-height: 1.8;
}
@media screen and (min-width: 769px) {
  .Interview .flexblock .body-copy {
    margin-top: 56px;
  }
}
@media screen and (max-width: 768px) {
  .Interview .flexblock {
    flex-wrap: wrap;
  }
  .Interview .flexblock .body-copy {
    justify-content: center;
    position: relative;
    z-index: 2;
    gap: 24px;
  }
  .Interview .body-copy figure {
    margin-bottom: 40px;
  }
  .Interview::after {
    width: 105px;
    height: 311px;
    right: -20px;
    bottom: -127px;
    background-size: cover;
  }
  section:nth-child(odd).Interview {
    background-position: right 50px;
  }
}
.Interview .link_position_right .ico_link {
  margin-top: 56px;
}
@media screen and (max-width: 768px) {
  .Interview .link_position_right .ico_link {
    bottom: -40px;
  }
}
.Interview .link_position_right .ico_link::after {
  width: 227px;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 10% 100%);
}
.normal {
  margin-top: 112px;
}
.normal:last-child .ico_link {
  text-shadow: 0 0 18px #0000005c;
}
/*-----------------------------------------------------------------------社員インタビュー*/


/*--------------------------------------------------------------------------------------- 
数字で見る社会システム事業部 .Numbers
---------------------------------------------------------------------------------------*/
/*背景*/
.Numbers {
  background: url(/products/it/society/career/image/top/back_Numbers.png) no-repeat center;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .Numbers {
    padding-bottom: 80px;
  }
}
.Numbers .flexblock {
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .Numbers .flexblock {
    margin-top: 40px;
  }
}
.num_box {
  width: 346px;
  height: 248px;
  position: relative;
  font-weight: bold;
  font-size: 1.25rem;
}
@media screen and (max-width: 768px) {
  .num_box {
    margin-top: 16px;
  }
}
.num_box::after {
  content: '';
  display: block;
  position: absolute;
  width: 346px;
  max-width: 100%;
  height: 244px;
  background: #fff;
  border-radius: 50%;
}
.num_box::before {
  content: '';
  display: block;
  width: 175px;
  height: 167px;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  z-index: 2;
  top: -25px;
}
.div-count::before {
  background: url(/products/it/society/career/image/top/ico_div-count.png) no-repeat center;
  background-size: contain;
}
@media screen and (max-width: 768px) {
  .div-count::before {
    top: -29px;
  }
}
.career-ratio::before {
  width: 171px;
  height: 198px;
  background: url(/products/it/society/career/image/top/ico_career-ratio.png) no-repeat center;
  background-size: contain;
  top: -51px;
  left: calc(50% - 15px);
}
.wfh-ratio::before {
  width: 129px;
  height: 113px;
  background: url(/products/it/society/career/image/top/ico_wfh-ratio.png) no-repeat center;
  background-size: contain;
  top: -20px;
}
.num_box dd,
.num_box dt {
  position: absolute;
  z-index: 1;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
}
.num_box dt {
  transform: translate(-50%, -50%) translateY(-14px);
}
.num_box.career-ratio dt {
  transform: translate(-50%, -50%) translateY(44px);
}
.num_box dd {
  transform: translate(-50%, -50%) translateY(50px);
}
.num_box span {
  font-size: 5.3125rem;
  color: var(--red);
  font-weight: bold;
}
@media (min-width: 1100px) {
  .div-count {
    padding-top: 24px;
  }
}
@media (min-width: 1100px) {
  .career-ratio {
    margin-top: -48px;
  }
}
@media (min-width: 1100px) {
  .wfh-ratio {
    margin-top: -130px;
  }
}
.div-count dt {
  transform: translate(-50%, -50%) translateY(-5px);
  z-index: 5;
}
.div-count dd {
  transform: translate(-50%, -50%) translateY(61px);
}
.Numbers dd:has(small) {
  top: unset;
  bottom: 57px;
  left: 132px;
  transform: translateX(-50%);
}
.Numbers small {
  position: absolute;
  font-size: 14px;
  color: #999;
  font-weight: normal;
}
@media (min-width: 1100px) {
  .Numbers .ico_link {
    bottom: 48px;
  }
  .Numbers .link_position_right {
    padding-bottom: 0;
  }
}
/*-------------------------------------------------------------数字で見る社会システム事業部*/


/*--------------------------------------------------------------------------------------- 
採用情報・関連リンク .RecruitInfo
---------------------------------------------------------------------------------------*/
.RecruitInfo {
  padding-bottom: 184px;
}
.RecruitInfo .center {
  margin: 8px 0 40px 0;
}
.RecruitInfo figcaption {
  position: relative;
  margin-top: 16px;
  padding-left: 24px;
  text-align: left;
}
.RecruitInfo .line-double figcaption {
  margin-top: 10px;
}
.RecruitInfo figcaption::before {
  background: url(/products/it/society/career/image/ico_arrow01.svg);
  background: url(/products/it/society/career/image/ico_arrow02.svg) no-repeat center;
  left: -12px;
  top: -12px;
}
.RecruitInfo figure:hover figcaption::before {
  left: -8px;
}
.RecruitInfo .line-double figcaption::before {
  top: -5px;
}
/*-------------------------------------------------------------------採用情報・関連リンク*/


/*--------------------------------------------------------------------------------------- 
お問い合わせ .Contact
---------------------------------------------------------------------------------------*/
/*背景*/
.Contact {
  text-align: center;
  background: 
    url(/products/it/society/career/image/top/back_Contact.png) top / cover no-repeat,
    linear-gradient(to bottom, #fff 0%, #fff 35%, #D0DAE2 35%, #D0DAE2 100%);
  background-size: cover;
  margin-top:-80px;
}
@media screen and (max-width: 768px) {
.Contact {
  background:
    url(/products/it/society/career/image/top/back_Contact.png) top / cover no-repeat,
    linear-gradient(to bottom, #fff 0%, #fff 40%, #D0DAE2 40%, #D0DAE2 100%);
  background-position: right bottom;
  background-size: 238%;
}
}
#Contents .Contact .decotitle .main {
  color: #fff;
}
.Contact h2 {
  text-align: left;
}
.Contact .flexblock {
  margin-top: 100px;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .Contact .flexblock {
    margin-top: 180px;
  }
}
.Contact.dark a:link,
.Contact.dark a:visited,
.Contact p {
  color: #333;
  text-align: left;
  font-weight: bold;
}
.Contact .btn_rect-box {
  padding-top: 46px;
  display: flex;
  flex-wrap: wrap;
  width: 475px;
  max-width: 100%;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  .Contact .btn_rect-box {
    padding-top: 0;
  }
}
.Contact a.btn_rect {
  border-color: #fff;
  width: 357px;
  height: 64px;
  font-size: 1rem;
  margin-top: 8px;
}
.Contact [class^="btn_"] a::before {
  background: none;
}
/*--------------------------------------------------------------------------お問い合わせ*/