/* ============================================================
   English Typography Overrides（共通基盤）
   日本語向けの縦書き・字詰め・大小交互見出しスタイルを、
   英語表示で破綻しないように上書きする。body.lang-en にのみ適用。
   読み込みは style.css の後（ishiguro-recruit-style に依存）。
   ============================================================ */

/* ============================================================
   Header Logo (English)
   日本語ロゴと英語ロゴは縦横比が異なるため
   （日本語 logo-ishiguro.png 417×55 ＝ 約7.6:1 ／
   英語 logo-ishiguro-en.png 858×81 ＝ 約10.6:1）、
   style.css の日本語向けサイズ（PC: width:300px）のままだと
   英語ロゴが小さく見える。下記の値はいずれもブラウザ実測で確定済み。
   - PC: 日本語は width:300pxで高さ40px。英語を360pxにすると
     高さ34pxとなり日本語版と見た目の釣り合いが取れる。
   - 768px以下: ロゴに使える幅は実測287px。style.css の
     @media (max-width: 768px) { .header__logo-img { height: 28px } }
     を打ち消さないと、英語ロゴ（縦横比10.6:1）は高さ28px基準で
     幅297pxまで伸びてハンバーガーメニューと重なるため、
     height: auto を必須で指定し幅250pxの指定を優先させる。
   ============================================================ */
.lang-en .header__logo-img {
  width: 360px;
  max-width: 360px;
}

@media (max-width: 768px) {
  .lang-en .header__logo-img {
    width: 250px;
    max-width: 250px;
    height: auto;
  }
}

/* ============================================================
   Hero（採用TOP）
   .hero__title-large / .hero__title-accent は日本語1〜3文字を
   大小交互・-8.58px/-6.6px の字詰めで見せる装飾見出し。
   英語では単語が長くなるため字間を解除し縮小する。
   ============================================================ */
.lang-en .hero__title-line2 {
  letter-spacing: normal;
}

.lang-en .hero__title-large {
  font-size: 56px;
  letter-spacing: normal;
}

.lang-en .hero__title-accent {
  font-size: 40px;
  letter-spacing: normal;
}

/* .hero__vertical-label は writing-mode: vertical-rl の縦書き短冊。
   英語の長文を縦書きにすると読めなくなるため横書きに戻し、
   3本を横並び(row)ではなく縦積み(column)にする。
   横書き化で短冊が98×283px→280×166pxに肥大し、左へ182px張り出して
   作業員の顔に重なっていたため、align-items: flex-end で短冊を
   画像（.hero__person）の右端に揃え、font-size・padding・max-widthを
   縮小して顔との重なりを解消する。 */
.lang-en .hero__vertical-block {
  flex-direction: column;
  align-items: flex-end;
}

.lang-en .hero__vertical-label {
  writing-mode: horizontal-tb;
  text-orientation: initial;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: normal;
  padding: 8px 12px;
  max-width: 190px;
}

/* .hero は height: 890px 固定だが、.hero__person（画像）は
   position: absolute; height: 100% で高さの基準は .hero__inner。
   .hero__inner は flex コンテナだが .hero__person と .hero__side は
   どちらも position: absolute でフローから外れるため、
   .hero__inner自体の高さは実質 .hero__content だけで決まるという
   非自明な仕様になっている。英語版は見出しを56px/40pxに縮小した影響で
   .hero__content が縮み、.hero__inner が487px→377pxに縮小した結果、
   .hero__person も連動して487px→377pxに縮んでいた。487pxは日本語版
   （style.css）を1440px幅で計測した実測値のため、min-heightで固定して
   画像の縮みを防ぐ。1024px以下は style.css 側で .hero__side が
   非表示になり、.hero__person も position: relative;
   aspect-ratio: 1/1; height: auto に変わりこの問題自体が発生しない
   ため、余白が増えないよう min-width で1025px以上に限定する。 */
@media (min-width: 1025px) {
  .lang-en .hero__inner {
    min-height: 487px;
  }
}

/* ============================================================
   ISHIGURO GROUP / ENVIRONMENT
   .group__vertical-title / .env__vertical-title は
   writing-mode: vertical-rl の縦書き見出し（幅64pxに固定）。
   英語では横書きに戻す。値はテーマ自身の1024px以下フォールバック
   （style.css 内の同クラス定義）を流用し、見出し用の
   横並びレイアウトも合わせて解除する。
   ============================================================ */
.lang-en .group__vertical-title,
.lang-en .env__vertical-title {
  writing-mode: horizontal-tb;
  width: auto;
  font-size: 32px;
  padding: 8px 16px;
}

.lang-en .group__inner {
  flex-direction: column;
  gap: 40px;
}

.lang-en .group__title-wrap {
  order: -1;
}

.lang-en .group__cards {
  width: 100%;
  order: 0;
}

.lang-en .env__header {
  position: relative;
  margin-bottom: 20px;
}

.lang-en .env__cards {
  margin-left: 0;
}

/* ============================================================
   What We Do / Our Business カード見出し
   日本語4文字想定の字詰め(-0.87px / -1.26px)・大きめフォントは
   英語の職種名（Staffing Services 等）で折り返しが崩れるため調整する。
   ============================================================ */
.lang-en .whatwedo__card-title {
  font-size: 24px;
  letter-spacing: normal;
}

.lang-en .business__card-title {
  font-size: 32px;
  letter-spacing: normal;
  line-height: 1.3;
}

/* ============================================================
   Page Hero Title（サブページ共通見出し）
   .page-hero-title は募集要項・募集派遣先情報・エントリー等、
   サブページ共通のH1。font-size:100px・letter-spacing:-0.06em は
   英語見出し（Job Openings 等）で破綻するため縮小・字間解除する。
   ============================================================ */
.lang-en .page-hero-title {
  font-size: 52px;
  letter-spacing: normal;
  line-height: 1.3;
}

/* ============================================================
   Tablet（1024px以下）
   ============================================================ */
@media (max-width: 1024px) {
  .lang-en .hero__title-large {
    font-size: 44px;
  }
  .lang-en .hero__title-accent {
    font-size: 32px;
  }
  .lang-en .page-hero-title {
    font-size: 40px;
  }
}

/* ============================================================
   768px以下
   ============================================================ */
@media (max-width: 768px) {
  .lang-en .hero__title-large {
    font-size: 36px;
  }
  .lang-en .hero__title-accent {
    font-size: 26px;
  }
  .lang-en .group__vertical-title,
  .lang-en .env__vertical-title {
    font-size: 22px;
    padding: 6px 12px;
  }
  .lang-en .whatwedo__card-title {
    font-size: 20px;
  }
  .lang-en .business__card-title {
    font-size: 24px;
  }
  .lang-en .page-hero-title {
    font-size: 32px;
  }
}

/* ============================================================
   Mobile（480px以下）
   ============================================================ */
@media (max-width: 480px) {
  .lang-en .hero__title-large {
    font-size: 30px;
  }
  .lang-en .hero__title-accent {
    font-size: 22px;
  }
  .lang-en .page-hero-title {
    font-size: 26px;
  }
}