/* =========================================================
   Underline Title
========================================================= */
.section-title--underline{
  padding-bottom: 10px;
  border-bottom: 4px solid #0F294E;
  letter-spacing: 0.18em;
  color: #000;
}


/* =========================================================
   Subtitle（サブ見出し：左下）
========================================================= */
.section-subtitle{
  display: inline-block;
  width: 100%;
  text-align: left;
  margin: 10px 0 0;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.section-title--big{
  --bg-size: clamp(60px, 10vw, 140px);
  --bg-opacity: 0.06;
  --bg-shift-x: 20%;
  --bg-shift-y: -65%;
  color: #000;
}

.section-title--big::after{
  content: attr(data-bg);
  position: absolute;
  top: 50%;
  left: 0;

  transform: translate(var(--bg-shift-x), var(--bg-shift-y));

  font-size: var(--bg-size);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, var(--bg-opacity));
  white-space: nowrap;

  z-index: -1;
  pointer-events: none;
}

/* 長い場合（is-long）：開始位置を左へ寄せる */
.section-title--big.is-long{
  /* 開始位置を左へ */
  --bg-shift-x: -10%;
  --bg-size: clamp(68px, 9vw, 130px);
  letter-spacing: 0.06em;
}


/* =========================================================
   2行見出し（<br>）のときだけ背景文字を「もっと上」にする
========================================================= */

/* :has() が使えるブラウザなら自動判定 */
@supports selector(:has(*)){
  .section-title--big:has(br){
    --bg-shift-y: -95%;
  }
}

/* :has が効かない環境用フォールバック */
.section-title--big.is-two-line{
  --bg-shift-y: -95%;
}


/* =========================================================
   Dark Background Option（暗い背景のセクション用：透かし文字を白系に）
========================================================= */
.section-bg-dark .section-title--big{
  color: #fff; 
}

.section-bg-dark .section-title--big::after{
  color: rgba(255, 255, 255, 0.18);
}


/* =========================================================
   section-pop（見出しを上に飛び出させる共通）
========================================================= */
.section-pop{
  --title-pop: clamp(64px, 7vw, 96px);
  --title-space: clamp(96px, 10vw, 140px);

  position: relative;
  overflow: visible;
}

.section-pop,
.section-pop__body,
.section-pop__body > .row,
.section-pop__body > .row > [class*="col-"],
.section-pop__scope{
  overflow: visible;
}

/* 基準箱 */
.section-pop__scope{
  position: relative;
  padding-top: var(--title-space);
}

.section-pop__scope .title-block{
  position: absolute;
  top: calc(var(--title-pop) * -1);
  left: 0;
  z-index: 5;
  margin: 0;
}

/* 見出しブロック内の微調整 */
.section-pop__scope .title-block .section-title{
  margin: 0;
}

.section-pop__scope .title-block .section-subtitle{
  margin: 8px 0 0;
}



/* =========================================================
   Base：PC 1200px以上
========================================================= */
.section-pop{
  --title-pop: 120px;
  --title-space: 140px;

  position: relative;
  overflow: visible;
}


/* =========================================================
   Notebook：992px〜1199.98px
========================================================= */
@media (min-width: 992px) and (max-width: 1350px){
  .section-pop{
    --title-pop: 110px;
    --title-space: 135px;
  }

  @supports selector(:has(*)){
    .section-pop:has(.is-mechanical){
      --title-pop: 120px;
      --title-space: 140px;
    }

    .section-pop:has(.is-traffic){
      --title-pop: 120px;
      --title-space: 200px;
    }
  }
}


/* =========================================================
   Tablet：768px〜991.98px
========================================================= */
@media (min-width: 768px) and (max-width: 991.98px){
  .section-pop{
    --title-pop: 96px;
    --title-space: 115px;
  }

  @supports selector(:has(*)){
    .section-pop:has(.is-mechanical){
      --title-pop: 96px;
      --title-space: 115px;
    }

    .section-pop:has(.is-traffic){
      --title-pop: 120px;
      --title-space: 170px;
    }
  }
}


/* =========================================================
   SP：576px〜767.98px
========================================================= */
@media (min-width: 576px) and (max-width: 767.98px){
  .section-pop{
    --title-pop: 85px;
    --title-space: 80px;
  }

  @supports selector(:has(*)){
    .section-pop:has(.is-mechanical){
      --title-pop: 115px;
      --title-space: 90px;
    }

    .section-pop:has(.is-traffic){
      --title-pop: 125px;
      --title-space: 100px;
    }
  }
}


/* =========================================================
   Small SP：575.98px以下
========================================================= */
@media (max-width: 575.98px){
  .section-pop{
    --title-pop: 90px;
    --title-space: 65px;
  }

  @supports selector(:has(*)){
    .section-pop:has(.is-mechanical){
      --title-pop: 90px;
      --title-space: 72px;
    }

    .section-pop:has(.is-traffic){
      --title-pop: 100px;
      --title-space: 100px;
    }
  }
}




.training{
  /* 見出しをどれだけ上に出すか */
  --title-pop: clamp(16px, 10vw, 55px);

  /* 見出し分、上に受け皿を作る */
  padding-top: calc(var(--title-pop) + 24px);

  position: relative;
  overflow: visible;
}

/* 見出しをセクションからはみ出させる */
.training .section-title-training{
  position: absolute;
  top: calc(var(--title-pop) * -1);
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

.section-title-training{
  position: relative;
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  z-index: 1;
}

.main-title {
  display: inline-block;
  background: #0E294D;
  color: #FFF;
  font-weight: 700;
  line-height: 1.1;

  font-size: clamp(33px, 6vw, 96px);
  letter-spacing: clamp(0.02em, 0.18vw, 0.15em);

  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  margin: 0;
}

.page-hero-title{
  font-size: clamp(28px, 7.5vw, 150px);
}

.top-recruit__title{
  color: #FFF;
}

/* SERVICES用：透かし文字の位置・薄さ */
.top-recruit__title.section-title--big {
  --bg-opacity: 0.30;
  --bg-shift-x: -10%;
  --bg-shift-y: -75%;
}

/* 透かし文字（::after）を変数で移動させる */
.top-recruit__title.section-title--big::after {
  color: rgba(255, 255, 255, var(--bg-opacity));
  transform: translate(var(--bg-shift-x), var(--bg-shift-y));
}