/* recruit-jobページのスタイル */

body.page-recruit-job,
body.recruit-job,
body:has(main.recruit-job) {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* ヘッダーの「お問い合わせ」と「EN」を非表示 */
body.page-recruit-job .header_info .web_info,
body.recruit-job .header_info .web_info,
body:has(main.recruit-job) .header_info .web_info {
  display: none !important;
}

body.page-recruit-job #global_nav ul li:has(a[href*="/contact"]),
body.recruit-job #global_nav ul li:has(a[href*="/contact"]),
body:has(main.recruit-job) #global_nav ul li:has(a[href*="/contact"]) {
  display: none !important;
}

body.page-recruit-job #global_nav ul li:has(a[href*="/en"]):not(:has(ul)),
body.recruit-job #global_nav ul li:has(a[href*="/en"]):not(:has(ul)),
body:has(main.recruit-job) #global_nav ul li:has(a[href*="/en"]):not(:has(ul)) {
  display: none !important;
}

/* ヒーローセクション */
.recruit-job-hero {
  width: 100%;
  height: calc(100vh - 100px);
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  padding: 0 40px;
  box-sizing: border-box;
  background-color: #ffffff;
}

.recruit-job-hero img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* グリッド配置用のクラス */
.recruit-job-hero .job-top-main {
  grid-column: 6 / 12;
  grid-row: 2 / 8;
}

.recruit-job-hero .job-top-sub {
  grid-column: 3 / 5;
  grid-row: 3 / 4;
}

.recruit-job-hero .mark1 {
  grid-column: 10 / 12;
  grid-row: 2 / 4;
}

.recruit-job-hero .mark2 {
  grid-column: 2 / 4;
  grid-row: 5 / 7;
  transform: scale(1.5);
  transform-origin: center;
}

.recruit-job-hero .mark3 {
  grid-column: 10 / 12;
  grid-row: 5 / 7;
  transform: scale(1.5);
  transform-origin: center;
}

.recruit-job-hero .recruit-job-hero-title-wrapper {
  grid-column: 3 / 7;
  grid-row: 5 / 7;
  display: flex;
  flex-direction: column;
  padding-left: 32px;
}

.recruit-job-hero .recruit-job-hero-title-wrapper p {
  color: #005AB7;
  margin: 0;
  padding: 0;
  font-size: 28px;
}

.recruit-job-hero .recruit-job-hero-title {
  margin-top: 0 !important;
  font-size: 62px;
  font-weight: normal;
  line-height: 1;
  padding: 0 !important;
  text-align: left;
  color: #191e2e;
  background: none !important;
}

@media screen and (min-width: 1001px) {
  .recruit-job-hero .recruit-job-hero-title {
    margin-top: 0 !important;
  }
}

/* 1200px以下 */
@media screen and (max-width: 1200px) {
  .recruit-job-hero .job-top-main {
    grid-column: 7 / 12;
  }

  .recruit-job-hero .mark1 {
    grid-column: 11 / 13;
  }

  .recruit-job-hero .mark2 {
    grid-column: 1 / 3;
  }

  .recruit-job-hero .mark3 {
    grid-column: 11 / 13;
  }
}

/* 1024px以下 */
@media screen and (max-width: 1024px) {
  .recruit-job-hero .job-top-main {
    grid-column: 5 / 10;
  }

  .recruit-job-hero .job-top-sub {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
  }

  .recruit-job-hero .recruit-job-hero-title-wrapper {
    grid-row: 7 / 8;
    padding-left: 0;
  }

  .recruit-job-hero .recruit-job-hero-title-wrapper p {
    font-size: 22px;
  }

  .recruit-job-hero .recruit-job-hero-title {
    font-size: 48px;
  }
}

/* タブレットサイズ（768px〜1024px） */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .recruit-job-hero {
    height: 55vh;
    grid-template-rows: repeat(8, auto);
  }
}

/* タブレットサイズ（768px〜1024px）かつ横長 */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .recruit-job-hero {
    height: 90vh;
  }
}

/* レスポンシブ */
@media screen and (max-width: 767px) {
  .recruit-job-hero {
    height: auto;
    margin-top: 64px;
    grid-template-rows: repeat(8, auto);
  }

  .recruit-job-hero .recruit-job-hero-title-wrapper {
    grid-column: 3 / 8;
  }

  .recruit-job-hero .recruit-job-hero-title-wrapper p {
    font-size: 18px;
  }

  .recruit-job-hero .recruit-job-hero-title {
    font-size: 36px;
  }
}

/* 480px以下 */
@media screen and (max-width: 480px) {
  .recruit-job-hero {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, auto);
  }

  .recruit-job-hero .job-top-main {
    grid-column: 1 / 5;
    grid-row: 2 / 8;
  }

  .recruit-job-hero .job-top-sub {
    display: none;
  }

  .recruit-job-hero .mark1 {
    display: none;
  }

  .recruit-job-hero .mark2 {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
  }

  .recruit-job-hero .mark3 {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
  }

  .recruit-job-hero .recruit-job-hero-title-wrapper {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    padding-top: 1.5em;
  }
}

/* トップ画像セクション */
.recruit-top-hero {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: visible;
  padding-inline: 40px;
  background-color: #ffffff;
}

.recruit-top-hero-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  column-gap: 20px;
  position: relative;
  overflow: visible;
}

/* メイン画像（画面の中心に配置） */
.recruit-top-hero-main {
  position: absolute;
  left: 50%;
  top: calc(50vh + 50px);
  transform: translate(-50%, -50%);
  isolation: isolate;
  overflow: visible;
}

.recruit-top-hero-main-container {
  position: relative;
  mask-image: var(--mask-pc);
  -webkit-mask-image: var(--mask-pc);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.recruit-top-hero-main-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* タブレットサイズ（768px〜1023px） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .recruit-top-hero {
    height: auto;
    padding-inline: 30px;
  }

  .recruit-top-hero-main {
    position: absolute;
    left: 50%;
    top: calc(50vh + 50px);
    transform: translate(-50%, -50%);
  }

}

/* レスポンシブ */
@media screen and (max-width: 767px) {
  .recruit-top-hero {
    height: 80vh;
    padding-inline: 20px;
  }

  .recruit-top-hero-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .recruit-top-hero-main {
    position: absolute;
    left: 50%;
    top: calc(50vh + 32px);
    transform: translate(-50%, -50%);
    grid-row: 4 / 5;
  }

  .recruit-top-hero-main-container {
    mask-image: var(--mask-mobile);
    -webkit-mask-image: var(--mask-mobile);
  }
}