/**
 * Hero Section Styles
 * 企業向けTOP メインビジュアル（タレント削除版）
 * 緑グラデ背景（CSS）＋ 人材カード画像（前景）＋ キャッチ／CTA／初期費用バッジ
 */

.HeroImage {
  background: linear-gradient(90deg, #037f0c 0%, #02bf10 100%);
  margin: 0 0 30px 0;
  overflow: hidden;
}

/* PC は「緑セクション幅（＝このラッパ幅）」を基準（cqw）に各サイズを決める。
   グラデ背景は .HeroImage 側で全幅のまま、スケールの基準だけをここで持つので、
   ラッパに max-width を掛けると配下の cqw 指定がまとめて頭打ちになる。 */
.HeroImage_Wrap {
  container-type: inline-size;
}

.HeroImage_Inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6vw 5vw 8vw;
  box-sizing: border-box;
}

.HeroImage_Inner > * {
  min-width: 0;
}

/* ===== キャッチコピー ===== */
.HeroImage_Catchphrase {
  order: 1;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 7.4vw;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 1px;
  margin: 0;
}

.HeroImage_Catchphrase strong {
  display: block;
  font-size: 15.5vw;
  font-weight: 900;
}

/* カンプの指定どおり。開始色は白ではなく淡い黄色 #fffb86、中間 stop は 31.25%。

   カンプではグラデが「時代」「即戦力」の文字レイヤー単位で掛かっており、行ボックス単位ではない。
   strong に掛けると「AI」の高さぶん行ボックスが伸び、31.25% の橙が来る位置が下へずれる。

   さらに、塗る対象に掛けただけでも既定の background-size は要素のボックス高になるため、
   inline（時代＝フォントの content area 1.45em）と block（即戦力＝line-height）で
   グラデの掛かる高さが変わってしまう。カンプから逆算した実効レンジは font-size の
   1.218 倍（78.841px に対して 96.0px）なので、em で固定して要素の種類に依存させない。
   算出はカンプの実測色から: 字面上端が 11.5%、下端が 87.5% の位置に来る → 73px / 0.76。 */
