/* NextHill スマホ表示の はみ出し防止・改行調整（2026-10-04）
   既存のCSSは変更せず、このファイルを最後に読み込んで上書きする。
   外すときは、各ページの nh-mobile-fit.css を読み込む1行を削除。 */

/* 途中で切りたくない語句（例：NT-B） */
.nh-nb{ white-space:nowrap; }
/* できれば途中で切りたくない語句（1行に収まらないときだけ、中で改行する） */
.nh-keep{ display:inline-block; max-width:100%; }

/* ── 商品ページ：8つの成分カード（文字に押されてカードが画面より広がるのを防ぐ） ── */
@media (max-width:860px){
  .ing-lp-grid{ grid-template-columns:minmax(0,1fr); }
  .ing-lp-card{ min-width:0; }
}

/* ── 商品ページ：ECMの図（丸が3つ並ぶ所。幅の狭い端末で「ヒアルロン酸」が途中で切れるのを防ぐ） ── */
@media (max-width:374px){
  .ecx .x-circles.c3{ gap:6px; }
  .ecx .x-circles.c3 b{ font-size:12px; letter-spacing:0; }
}

/* ── 「なぜエラスチンなのか」の図 ── */
@media (max-width:720px){
  /* 列が文字に押し広げられないようにする */
  .ef-fig .ef-grid > *, .ef-fig .ef-summary > *, .ef-fig .ef-side > *, .ef-fig .ef-flow > *{ min-width:0; }
  /* アイコンの列を少し細くして、「デスモシン・イソデスモシン」が1行に収まるようにする */
  .ef-fig .ef-side{ grid-template-columns:44px minmax(0,1fr); gap:10px; }
}

/* ── 見出し・中央寄せの短い文：行の長さをそろえ、最後の行に1〜2文字だけ残らないようにする ── */
@media (max-width:720px){
  .art-hero h1, .art-sub, .art-body h2, .art-body h3, .art-toc li, .art-cta p, .art-message p,
  .ef-fig .ef-title, .ef-fig .ef-lead, .ef-fig .ef-center, .ef-fig .ef-tag, .ef-fig .ef-note, .ef-fig .ef-band, .ef-fig .ef-pull{
    text-wrap:balance;
  }
}

/* ── 会社概要：会社情報の表（スマホでは項目名の下に内容を縦に並べ、右にはみ出さないようにする） ── */
@media (max-width:600px){
  .profile-table, .profile-table tbody, .profile-table tr, .profile-table th, .profile-table td{ display:block; width:auto; }
  .profile-table th{ padding:18px 4px 2px; }
  .profile-table td{ padding:0 4px 18px; }
}