/* ============================================================
   en.css — 英語ページ (/en/) 専用の上書き
   ------------------------------------------------------------
   このサイトのCSSは日本語の組版前提でチューニングされている。
   日本語は文中どこでも折り返せるため nowrap / max-content を多用しているが、
   英語は単語単位でしか折り返せないので、そのままだと必ず溢れる。
   ここで英語に必要な打ち消しだけを行う。日本語ページはこのファイルを
   読み込まないので影響しない。
   読み込み順: shell.css → home.css/styles.css →（トップのみ）hero-3d.css → en.css
   ============================================================ */

/* ---------- 防御の基本 ----------
   長い単語（Implementation / Infrastructure 等）が狭いカードで
   はみ出すのを防ぐ。日本語では不要だった保険。
   anywhere は使わないこと: ブラウザが最小内容幅を1文字と判断し、
   表の列が極端に細くなって Dimensio/n のように語中で割れる。
   break-word なら「どうしても入らない語」だけを折る */
.hm-def__part,
.hm-why__card,
.hm-sv-card,
.hm-uc-card,
.hm-pr-step,
.hm-fact-item,
.hm-faq__item,
.guide-card,
.table td,
.table th {
  overflow-wrap: break-word;
}

/* 行見出しは語で折り返せる幅を確保する（英語のラベルは日本語より長い） */
.guide-read .table tbody th {
  min-width: 8em;
}

/* palt は日本語の詰め組み用。ラテン文字では字間が詰まりすぎる */
.hm-hero .hm-hero__title,
.hm-hero .hm-hero__lead {
  font-feature-settings: normal;
}

/* ---------- ヒーロー ----------
   .hm-hero__title-line は日本語の1行を固定する目的で
   width: max-content + nowrap になっている。英語では見出しが
   ヒーロー幅を超えるため折り返しを許可する（hero は overflow:hidden なので
   放置すると黙って切れる） */
.hm-hero .hm-hero__title-line {
  width: auto;
  white-space: normal;
  text-wrap: balance;
}

/* 英語のCTA文はボタン幅に収まらない。折り返しを許可し高さで吸収する */
.hm-hero .hm-btn--pill,
.hm-offer__actions .hm-btn,
.hm-faq__more .hm-btn,
.hm-nav__actions .hm-btn {
  white-space: normal;
}

/* ロックアップの補助ラベルが1文字ずつ縦積みになるのを防ぐ
   （日本語でも 1366px 付近で起きる。英語では単語が崩れるため必ず止める） */
.hm-hero .hm-hero__lockup {
  width: auto;
  max-width: 100%;
  flex-wrap: wrap;
}

.hm-hero .hm-hero__lockup-tag {
  white-space: nowrap;
}

/* ---------- 表 ----------
   行見出しの nowrap は日本語の短いラベル前提。英語では列が伸びて
   横スクロールになるため解除する */
.hm-vs__table tbody th,
.table thead th,
.table tbody th {
  white-space: normal;
}

/* ---------- 導入プロセス ---------- */
.hm-pr-step__title {
  white-space: normal;
}

/* ---------- 行間 ----------
   日本語向けの 1.9〜2.05 はラテン文字では間延びして見える */
.hm-def__lead,
.hm-why__lead,
.guide-article p,
.hm-faq__item p {
  line-height: 1.75;
}

/* ---------- 目次 ----------
   1ページ集約型で節が多いので、要約の直後に置いて回遊できるようにする */
.guide-toc {
  margin: 0 0 44px;
  padding: 22px 26px;
  border: 1px solid var(--hm-border);
  border-radius: 16px;
  background: var(--hm-soft);
}

.guide-toc__title {
  margin: 0 0 12px;
  color: var(--hm-navy-ink);
  font-size: 14px;
  font-weight: 700;
}

.guide-toc ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  margin: 0;
  padding-left: 20px;
}

.guide-toc li { margin: 0; }

.guide-toc a {
  color: var(--hm-text-2);
  font-size: 14px;
  line-height: 1.7;
}

.guide-toc a:hover { color: var(--hm-orange-ink); }

@media (max-width: 640px) {
  .guide-toc ol { grid-template-columns: 1fr; }
  .guide-toc { padding: 18px 20px; }
}

/* ---------- ヘッダー ----------
   英語のナビ項目は日本語より約60px広いため、shell.css の詰め（≤1280px）が
   切れる 1281〜1320px でヘッダーが溢れる（実測 最大38px）。
   英語ページだけ詰めを 1400px まで延長する。文字やボタンの大きさは変えず、
   余白だけを縮めてデスクトップの見た目を保つ */
@media (min-width: 1281px) and (max-width: 1400px) {
  .hm-nav { gap: 12px; }
  .hm-nav__list { margin-right: 8px; }
  .hm-lang__opt { padding: 6px 8px; }
}