.HeroImage_Catchphrase .gradient {
  background: linear-gradient(180deg, #fffb86 0%, #ffbf7a 31.25%, #ff9ee2 100%);
  background-repeat: no-repeat;
  background-size: 100% 1.218em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* グラデ開始は「字面上端の 0.14em 上」。ボックス上端から字面上端までの距離が
   inline（時代）と block（即戦力）で違うので、その差だけ位置をずらす。 */
.HeroImage_Catchphrase .lead .gradient {
  background-position: 0 0.168em;
}

.HeroImage_Catchphrase strong.gradient {
  background-position: 0 0;
}

/* 「AI」はカンプでアウトライン化された Montserrat ExtraBold Italic のため、
   Noto Sans JP に合成オブリークを掛けても字形が合わない。カンプの SVG をそのまま置く。

   サイズは「時代」の font-size に対する比で持つ（カンプ実測 @セクション幅 1072px）:
     幅  103.353 / 78.841 = 1.3109em
     高さ  70.280 / 78.841 = 0.8914em
     右の空き 6.107 / 78.841 = 0.0775em
   SVG の下端はカンプ上「時代」のベースラインと一致するので、
   inline-block の既定（vertical-align: baseline）でそのまま揃う。 */
.HeroImage_Catchphrase_Ai {
  display: inline-block;
  width: 20.32vw;
  height: 13.82vw;
  margin-right: 1.2vw;
  vertical-align: baseline;
}

.HeroImage_Catchphrase strong .small {
  font-size: 11.3vw;
  font-weight: 600;
  color: #fff;
}

/* 「60」も欧文（数字）なのでベースライン揃えだと下端が「分で出会える」より高くなる。
   AI と同じ理屈で、和文との字面下端の差だけ下げる（0.113em(和文基準) / (9.5 / 7.4) ≒ 0.065em） */
.HeroImage_Catchphrase .big {
  position: relative;
  top: 0.065em;
  color: #fff;
  font-size: 9.5vw;
  font-weight: 800;
}

/* ===== 人材カード画像（前景ビジュアル）＋ 初期費用バッジ ===== */
.HeroImage_Visual {
  position: relative;
  order: 2;
  width: 100%;
  max-width: 100%;
  margin: 5vw auto 7vw;
}

.HeroImage_Visual picture {
  display: block;
}

.HeroImage_MainImg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.HeroImage_Badge {
  position: absolute;
  right: 2vw;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 22vw;
  height: 22vw;
  padding-top: 1vw;
  background: #fff;
  border: 0.6vw solid #f18500;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.HeroImage_Badge_Label {
  color: #151e4a;
  font-size: 2.6vw;
  font-weight: 700;
  line-height: 1.1;
}

.HeroImage_Badge_Price {
  color: #f18500;
  font-size: 5vw;
  font-weight: 700;
  line-height: 1;
}

.HeroImage_Badge_Price em {
  font-size: 10.5vw;
  font-style: normal;
  font-weight: 900;
}

/* ===== CTAボタン ===== */
.HeroImage .cta-buttons {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  gap: 2.5vw;
}

.HeroImage_Buttons {
  list-style: none;
  padding: 0;
  margin: 0;
}

.HeroImage_Buttons > li {
  flex: 1;
  width: 100%;
}

.HeroImage_Buttons a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
  padding: 2.5vw 4vw 2.5vw 7vw;
  font-size: 5vw;
  line-height: 1;
}

.HeroImage_Buttons a svg {
  width: 8vw;
  height: auto;
}

/* align-items: center で揃うのは「行ボックス」であって字面ではない。
   Noto Sans JP は ascent 26 / descent 6（em 22 換算）と非対称なので、
   line-height: 1 の行ボックス中央はベースラインの 10px 上、
   和文の字面（ideographic em box: ベースライン +0.12em 〜 −0.88em）の中央は
   8.36px 上に来る。差の 1.64px ≒ 0.075em ぶん持ち上げて字面をボタン中央に合わせる。
   px 固定だと SP（font-size 5vw）で効きすぎるので em で持つ。 */
.HeroImage_Buttons_Text {
  position: relative;
  top: -0.075em;
}

/* Green button: inverted color scheme within the hero background */
.HeroImage_Buttons a.btn-cta.btn-green {
  background-image: linear-gradient(135deg, #00b312 50%, transparent 50%) !important;
  background-position: 100% !important;
  background-size: 300% !important;
  background-color: #fff !important;
  border-color: #fff !important;
  color: #00b312 !important;
  transition: background 0s ease-in-out !important;
}

.HeroImage_Buttons a.btn-cta.btn-green svg path {
  fill: #00b312 !important;
  stroke: #00b312 !important;
}

.HeroImage_Buttons a.btn-cta.btn-green:hover {
  background-position: 0 !important;
  border-color: #fff !important;
  color: #fff !important;
  transition: all 0.7s ease-in-out !important;
}

.HeroImage_Buttons a.btn-cta.btn-green:hover svg path {
  fill: #fff !important;
  stroke: #fff !important;
  transition: all 0.7s ease-in-out !important;
}

/* ============================================================
   PC / タブレット（2カラム：左＝キャッチ＋CTA / 右＝人材カード画像）

   サイズは全て「スケール単位 --hero-u」の倍数で指定している。
   --hero-u の基準は 1cqw（.HeroImage_Wrap のインライン幅 ＝ 緑セクション幅 の 1%）で、
   係数はカンプ実測 px を 10.72（＝ビューポート 1440px 時のセクション幅 1072px の 1%）で
   割った値。例: キャッチ 35.405px → 35.405 / 10.72 = 3.30。

   1. なぜ vw ではなく cqw か
      1000px 以上でサイドバー（23rem）が入り「緑セクション幅 ≠ ビューポート幅」に
      なるため。vw だとカラム幅（セクションの％）と噛み合わず溢れて折り返す。

   2. なぜ下限 8px と上限 10.72px があるか
      サイドバーは 368px 固定なので、ビューポート 1000px の直後はセクション幅が
      632px まで落ちる。カンプ比のままだとボタンの文字が 12px 程度まで縮んで
      読めなくなるので、1cqw が 8px を下回る帯（セクション幅 800px 未満）では
      スケールを頭打ちにする。このとき左カラムはカンプの 36.72% では足りなくなるので、
      grid-template-columns の左に min を置いて内容ぶん押し広げる。
      上限 10.72px はカンプ等倍。これが無いと広い画面でヒーローの高さが伸び続ける。

   3. vw のフォールバック
      コンテナクエリ非対応（Safari 15 以下 / Firefox 109 以下）では 2 行目の宣言が
      パース時に捨てられ、1 行目の vw が残る。換算は vw = cqw × 0.7444（= 1072 / 1440）。
      個別プロパティごとに 2 行ずつ書く必要はなく、--hero-u の 1 箇所で済む。
   ============================================================ */
@media (min-width: 768px) {
  /* スケールはカンプのセクション幅 1072px（1cqw = 10.72px）で頭打ちにする。
     ここを止めないと、中身が全て幅に比例するぶんヒーローの高さも伸び続ける
     （1920px で 741px、2560px で 1046px）。上限を入れると全幅で 512px に固定される。

     max-width も同じ 1072px にしてあるのは、画像列（1fr）が広がって画像だけ
     大きくなるのを防ぐため。余った幅は左右均等に振って中央へ寄せる。
     緑背景は親の .HeroImage 側にあるので、背景だけは全幅のまま伸びる。
     画像の原寸 1269px も超えないので拡大ボケも起きない。 */
  .HeroImage_Wrap {
    --hero-u: clamp(8px, 0.7444vw, 10.72px);
    --hero-u: clamp(8px, 1cqw, 10.72px);
    max-width: 1072px;
    margin-left: auto;
    margin-right: auto;
  }

  .HeroImage_Inner {
    display: grid;
    /* カンプでは画像（MainImage）の左端が 438.63px、緑セクション右端まで届く。
       グリッドの内容領域は「セクション幅 1072 − padding-left 70 = 1002px」なので
       画像列 = (1072 − 438.63) / 1002 = 63.28%、残りが左カラム。
       左に min を置いてあるのは、スケール下限が効く狭い帯で 36.72% に中身が
       収まらなくなるため。min > max になると min が採用され、内容ぶん押し広げて
       画像側を削る。値は「キャッチ最長行」と「ボタン幅 31.64」の大きいほうに合わせる。
       min を auto にしても効かない: .HeroImage_Buttons > li が width: 100% で、
       中のボタンの実寸が min-content に伝播しないため。 */
    grid-template-columns:
      minmax(calc(32.5 * var(--hero-u)), 36.72%)
      minmax(0, 1fr);
    /* カンプの左カラムは上下中央ではなくやや上寄り。緑背景 512px に対して
       字面の上余白 38.1px / 下余白 52.8px（実測）になる配分。 */
    grid-template-rows: 38.9fr auto auto 61.1fr;
    grid-template-areas:
      ".     visual"
      "catch visual"
      "btns  visual"
      ".     visual";
    align-items: center;
    column-gap: 0;
    row-gap: 0;
    /* max-width 1200px の中央寄せをやめ、画像を緑セクション右端まで
       ブリードさせる。左余白は比率で確保する */
    max-width: none;
    /* カンプでは画像（透明余白込み）の高さがそのまま緑背景の高さ 512px になる。
       上下パディングと画像のネガティブマージンを入れると背景が縮むので 0。 */
    padding: 0 0 0 calc(6.53 * var(--hero-u));
  }

  /* カンプ実測 35.405px、字間 2.4784px。
     カンプは 4 行とも 1 行で組まれている。列幅は上の min で確保しているので、
     途中の丸め誤差で折り返さないよう nowrap で固定する。 */
  .HeroImage_Catchphrase {
    grid-area: catch;
    align-self: end;
    text-align: left;
    white-space: nowrap;
    font-size: calc(3.3 * var(--hero-u));
    line-height: 1.2;
    letter-spacing: calc(0.231 * var(--hero-u));
  }

  /* カンプ実測 78.841px。行送りは「時代」→「即戦力」のカンプ実測 89.69px。 */
  .HeroImage_Catchphrase strong {
    font-size: calc(7.354 * var(--hero-u));
    line-height: 1.138;
    letter-spacing: calc(0.074 * var(--hero-u));
  }

  /* SVG なので strong の font-size 比（1.3109em / 0.8914em / 0.0775em）をそのまま係数化。
     vertical-align はカンプ実測の追い込み分（AI 下端が「時代」の字面下端より 3.65px 上）。 */
  .HeroImage_Catchphrase_Ai {
    width: calc(9.641 * var(--hero-u));
    height: calc(6.556 * var(--hero-u));
    margin-right: calc(0.57 * var(--hero-u));
    vertical-align: -0.046em;
  }

  /* カンプ実測の追い込み。1 行目との間隔を空け、「即戦力」との行送りを
     カンプの 89.5px に合わせる。 */
  .HeroImage_Catchphrase strong.lead {
    margin-top: calc(0.364 * var(--hero-u));
    line-height: 1.1122;
  }

  /* カンプ実測（Figma node 3499:45494）は 66.09px / ExtraBold。
     strong から継承する 600 だとカンプより細いので 800 に上げる。
     この行（AI時代の）の右端が伸びるため、変えたら CTA ボタンの
     width（31.64）も再測定すること。
     margin-left はカンプで「時代」との間が 3.6px 空いているぶん。 */
  .HeroImage_Catchphrase strong .small {
    font-size: calc(6.17 * var(--hero-u));
    font-weight: 800;
    vertical-align: baseline;
    margin-left: calc(0.336 * var(--hero-u));
  }

  /* カンプ実測 47.207px */
  .HeroImage_Catchphrase .big {
    font-size: calc(4.403 * var(--hero-u));
  }

  .HeroImage_Visual {
    grid-area: visual;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    margin: 0;
  }

  /* カンプでは画像（透明余白込み）が緑背景 512px にちょうど収まる。
     幅 634.4px のとき高さ = 634.4 / (1269/1024) = 511.7px でほぼ一致するので、
     余白を詰めるネガティブマージンは入れない。 */
  .HeroImage_MainImg {
    width: 100%;
    margin: 0;
    /* <source> の width/height からアスペクト比を導出しないブラウザ
       （Safari 17.4 未満）でも PC 画像の領域を正しく確保して CLS を防ぐ。
       <img> 側の属性は SP 画像の 694×508 なので、そのままだと比率がズレる。 */
    aspect-ratio: 1269 / 1024;
    /* 1440px を超えるとセクション右端に緑の余白が出て、そこで MacBook と
       人材カードが直角に切れる。右端だけ背景へ溶かして境目を消す。
       幅は 7%（1440px 時 44px）と狭いので、画像が右端まで届く 1440px 以下でも
       カードの内容は読めるまま。非対応ブラウザでは単に従来どおり切り落とされる。 */
    -webkit-mask-image: linear-gradient(to right, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, #000 93%, transparent 100%);
  }

  /* カンプ実測（Figma node 3499:45501）: 直径 108.32px、線 3.30px / #F18500、
     絶対位置 x 429 / y 414（緑背景は y 75、高さ 512）。
     .HeroImage_Visual は画像と同じ 634.4 × 511.7px なので、その中の比率に直すと
       left   = (429 − 438.63) / 634.4 = −1.52%
       bottom = (511.7 − (339 + 108.32)) / 511.7 = 12.58% */
  .HeroImage_Badge {
    width: calc(10.1 * var(--hero-u));
    height: calc(10.1 * var(--hero-u));
    right: auto;
    left: -1.52%;
    bottom: 12.58%;
    padding-top: 0;
    padding-bottom: calc(0.205 * var(--hero-u));
    border-width: calc(0.308 * var(--hero-u));
    box-shadow: 0 calc(0.187 * var(--hero-u)) calc(0.746 * var(--hero-u)) rgba(0, 0, 0, 0.12);
  }

  /* カンプ実測 14.306px */
  .HeroImage_Badge_Label {
    font-size: calc(1.335 * var(--hero-u));
  }

  /* カンプ実測 19.138px */
  .HeroImage_Badge_Price {
    font-size: calc(1.785 * var(--hero-u));
  }

  /* カンプ実測 65.401px。line-height 1 のままだと「0」の行ボックスが字面より
     2 割ほど高く、その空きぶんだけ中身が縦に膨らんで円からはみ出すので詰める。
     カンプのウェイト指定は Bold だが、それは欧文 Noto Sans Display のもの。
     こちらは Noto Sans JP なので 700 では細くなり、900 のほうが見た目が一致する。 */
  .HeroImage_Badge_Price em {
    font-size: calc(6.101 * var(--hero-u));
    line-height: 0.88;
  }

  .HeroImage .cta-buttons {
    grid-area: btns;
    align-self: start;
    align-items: flex-start;
    margin-top: calc(1.52 * var(--hero-u));
    gap: calc(1.12 * var(--hero-u));
  }

  /* 幅はキャッチコピー最長行（「AI時代の」）の右端に合わせる。
     左端は Inner の padding-left で揃っているので、幅＝キャッチ右端 - 左パディング端。
     実測 339.2px（カンプのボタン幅 338px ともほぼ一致）。
     「AI」「の」の font-size を変えると連動するので、触ったら再測定すること。 */
  .HeroImage_Buttons a {
    max-width: none;
    width: calc(31.64 * var(--hero-u));
    margin: 0;
    /* カンプ実測: padding 左 40px / 右 30px、高さ 60px（= 上下 12px + アイコン 32px + 枠線 4px）。 */
    padding: calc(1.119 * var(--hero-u)) calc(2.799 * var(--hero-u))
             calc(1.119 * var(--hero-u)) calc(3.731 * var(--hero-u));
    /* カンプ実測 22px、字間 1.54px */
    font-size: calc(2.052 * var(--hero-u));
    letter-spacing: calc(0.144 * var(--hero-u));
    /* 影もカンプどおり（0 4px 3px rgba(0,0,0,.1) ＋ 0 2px 2px rgba(0,0,0,.06)）に差し替え。
       buttons.css の既定は右方向 5px の影なので、ここで上書きする。 */
    box-shadow: 0 calc(0.373 * var(--hero-u)) calc(0.28 * var(--hero-u)) rgba(0, 0, 0, 0.1),
                0 calc(0.187 * var(--hero-u)) calc(0.187 * var(--hero-u)) rgba(0, 0, 0, 0.06);
  }

  /* ボタン高さ = padding + アイコン + 枠線。枠線だけ buttons.css の
     `a.btn-cta.btn-green { border: 2px }` で固定 2px になり、狭い幅で相対的に
     厚くなるため比率化する（詳細度を上げて上書き） */
  .HeroImage_Buttons a.btn-cta.btn-orange,
  .HeroImage_Buttons a.btn-cta.btn-green {
    border-width: calc(0.187 * var(--hero-u));
  }

  /* カンプ実測 32px */
  .HeroImage_Buttons a svg {
    width: calc(2.985 * var(--hero-u));
  }
}