@charset "UTF-8";

/*
 * njc-overrides.css
 * ──────────────────────────────────────────────────────────────
 * WordPress 移行で生じた「ズレ」だけをここで補正する上書き専用CSS。
 * 旧サイトの reset/component/base/uniq は static/ に無改変で置き、一切触らない。
 * 追加・変更が必要になったら必ずこのファイル（または別の上書きファイル）に書く。
 *
 * 読み込み順は最後（base→uniq→iziModal→meanmenu→overrides）。詳細は docs/css設計.md。
 *
 * ※ privacy ページ時点では補正不要のため空。必要が出た時に追記する。
 */

/* ── SDSダウンロード：タイトル枠の高さ補正 ─────────────────────────
 * 旧 sds/download.php は doctype 無し＝Quirks Mode で描画され、h1 の2行目
 * （span の英字サブ）の行ボックスが 20px に潰れていた（h1計62px）。
 * 標準モードの WP では strut（line-height:1.4=42px）が効いて h1=84px になり、
 * ページ全体が +22px ズレる。span をブロック化して旧の見た目に合わせる。 */
body.sds-download .pagetitle_head h1.tit02 span {
  display: block;
}

/* ── お問い合わせ（MW WP Form）：入力画面のボタン行 ─────────────────
 * MW は 3ステップ用に「戻る」「送信」ボタンを同一マークアップで出し分ける。
 * 入力画面では戻るボタンが空 <li></li> になり、.clmtwo li（inline-block 48%）が
 * 2カラムを占めて送信ボタンが左に寄る。空の li を隠して旧の中央1ボタンに合わせる。
 * （戻るボタンは確認画面でのみ中身を持つ＝そこでは2カラムになり旧と一致） */
.form_btnbox .clmtwo li:empty {
  display: none;
}

/* ── お問い合わせ：ハニーポット（画面外に隠す・bot 誘導用） ───────────── */
.njc-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── ニュースリリース：絞り込みバー（2026-07-05・docs/renual/ニュースリリース絞り込み.png）
 * /news/ 上部にカテゴリ pill ＋ 年度セレクト。絞り込みは archive-news.php のJSで show/hide。
 * ※モックは青系だが、サイトのブランド（緑）に合わせて active を緑にしている。 */
.njc-news-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px 40px;
  background: #eef1ef;               /* 薄グレー背景 */
  border-top: 3px solid #069751;     /* 上に緑のアクセント線 */
  border-radius: 2px 2px 8px 8px;
  padding: 28px 32px;
  margin-bottom: 34px;
}
.njc-news-filter .filter-label {
  display: block;
  font-size: 13px;
  color: #777;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.njc-news-filter .cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.njc-news-filter .cat-pill {
  appearance: none;
  border: 1px solid #cfcfcf;
  background: #fff;
  color: #333;
  font-size: 16px;
  line-height: 1;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.njc-news-filter .cat-pill:hover {
  border-color: #069751;
  color: #069751;
}
.njc-news-filter .cat-pill.is-active {
  background: #069751;
  border-color: #069751;
  color: #fff;
}
/* 【カテゴリ色パレットの置き場】10色の hex は PHP の1か所＝inc/news-cat.php の
   nj_chem_news_cat_palette()（1〜3＝移行時からの赤・青・紫／4〜10＝新カテゴリへの自動割当）。
   <head> に :root{--njc-cat-1〜10} として出るので、色を変えるときはこの CSS ではなく
   上記 PHP の配列を直す（CSS 側で :root を上書きしても <head> の方が後勝ちで効かない）。
   カテゴリ個別に色を決めたいときは、管理画面のカテゴリ編集「ラベルの色」欄が最優先。 */
/* カテゴリごとの色は <head> の <style id="njc-news-cat-colors"> が
   .cat-pill[data-cat="…"] に CSS変数 --njc-cat-color として渡す（inc/news-cat.php）。
   pill の見た目（白地・hover/active は緑）は移行時のまま据え置き。
   カテゴリ色を pill にも出したくなったら、次の1行を有効にするだけでよい。
   .njc-news-filter .cat-pill.is-active { background: var(--njc-cat-color, #069751); border-color: var(--njc-cat-color, #069751); } */
.njc-news-filter .filter-year {
  min-width: 260px;
}
.njc-news-filter .year-select-wrap {
  position: relative;
}
.njc-news-filter .year-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid #069751;         /* 緑枠（フィルタ操作を示す） */
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  color: #333;
  padding: 12px 40px 12px 16px;
  cursor: pointer;
}
.njc-news-filter .year-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(6, 151, 81, 0.15);
}
/* 年度が選択されている（すべての年度以外）＝カテゴリの active pill と同じ緑背景・白文字 */
.njc-news-filter .year-select-wrap.is-year-active .year-select {
  background: #069751;
  color: #fff;
  border-color: #069751;
}
.njc-news-filter .year-select-wrap.is-year-active::after {
  border-top-color: #fff;   /* 緑背景では矢印を白に */
}
.njc-news-filter .year-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -3px;
  border-style: solid;
  border-width: 7px 5px 0 5px;
  border-color: #069751 transparent transparent transparent;
  pointer-events: none;
}
/* 一覧の各行に薄い区切り線（添付デザインに合わせる） */
.news .list_area li {
  border-bottom: 1px solid #ececec;
  padding-bottom: 20px;
}
.news .list_area li:last-child {
  border-bottom: none;
}
.njc-news-empty {
  text-align: center;
  color: #666;
  padding: 40px 0;
}
/* ── ニュース本文（クラシックエディタの出力）＝旧サイトで出ていた表の枠線・太字・斜体・上下付き文字を戻す（2026-10-22）
 * 旧 news/detail.blade は reset.css を読まず、news/uniq.css 内蔵の狭いリセット（table・td・th・strong・em・sub・sup は対象外）だけだった。
 * 新サイトは全ページ共通の reset.css（table{border:0} strong{font:inherit} …）が本文にも当たり、
 * 旧本文の <table border="1" cellpadding="1" cellspacing="1"> と <strong> の見た目が消えていた（顧客報告 2026-10-22・news/1360）。
 * 対象を .news.detail に限る＝一覧・他セクションには効かない。元 CSS は触らない。
 * 見出し h1〜h6 は旧サイトも本文と同じ大きさ（h1・h2 だけ中央寄せ＝base.css）＝ここでは触らない。 */
.news.detail table[border]:not([border="0"]) {
  border-collapse: collapse;
}
.news.detail table[border]:not([border="0"]),
.news.detail table[border]:not([border="0"]) th,
.news.detail table[border]:not([border="0"]) td {
  border: 1px solid #808080;
}
.news.detail table[cellpadding] th,
.news.detail table[cellpadding] td {
  padding: 1px 4px;
}
.news.detail strong,
.news.detail b {
  font-weight: bold;
}
.news.detail em,
.news.detail i {
  font-style: italic;
}
.news.detail sup {
  vertical-align: super;
  font-size: smaller;
}
.news.detail sub {
  vertical-align: sub;
  font-size: smaller;
}
@media (max-width: 768px) {
  .njc-news-filter {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }
  .njc-news-filter .filter-year {
    width: 100%;
    min-width: 0;
  }
}
/* ── スマホ幅（767px 以下）＝案 1c（2026-10-01・docs/from-claude-design/ニュース絞り込みUIの改善案/README.md）
 * カテゴリ pill を 1 行の等幅セグメントに、年セレクトを件数の右に小さく置く。ラベルは視覚的にだけ隠す。
 * 768px 以上は上の指定のまま（このブロックは 767px 以下でしか効かない）。
 * 緑は README の #0a9a4a ではなくサイトのブランド緑 #078247（static/assets/css/base.css と同じ）。
 * 件数 .njc-news-count は JA のみ・スマホ幅のみ表示（archive-news.php の JS が絞り込み後の件数を入れる）。 */
.njc-news-filter .njc-news-count {
  display: none;
}
@media (max-width: 767px) {
  .njc-news-filter {
    gap: 8px;
    padding: 12px;
  }
  /* 「カテゴリ」「年」＝読み上げには残し、画面からは隠す（.screen-reader-text と同じ考え方） */
  .njc-news-filter .filter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .njc-news-filter .filter-cat {
    width: 100%;
  }
  /* セグメント：auto-fit で項目数に追従（4 個なら 4 等分の 1 行）。
     区切り線は gap 1px に各項目の 1px の影を重ねて描く＝項目が 5 個以上で 2 段に折り返しても
     縦横の線が揃い、空きマスは白のまま。 */
  .njc-news-filter .cat-pills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 1px;
    border: 1px solid #078247;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
  }
  .njc-news-filter .cat-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;                  /* タップ領域 40px 以上 */
    padding: 9px 4px;
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0 1px #078247;     /* 区切り線 */
    background: #fff;
    color: #222;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;           /* 長いカテゴリ名はマスの中で折り返す */
  }
  .njc-news-filter .cat-pill:hover {
    background: #eef7f1;
    color: #222;
  }
  .njc-news-filter .cat-pill.is-active {
    background: #078247;
    color: #fff;
  }
  .njc-news-filter .cat-pill:focus-visible {
    outline-offset: -3px;              /* 枠の overflow:hidden で外側のリングが切れないよう内側に */
  }
  /* 年の行：左に件数・右に内容幅のセレクト（件数の無い EN でも右寄せ） */
  .njc-news-filter .filter-year {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .njc-news-filter .njc-news-count {
    display: block;
    font-size: 12px;
    color: #777;
  }
  .njc-news-filter .year-select-wrap {
    margin-left: auto;
  }
  .njc-news-filter .year-select {
    width: auto;
    font-size: 13px;
    line-height: 1.4;
    color: #222;
    padding: 6px 30px 6px 12px;        /* 右は ▼ の分 */
    border-color: #c8cccf;
    border-radius: 4px;
  }
  .njc-news-filter .year-select-wrap::after {
    right: 12px;
    border-width: 6px 4px 0 4px;       /* ▼ を小さく（README＝10px 相当） */
    border-top-color: #078247;
  }
  .njc-news-filter .year-select-wrap.is-year-active .year-select {
    background: #078247;
    border-color: #078247;
  }
  .njc-news-filter .year-select-wrap.is-year-active::after {
    border-top-color: #fff;
  }
}

/* ── ニュース一覧：日付＋タグ列が長いタイトルに押されて縮む問題の補正 ─────
 * 旧CSS（static/news/uniq.css）の .sp_box は flex-shrink:1・min-width:205px。
 * 長いタイトル行で列が 226→208px に圧縮され、.day（nowrap無し）が2行に折り返し、
 * タグ位置もずれていた。列を縮ませず、日付は折り返さないように固定する。 */
.news .list_area a .sp_box {
  flex-shrink: 0;
}
.news .list_area .day {
  white-space: nowrap;
}

/* ── ニュース一覧：ページャ（クライアント側・絞り込み結果を20件/ページ） ── */
.njc-news-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 50px;
}
.njc-news-pager .pg {
  appearance: none;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #cfcfcf;
  background: #fff;
  color: #333;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.njc-news-pager .pg:hover {
  border-color: #069751;
  color: #069751;
}
.njc-news-pager .pg.is-current {
  background: #069751;
  border-color: #069751;
  color: #fff;
  cursor: default;
}
.njc-news-pager .pg.is-disabled {
  opacity: .4;
  cursor: default;
}
.njc-news-pager .pg.is-disabled:hover {
  border-color: #cfcfcf;
  color: #333;
}
.njc-news-pager .pg-dots {
  color: #999;
  padding: 0 4px;
}
@media (max-width: 768px) {
  .njc-news-pager .pg {
    min-width: 34px;
    height: 34px;
    font-size: 13px;
  }
}

/* ── グローバルナビ（2026-08-07 リニューアル指示）：
 * 8項目を .inner02（1000px）の左右いっぱいに均等配置し、上のロゴ（左端）・言語タブ（右端）と揃える。
 * flex space-between＋文字サイズ 16px。両端の項目はパディングを外して端をロゴ/タブに合わせる。
 * （旧対策＝マージン/パディング詰めの置き換え。詰めに戻すと「採用情報」の2行折り返しが再発するので注意） */
header .menu-container .menu > ul.nav {
  display: flex;
  justify-content: space-between;
}
/* 旧CSSのclearfix疑似要素（.menu>ul:before/:after）がflexの子になり両端に~26pxの隙間を作る＝無効化 */
header .menu-container .menu > ul.nav::before,
header .menu-container .menu > ul.nav::after {
  content: none;
}
header .menu-container ul.nav > li {
  margin-right: 0;
}
header .menu-container ul.nav > li > a.first {
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
}
header .menu-container ul.nav > li:first-child > a.first {
  padding-left: 0;
}
header .menu-container ul.nav > li:last-child > a.first {
  padding-right: 0;
}

/* ── companyセクションナビの4カラム化に伴うサムネイル1:1トリミング（2026-08-07 指示）。
 * ul.clmfour.njc-sq（template-parts/company-nav.php）。元画像は横長＝aspect-ratioで正方形に切り、
 * object-fit:cover で中央トリミング（画像ファイルは加工しない）。 */
.njc-sq li .image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.njc-sq li .image a {
  display: block;
  width: 100%;
  height: 100%;
}
.njc-sq li .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ロゴタイル（経営理念）：白背景＋ロゴの視覚位置を下10px・右3pxへ微調整
 * （はみ出しは .image の overflow:hidden が切る＝ずれた分は白が見える） */
.njc-sq li.njc-logo-tile .image {
  background: #fff;
}
.njc-sq li.njc-logo-tile .image img {
  position: relative;
  top: 8px;
  left: -1px;
}

/* ── 会社概要（/company/overview/）の拠点情報セクション（修正依頼202610・2026-08-07 実装）。
 * マークアップ＝post_content 末尾の .njc-kyoten-list（投入器＝scratchpad build_kyoten.php・素材＝office配下ページ）。
 * レイアウト＝クライアント指定：拠点名＋住所 → 写真＋地図の2カラム → 【アクセス方法】、拠点間は罫線。 */
.njc-kyoten {
  padding: 40px 0;
  border-bottom: 1px solid #DBDBDB;
}
.njc-kyoten:last-child {
  border-bottom: none;
}
.njc-kyoten-head {
  display: flex;
  gap: 40px;
  margin-bottom: 28px;
}
.njc-kyoten-name {
  min-width: 180px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
}
.njc-kyoten-addr {
  line-height: 1.9;
}
.njc-kyoten-media {
  display: flex;
  gap: 4%;
}
.njc-kyoten-photo,
.njc-kyoten-map {
  width: 48%;
  margin: 0;
}
.njc-kyoten-photo img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
.njc-kyoten-map iframe {
  width: 100%;
  height: 300px;
  display: block;
  border: 0;
}
.njc-kyoten-nophoto {
  height: 300px;
  background: #d9d9d9;
  border: 1px dashed #999;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}
.njc-kyoten-access {
  margin-top: 24px;
  line-height: 1.9;
}
.njc-kyoten-access-title {
  margin-bottom: 4px;
}
@media screen and (max-width: 768px) {
  .njc-kyoten-head { display: block; }
  .njc-kyoten-name { margin-bottom: 10px; }
  .njc-kyoten-media { display: block; }
  .njc-kyoten-photo, .njc-kyoten-map { width: 100%; }
  .njc-kyoten-map { margin-top: 15px; }
  .njc-kyoten-photo img, .njc-kyoten-map iframe, .njc-kyoten-nophoto { height: 220px; }
}

/* ── 経営理念（/company/idea/）の哲学ビジュアル：背景画像＋HTMLテキスト（JA/EN 共通マークアップ）。
 * 2026-08-26 クライアント支給の背景 philosophy_bg.jpg（1469×979・文字なし・static と static-en の両方に配置）を
 * 旧画像と同じ 1440:507 の帯に cover で敷く。文字は本文の HTML（eyebrow＋copy）。完成例＝docs/顧客からのデータ/…/経営理念イメージ.png。
 * クラス名 -pending は placeholder 時代の名残（本文側にあるため DB を触らず温存。D6a の掃除で改名可）。 */
.njc-philosophy-pending {
  margin-bottom: 40px;
  background: #cfe6f5 url(../../static/company/img/philosophy_bg.jpg) center / cover no-repeat;
  aspect-ratio: 1440 / 507;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.njc-philosophy-pending .njc-ph-eyebrow {
  color: #0a8247;
  font-size: 15px;
  letter-spacing: .35em;
  margin-bottom: 1.8em;
}
.njc-philosophy-pending .njc-ph-copy {
  color: #fff;
  font-family: YuMincho, 'Yu Mincho', 'MS Mincho', serif;
  font-size: clamp(16px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 2;
}
body.njc-en .njc-philosophy-pending {
  background-image: url(../../static-en/company/img/philosophy_bg.jpg);
}
body.njc-en .njc-philosophy-pending .njc-ph-copy {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: .04em;
}

/* ── ヘッダ言語タブ（2026-08-07 リニューアル指示）：JAPAN・ENGLISH を常に両方表示。
 * ON（現在の言語・li.is-current）＝グレー、OFF＝ブランド緑。マークアップ＝header.php＋inc/i18n.php。
 * base.css の nth-of-type 色指定（1=グレー/2=緑）を言語基準のクラスで上書き（同詳細度＝後読みで勝つ）。 */
header .inner02 .head_nav ul li:nth-of-type(1) a,
header .inner02 .head_nav ul li:nth-of-type(2) a {
  color: #fff;
  background: #078247;
}
header .inner02 .head_nav ul li.is-current a {
  color: #000;
  background: #DBDBDB;
}

/* ── 製品情報トップ：中分類のカード型タイル（案A・2026-08-07 採用）。
 * 客先要望＝商品名だけでは分からないので補足説明を添える（当初のhover案は SP で使えないため常時表示に）。
 * 旧 .btn02（ボタン）は高さ70px固定・1行中央寄せで説明文を入れられないため、カードとして組み直す。
 * 意匠（左上の緑三角・右の再生アイコン・hover時の緑）は .btn02 から引き継いで違和感を出さない。
 * マークアップ＝page-products.php（概要文が無い分類は従来の .btn02 のまま）。 */
.products_inner .clmthree .njc-card {
  display: block;
  flex: 1;               /* li（flex縦）の高さいっぱいに伸ばす＝同じ行のカード下端を揃える */
  box-sizing: border-box;
  padding: 22px 20px 20px;
  position: relative;
  background: #fff;
  border: 1px solid #DBDBDB;
  border-bottom: 4px solid #DBDBDB;
  color: #333;
  text-decoration: none;
  transition: .2s;
}
/* 左上の緑三角（.btn02 a:before と同じ） */
.products_inner .clmthree .njc-card::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 14px 0 0;
  border-color: #00bc61 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.products_inner .clmthree .njc-card-title {
  display: block;
  position: relative;
  margin-bottom: 10px;
  padding-right: 24px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}
/* 右の再生アイコン（.btn02 a:after と同じ画像） */
.products_inner .clmthree .njc-card-title::after {
  content: "";
  width: 14px;
  height: 14px;
  background: url('../../static/assets/img/play_button.svg') no-repeat center center;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -7px;
}
.products_inner .clmthree .njc-card-sub {
  display: block;
  padding-top: 10px;
  border-top: 1px solid #ededed;
  color: #777;
  font-size: 13px;
  line-height: 1.8;
  text-align: left;
}
.products_inner .clmthree .njc-card:hover {
  border-color: #069751;
  border-bottom-color: #00BC62;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* 説明文の無いカード（受託水素化）＝タイトルが最後の要素なら下マージンを消して箱の中で上寄りに見えないようにする（2026-09-08） */
.products_inner .clmthree .njc-card-title:last-child {
  margin-bottom: 0;
}
.products_inner .clmthree .njc-card:hover .njc-card-title {
  color: #069751;
}
.products_inner .clmthree .njc-card:hover .njc-card-title::after {
  background-image: url('../../static/assets/img/play_button_hover.svg');
}
/* 文量が違っても同じ行のカード高さを揃える（旧 inline-block では揃わない）。
 * ul=flex(wrap) で li が行ごとに stretch → li=flex(column) で中のカードを flex:1 で伸ばす。
 * 【落とし穴1】複数行の flex は align-content の既定 normal だと各行が内容高さに縮み、
 *   行内の align-items:stretch が効かない。flex-start を明示して初めて行内で高さが揃う。
 * 【落とし穴2】旧 base.css の `li:nth-of-type(3n){margin-right:0}` と
 *   `li:nth-last-of-type(-n+3){margin-bottom:0}` は「3列×最後の行」を前提にした指定。
 *   件数が3の倍数でない時（例7件）は行の途中の li に当たり、margin の有無が
 *   stretch 後の高さ差（=20px）として現れる。→ 余白は margin を全 li で 0 に均し、
 *   gap で作り直す（行・列とも均等）。 */
.products_inner .clmthree {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}
.products_inner .clmthree li {
  vertical-align: top;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  width: calc((100% - 40px) / 3); /* 3列＋gap20px×2 */
  margin: 0;
}
@media (max-width: 768px) {
  .products_inner .clmthree li {
    width: calc((100% - 20px) / 2); /* SP は2列（旧 base.css の 48% 相当） */
  }
}
@media (max-width: 768px) {
  .products_inner .clmthree .njc-card {
    padding: 18px 16px 16px;
  }
  .products_inner .clmthree .njc-card-title {
    font-size: 15px;
  }
}

/* ============================================================
   CSRトップ タイル一覧（.csr-index）を 6枚 → 9枚（3列×3行）に対応
   2026-08-10 顧客修正依頼202610：CSR方針/CSR調達/CSR重要課題/人材への取り組み/
   地域社会とともに を独立ページ化し、タイルを9枚構成に変更した。
   【なぜ上書きが要るか】元 static/csr/assets/css/uniq.css の枠線ルールは
   `section:nth-of-type(1),(3),(4),(6)` に全周枠 / `(2),(5)` に上枠 という
   「3列×2行＝6枚」を前提に手書きされている。9枚だと2行目・3行目の枠が
   ちぐはぐになるため、nth-of-type の指定を打ち消して「列位置」で決め直す。
   元CSSは触らない（static無改変ルール）。
   ============================================================ */

/* 1) 旧6枚前提の枠線指定をいったん全て解除 */
.csr-index.ray-column section:nth-of-type(1) h2,
.csr-index.ray-column section:nth-of-type(2) h2,
.csr-index.ray-column section:nth-of-type(3) h2,
.csr-index.ray-column section:nth-of-type(4) h2,
.csr-index.ray-column section:nth-of-type(5) h2,
.csr-index.ray-column section:nth-of-type(6) h2 {
  border: none;
}

/* 2) 枚数に依らず「3列グリッドとして正しい枠」を引き直す。
      左端(3n+1)は左枠あり、それ以外は左枠を隣と共有して二重線を避ける。
      ※ :nth-of-type(n) は「全 section」の意味だが、上の解除ブロック
      （nth-of-type(1)〜(6)＝詳細度(0,3,2)）と詳細度を揃えて後勝ちさせるために必要。
      外すと1〜6枚目（1・2行目）だけ解除が勝って枠が消える。 */
.csr-index-9.ray-column section:nth-of-type(n) h2 {
  border: 1px solid #ddd;
  border-bottom: none;
  border-left: none;
}
.csr-index-9.ray-column section:nth-of-type(3n + 1) h2 {
  border-left: 1px solid #ddd;
}

/* 3) 9枚（3行）でも行間が詰まらないようにする。
      元CSSの section { margin-top: 40px } は行が増えても効くのでそのまま使う。 */

/* 4) 新規5タイルの背景画像。
      【暫定】専用画像が未支給のため既存画像を流用している。
      本番前に差し替えること＝docs/顧客修正依頼202610-QA台帳.md 参照。 */
#csrtop-section-index-policy::after {
  background-image: url(../../static/csr/assets/img/bg-csr.jpg);
  background-color: #0f658e59;
  background-blend-mode: color-burn;
}
#csrtop-section-index-procurement::after {
  background-image: url(../../static/csr/assets/img/bg-procurement.jpg);
  background-position: top;
  background-color: #4c4e4e9c;
  background-blend-mode: overlay;
}
#csrtop-section-index-materiality::after {
  background-image: url(../../static/csr/assets/img/bg-materiality.jpg);
  background-position: bottom left;
  background-color: #4246484a;
  background-blend-mode: overlay;
}
#csrtop-section-index-hr::after {
  /* 2026-08-27 クライアント支給 IMG_1952.JPG（作業員が装置を操作・新ユニフォーム）を
     縦長 2:3 に切り出し 1024x1536 で差し替え。2026-08-26 は「01. TOP候補2」（プラント前）、
     初期＝good-companies.jp の集合写真（旧ユニフォームのため先方指示で差し替え）。 */
  background-image: url(../../static/csr/assets/img/bg-hr.jpg);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-color: #4c4e4e9c; /* 白文字の可読性＝CSR調達タイルと同じ暗幕 */
  background-blend-mode: overlay;
}
#csrtop-section-index-community::after {
  background-image: url(../../static/csr/assets/img/bg-society.png);
}

/* 5) SP。元CSS uniq.css は 550px 以下で .csrtop-section-index を width:100%（1列）に
      するので、その時は「3列前提の左枠打ち消し」を戻さないと左辺が消える。 */
@media (max-width: 550px) {
  .csr-index-9.ray-column section:nth-of-type(n) h2 {
    border-left: 1px solid #ddd;
  }
}

/* 6) 高さの是正。
   元CSS uniq.css は section { height: 530px } の固定値。旧6枚は項目数が
   2〜6と近かったので成立していたが、9枚構成では項目1件から6件まで開く。
   flex だと行ごとに高さが独立して不揃いになるため、grid の均等行
   （grid-auto-rows: 1fr）で「全行＝一番高い行」に揃える。 */
.csr-index-9.ray-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; /* 全行を最も背の高い行と同じ高さに */
}
.csr-index-9.ray-column section {
  width: auto; /* 元CSSの .csrtop-section-index { width:33.33% } を打ち消し（列は grid が管理） */
  height: auto;
  min-height: 340px; /* 「詳細を見る」ボタンまで収まる下限 */
  display: flex;
  flex-direction: column;
}
@media (max-width: 550px) {
  .csr-index-9.ray-column {
    grid-template-columns: 1fr; /* 元CSSの1列化に追随 */
    grid-auto-rows: auto;       /* 1列時は内容に応じた高さ（9枚全部を最大高にはしない） */
  }
}
/* ボタンを常に下端へ。
   【落とし穴】元CSSの a.btn.bgcenterout は position:absolute; bottom:30px＝フロー外。
   高さを可変にすると、項目数の多いタイル（Environment=6件）で ul とボタンが重なる
   （フロー外なので ul の伸縮では場所を確保できない）。
   → 9枚構成では絶対配置をやめ、通常フローの最後に置いて margin-top:auto で下端へ寄せる。 */
.csr-index-9.ray-column section > ul {
  flex: 1 0 auto;
  margin-bottom: 0;
}
/* ボタンは absolute をやめ通常フローで下端へ。ただし position:static にすると
   :before（白背景・absolute）の基準がセクションに移って白が消え、hover時に
   黒文字×暗い写真で読めなくなる。relative＋z-index:0 で基準と重なり順をボタン内に固定する。 */
.csr-index-9.ray-column section a.btn.bgcenterout {
  position: relative;
  z-index: 0;
  left: auto;   /* 元CSSの left:50%/bottom:30px は absolute 前提。relative だと
                   そのままオフセットになり右・上へずれるので無効化する */
  bottom: auto;
  transform: none;
  align-self: center;
  margin: 0 auto 30px;
}
/* hover＝白背景が右からスライドイン → 追って文字がふわっと黒に */
.csr-index-9.ray-column section a.bgcenterout:before {
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s cubic-bezier(0.8, 0, 0.2, 1);
}
.csr-index-9.ray-column section a.bgcenterout:hover:before {
  transform: scaleX(1);
}
.csr-index-9.ray-column section a.bgcenterout span {
  transition: color 0.25s ease 0.2s, text-shadow 0.25s ease 0.2s;
}
.csr-index-9.ray-column section a.bgcenterout:hover span {
  color: #000;
  text-shadow: none;
}

/* CSR（JA・EN）：本文の文字が固定ヘッダーとハンバーガーメニューの上に出る（2026-09-28）。
   旧 uniq.css がタイルの文字に z-index:999、見出し .style-header-2 の文字に 99 を指定しており、
   960px 以下の固定ヘッダー（z-index:99）と同じか上になる。スクロールした位置でメニューを開くと
   文字がメニューを突き抜け、開閉ボタンのタップも横取りする（旧サイトも同じ潜在不具合）。
   どちらも自分の背景（z-index:-1 の写真・横線）より上にあれば足りるので 1 に下げる。 */
.csr-index.ray-column section ul { z-index: 1; }
.style-header-2 span { z-index: 1; }

/* EN/JA 沿革（2026-08-27 沿革.xlsx 反映）：1つの年に画像が2枚ある場合（1964）、
   uniq.css の main .inner02 img { float:right } で横並びになるのを防ぐ。
   キャプション（historyText）も直前の画像の下に回り込ませる。 */
.company_history .table01 table td img.historyimg { clear: right; }
.company_history .table01 table td .historyText { clear: right; }

/* EN 沿革（2026-10-05 お客様修正依頼 No.48「年度の幅が間延び」）：PC の年度列は旧 uniq.css の width:30%（本文幅 1000px で約 300px）。
   年度は 4 桁だけ＝SP（960px 以下）で旧 CSS が使う 130px に PC も揃える。body.njc-en でスコープ＝JA の沿革には効かない。 */
body.njc-en.company_history .table01.tbl02 table th { width: 130px; }

/* EN CSR トップ（2026-08-27 タイル9枚化）：英語見出しは2行になるものがあるが、
   元CSS uniq.css の h2 は line-height:100px の1行前提＝2行目が白帯から画像側に溢れる。
   EN 限定で可変高に（1行時は従来と同じ100px帯・2行時は帯が伸びる）。JA は触らない。 */
body.njc-en .csr-index.ray-column section h2 {
  line-height: 1.5;
  min-height: 100px;
  padding: 10px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 製品行ハイライト（掲載ページを表示/プレビュー・2026-09-04）----
   編集画面のボタンから #njc-p{ID} で飛んだ行を数秒ハイライト（:target）。
   .njc-preview-row は編集者専用プレビューで一覧に混ぜた未公開製品の行（一般訪問者には出力されない）。 */
tr:target > td { animation: njc-row-flash 2.5s ease-out 1; }
@keyframes njc-row-flash {
  0%   { background-color: #fff3b0; }
  70%  { background-color: #fff3b0; }
  100% { background-color: transparent; }
}
.njc-preview-row > td { background-color: #fffbe6; }
.njc-preview-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: #d63638; color: #fff; font-size: 11px; border-radius: 3px;
  vertical-align: middle; white-space: nowrap;
}

/* ---- IRカレンダー行ハイライト（掲載ページを表示/プレビュー・2026-09-10）----
   製品行と同じ合図。カレンダーは <p class="text"> が1行なので p に当てる。 */
.irtop p.text:target { animation: njc-row-flash 2.5s ease-out 1; }
.irtop p.text.njc-preview-row { background-color: #fffbe6; }
/* ---- IRライブラリ行ハイライト（掲載ページを表示/プレビュー・2026-09-10）---- */
.ir_library .list_area li:target { animation: njc-row-flash 2.5s ease-out 1; }
.ir_library .list_area li.njc-preview-row { background-color: #fffbe6; }

/* ---- 翻訳確認マーカー（暫定・2026-08-29）----
   クライアント未確認の仮訳は <span class="njc-tr-check"> で囲み黄色マーカーで示す。
   確認が取れたら span を外す（台帳＝docs 内の翻訳確認一覧.md）。全確定後はこの節ごと削除。 */
.njc-tr-check { background-color: #fff176; color: #222 !important; text-shadow: none !important;
  padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ── EN トップのニュースタブ（2026-09-08 → 2026-09-15 に方式変更）───────────────
 * 旧：static-en/css/uniq.css の :nth-of-type(1)〜(3) を nth-of-type で上書きしていた。
 * 新：タブ色はカテゴリ（news_cat）から生成して <head> の <style id="njc-news-cat-colors">
 *     が data-cat 属性セレクタで当てる（inc/news-cat.php）。JA/EN 共通の仕組みになったので
 *     ここの EN 専用 nth-of-type 上書きは撤去した（残すと詳細度 (0,5,4) で新方式 (0,4,4) に
 *     勝ってしまい、カテゴリを増やしても EN のタブ色が付かなくなる）。 */

/* ── EN 製品案内トップ オレオケミカルの Special ボタン（2026-09-08）──────────
 * EN を JA と同じ構成（Special ボタン＋写真3枚）にしたが、static-en/products/css/uniq.css には
 * JA の .special / .intro が無い。JA uniq.css の同ルールを EN だけに写す（static-en は無改変）。 */
body.njc-en .products_inner .special {
  background-color: #fd7e00;
  padding: 8px 15px;
  margin-right: 15px;
  color: #fff;
  font-family: "BIZ UDPMincho";
  font-size: 12px;
}
body.njc-en .products_inner .intro { margin-bottom: 20px; }
@media (max-width: 960px) {
  body.njc-en .products_inner .special { padding: 5px 10px; margin-right: 10px; font-size: 10px; }
  body.njc-en .products_inner .intro { margin-right: 2%; }
}

/* ---- 子会社決算公告 行ハイライト（掲載ページを表示/プレビュー・2026-09-15）----
   IRライブラリと同じ合図。行アンカー＝#njc-sb{ID}（inc/subsidiary-front.php）。 */
.subsidiary_detail .list_area li:target { animation: njc-row-flash 2.5s ease-out 1; }
.subsidiary_detail .list_area li.njc-preview-row { background-color: #fffbe6; }

/* ── EN CSR・トップの見た目補正（2026-09-17 の指摘）── すべて body.njc-en でスコープ＝JA には効かない ──
 * 1) EN トップ ヒーロー：英文リードが右端まで届くので右に余白を確保
 * 2) CSR方針 委員会図：横並びをやめ図を 70%（550px 以下は 100%）＝図中の文字を読める大きさに
 * 3) CSR調達 基本方針：static-en/csr/assets/css/uniq.css に JA の p.style-description／ul.style-description-ul の
 *    規則が無い（旧 EN サイトにこの節が無かった）ため JA uniq.css 174-197 を写す。JA は文頭に「・」を持つので EN は ::before で補う
 * 5) 人材 健康経営宣言：見出しが 2 行になると絶対配置の span が上にはみ出すので h3 に上下 padding
 * 6) 人材 人事制度：h2.tit02 の上余白 */
body.njc-en .njc-hero.mv-main .njc-copy { right: 5%; }
/* 英文は折り返す（2026-10-01）：njc-hero.css の「キャッチコピーは折り返さない」（2026-09-27）は JA の文字数で
   決めた規則。EN にも効いて、見出しと説明文が 1 行のまま画像の右へ切れていた（全幅）。EN だけ折り返しに戻す。 */
body.njc-en .njc-hero.boxed.mv-main .njc-copy h2,
body.njc-en .njc-hero.boxed.mv-main .njc-copy p { white-space: normal; }
@media screen and (max-width:960px) {
  /* 英文は JA より長い＝SP 幅では画像の高さに収まらないので字を一段小さく（JA は無変更） */
  body.njc-en .njc-hero.mv-main .njc-copy { right: 4%; }
  body.njc-en .njc-hero.mv-main .njc-copy h2 { font-size: clamp(18px,3.6vw,34px); line-height: 1.3; }
  body.njc-en .njc-hero.mv-main .njc-copy p { font-size: clamp(10px,1.6vw,16px); line-height: 1.6; margin-top: .7em; }
}

body.njc-en .section-committee .ray-column { display: block; }
body.njc-en .section-committee .committee-txt { width: 100%; }
body.njc-en .section-committee .committee-img { width: 70%; margin: 30px auto 0; }
@media (max-width: 550px) { body.njc-en .section-committee .committee-img { width: 100%; } }

body.njc-en p.style-description { font-size: 16px; text-indent: -1em; padding-left: 2em; }
body.njc-en p.style-description::before { content: "\30FB"; }
/* 2026-09-25：EN 株主ページ（中期経営計画の .strat-container）は本文が「・」を持つ＝上の補いで「・・」と二重になっていた */
body.njc-en .strat-container p.style-description::before { content: none; }
body.njc-en ul.style-description-ul li { position: relative; padding-left: 20px; font-size: 17px; margin-top: 15px; }
body.njc-en ul.style-description-ul li::before { content: ""; display: block; border-radius: 50%; width: 8px; height: 8px;
  background-color: #9ca09e; position: absolute; top: 50%; left: 5px; transform: translate(-50%, -50%); }

body.njc-en .section-health-declaration .style-header-2 { padding: 1em 0; margin-bottom: 25px; }

body.njc-en .section-resource-system-reforms h2.tit02 { margin-top: 40px; }

/* 5b) 人材 男女比グラフ：横並び（幅指定なしの flex 子＝画像が縮む）をやめ、図を 1 列で大きく。550px 以下は 100%
   2026-09-22：JA も同じ崩れ（PNG が右半分に押し込まれて読めない）なので EN 限定をやめ両サイト共通に */
.section-promote-gender-equality .ray-column { display: block; }
.section-promote-gender-equality .img-area { width: 70%; max-width: 760px; margin: 0 auto 24px; }
.section-promote-gender-equality .img-area img { width: 100%; height: auto; }
@media (max-width: 550px) { .section-promote-gender-equality .img-area { width: 100%; } }


/* =====================================================================
   テスト指摘の修正（2026-09-25）
   記録＝docs/仕様/テスト仕様書/イワンさん指摘_対応記録_20260925.md（J＝日本語タブ・E＝英語タブの行）
   旧サイトの SP 用レイアウトは 960px 以下（TB 820px も SP 扱い）。PC（961px 以上）は変えない。
   ===================================================================== */

/* J1 トップのニュース欄：カテゴリ名が長いとタブ（100px 固定）と札（80px 固定）の中で折り返す。
   固定幅を「最小幅」に変え、文字は折り返さない（短い名前の見た目は従来どおり）。 */
body.home main section.area01 .tab_area li {
  width: auto;
  min-width: 100px;
  padding: 0 12px;
  box-sizing: border-box;
  white-space: nowrap;
}
body.home main section.area01 .list_area .tug {
  width: auto;
  min-width: 80px;
  padding: 0 8px;
  box-sizing: border-box;
  white-space: nowrap;
}
@media (max-width: 960px) {
  body.home main section.area01 .tab_area li { min-width: 60px; padding: 0 8px; }
  body.home main section.area01 .list_area .tug { min-width: 60px; }
}

/* J4 グループ会社（PC）：旧 CSS が表ごとに th の右余白（最大 140px）を持つため、
   追加された「ＨＰアドレス」行の見出しが折り返す。見出しは 1 行固定。 */
.group .table01 table th { white-space: nowrap; }

@media (max-width: 960px) {
  /* J3・J6・J10・E1・E6・E9 表の 1 列目が広い：旧 base.css が SP で th・td の両方に width:100% を
     指定しており、先頭の列が幅を独占する（旧サイトも同じ潜在不具合）。幅は内容に任せる。
     フォームの表（.table_form＝th/td を縦積み）は width:100% が必要なので除外。 */
  .table01:not(.table_form) table th,
  .table01:not(.table_form) table td { width: auto; }
  /* J10・E9 決算ハイライト：幅を内容に任せても「科目」列が 4 割を占める（余りが長い文字の列に配られる）＝25% に固定 */
  .scroll-table table tr > :first-child { width: 25%; }
  .scroll-table table tr > :not(:first-child) { width: 15%; }
  /* J10 の続き（2026-09-28）：JA の決算ハイライトは「科目」のセルだけの行（rowspan=2）と数値だけの行が交互に並ぶ。
     数値の行では最初の年度の値が行の先頭＝上の 25% が当たり、合計 110% で最後の年度の列が 50px に潰れていた。
     先頭でも、列をまたがず class も無いセル（＝数値）は 15% に戻す。株式メモの表（class="left"）と EN（科目が同じ行）は対象外 */
  .scroll-table table tr > td:first-child:not([colspan]):not([class]) { width: 15%; }
  /* J3・E1 会社概要：見出し列を 3 割に固定し、内容列の左余白を詰める */
  .table01.tbl01 table th { width: 30%; }
  .table01.tbl01 table td { padding-left: 12px; }
  /* E2 役員：見出し列の左右余白が 0 で文字が罫線に接する */
  .table01.tbl02 table th { padding-left: 8px; padding-right: 8px; }

  /* J8 ほか：ページ冒頭のリード文（タイトル枠内の p.text）に左右余白が無い */
  main .pagetitle_head > p.text { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }

  /* J7・E5 CSR トップ：ヒーローの内枠が 1000px 固定（旧 CSS の 1100px 以下の指定）で TB 幅だと右が切れる */
  .heroImage .heroInner { width: auto; max-width: 1000px; }

  /* J11 子会社決算公告：日付欄 60px 固定で日付が 2 行になる。
     ニュース一覧の SP と同じく「日付＋札を 1 行・題名を下」に並べ替える。 */
  .subsidiary_detail .list_area a .sp_box {
    float: none;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  .subsidiary_detail .list_area .day { white-space: nowrap; }
  .subsidiary_detail .list_area .sp_box + span { display: block; }

  /* J12・J13 お問い合わせの冒頭文：旧 CSS の .test が「幅 960px・高さ固定」で右が切れる（旧サイトも同じ） */
  .test, .test.short, .test.long, .test.center {
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 16px;
    box-sizing: border-box;
  }
  /* J13・E10 フォーム：左右の余白。外枠は画面端から 16px、見出し・入力欄も罫線から離す */
  .inquiry_detail .inner02 { width: auto; margin-left: 16px; margin-right: 16px; }
  .table_form.table01 table th { padding: 8px 10px; box-sizing: border-box; }
  .table_form.table01 table td { padding: 8px 10px; box-sizing: border-box; }
  /* J13 完了画面「お問い合わせトップへ戻る」：旧 CSS は 960px 以下で幅 100%＝画面いっぱいのボタンになる。
     PC と同じ 320px で中央に置く（狭い画面でははみ出さない幅まで） */
  .top_return { width: 320px; max-width: calc(100% - 32px); margin-left: auto; margin-right: auto; }

  /* J14 ニュース本文の画像：旧記事は img に float:left と幅をインラインで持つ。
     SP/TB では回り込みをやめ、画面幅に収める（横並びに入る分は並ぶ） */
  .news.detail .inner02 img[style*="float"] {
    float: none !important;
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    height: auto !important;
    margin: 0 8px 8px 0;
  }
  /* 回り込みの高さ合わせに置かれた空の段落は、回り込みをやめる幅では出さない。
     目印の class は inc/news-front.php が表示のときに付ける（空の段落が 2 つ以上続く所だけ） */
  .news.detail .inner02 p.njc-float-spacer { display: none; }
  /* ニュース本文の画像・埋め込み：幅を px で決めた画像（最大 1104px）や、URL だけの行から作られる
     埋め込みカード（幅 500px）が画面からはみ出す。画面幅までに抑える（2026-09-27） */
  .news.detail .inner02 img { max-width: 100%; height: auto !important; }
  .news.detail .inner02 iframe,
  .news.detail .inner02 .wp-embedded-content { max-width: 100%; }
  /* 埋め込みカードは読み込みが済むまで position:absolute で隠れている。幅の基準を段落にして、画面の外へ出さない */
  .news.detail .inner02 p { position: relative; }

  /* J5 結晶核剤「製品ラインナップはこちら」：SP でボタンが 120px に縮み文字がはみ出す。PC と同じ 260px に */
  .kessho .seihin-annnai .btn03 { display: inline-block; width: 260px; max-width: 100%; }
  .kessho .seihin-annnai .btn03 a { width: 100%; padding: 0 24px 0 10px; box-sizing: border-box; }

  /* E4 受託水素化（EN）：高さ 40px 固定のボタンで、1 行の文字は上寄せ・2 行は枠いっぱい＝位置が揃わない。
     上下中央揃え・高さは文字量に合わせる（JA は 1 行なので見た目は同じ） */
  .hydro .btn02 a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 40px;
    line-height: 1.4;
    padding: 6px 24px 6px 12px;
    box-sizing: border-box;
  }
}

/* J13・E10 「次へ（確認画面）」ボタン：旧 CSS はボタンの文字色・書体を指定しておらず、
   iOS の既定のボタン表示（appearance）に任せていた。Chromium／WebKit では再現しないが、
   端末の設定に左右されないよう文字色・書体・外観を明示する（hover の白文字は base.css が勝つ）。 */
.form_btnbox .clmtwo button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  color: #333;
  font-family: inherit;
}
.form_btnbox .clmtwo button:hover { color: #fff; }

/* reCAPTCHA v3：右下のバッジは出さず、入力画面のボタンの下に断り書き（.njc-recaptcha-note＝inc/inquiry-mail.php）を置く。
   Google の規約＝断り書きをフォームの流れに置けばバッジを隠してよい。 */
.grecaptcha-badge { visibility: hidden; }
.njc-recaptcha-note {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #666;
  text-align: center;
}
.njc-recaptcha-note a { color: inherit; text-decoration: underline; }

/* J7 CSR トップ（JA）：「CSR報告書」ボタン（p.btn-wrapper）がタイル 9 枚のグリッドの 10 個目に入り、
   grid-auto-rows:1fr で「タイルと同じ高さ（約 520px）の空行」を作っていた＝フッターまでの大きな空白。
   あわせてボタンの幅（350px）が 1 列目を広げていた。列は均等（minmax(0,1fr)）、3 行だけ均等にし、
   ボタンは 4 行目に全幅で置いて高さは中身どおりにする。 */
.csr-index-9.ray-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
  grid-auto-rows: auto;
}
.csr-index-9.ray-column > .btn-wrapper {
  grid-column: 1 / -1;
  margin-top: 40px;
}
@media (max-width: 550px) {
  /* 1fr は中身の最小幅より狭くならない＝幅 350px 固定の「CSR報告書」ボタンが列を 350px に広げ、
     366px より狭い画面でタイルの右が切れる（2026-09-29）。列は minmax(0,1fr)、ボタンは画面幅まで */
  .csr-index-9.ray-column { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .csr-index-9.ray-column > .btn-wrapper .btn03 { max-width: 100%; }
}

/* E3 製品案内トップ：英語の分類名は長く、SP の 2 列カードでは必ず 2 行になる＝550px 以下は 1 列。
   JA も同じ並びに揃える（2026-09-27） */
@media (max-width: 550px) {
  .products_inner .clmthree li { width: 100%; }
}

/* E7 人材（EN）女性管理職比率の表：SP で 25px はみ出して切れる。セルの左右余白を詰め、
   それでも収まらない端末は横スクロール */
@media (max-width: 550px) {
  .section-increase-in-the-ratio-of-femalemanagers table { display: block; max-width: 100%; overflow-x: auto; }
  .section-increase-in-the-ratio-of-femalemanagers table th,
  .section-increase-in-the-ratio-of-femalemanagers table td { padding-left: 4px; padding-right: 4px; }
}
/* E7 の続き（2026-09-29）：
   ① 女性管理職比率の表＝320px では必要幅 327px に対し入る幅 307px。横スクロールはできるが、最後の列が
     切れて見える。389px 以下は余白と文字をもう一段詰めて画面に収める（余白 4→2px で 24px、文字 12→11px）
   ② 同じページの育児休業の表（7 列）＝375px 以下で画面の外へ出ており（右端 385px）、#wrap の
     overflow:hidden で切られて続きが読めない。列が多く詰めても収まらないので、表の中で横スクロール */
@media (max-width: 389px) {
  .section-increase-in-the-ratio-of-femalemanagers table th,
  .section-increase-in-the-ratio-of-femalemanagers table td { padding-left: 2px; padding-right: 2px; font-size: 11px; }
}
@media (max-width: 550px) {
  .section-work-childecare table { display: block; max-width: 100%; overflow-x: auto; }
  .section-work-childecare table th,
  .section-work-childecare table td { padding-left: 4px; padding-right: 4px; }
}

/* ── お問い合わせフォーム本文の入れ子修正（2026-09-25・N2／テストのレビュー No.47 の再発防止）──────
 * フォーム本文（MW WP Form）の旧サイト由来の不正な入れ子を正しい HTML に直す。見た目は旧 CSS の効き方をそのまま写す。
 *   同意欄：<a><h1 class="tit02"><p><span>…</span></p></h1></a>（h1 の中に p＝不正）
 *        → <a class="njc-privacy-link"><span class="njc-privacy-text">…</span></a>
 *     旧の効き方＝h1.tit02 { font-size:30px; line-height:1 }（SP 16px）が行の高さを作り、
 *     base.css の h1 span { color:#078247; letter-spacing:2px } と h1.tit02 span { font-size:14px }（SP 10px・字間 1px）が文字。
 *   見出しの英字サブ：属性なしの <span> はビジュアルエディタ（TinyMCE）が保存時に消す＝class を付ける（CSS 不要・h1.tit02 span がそのまま効く）。
 * 本文の変更＝docs/仕様/SQL-フォーム入れ子修正_20260925.sql（phpMyAdmin で実行）。 */
.table_form a.njc-privacy-link {
  display: block;
  text-align: center;
  font-size: 30px;
  line-height: 1;
}
.table_form a.njc-privacy-link .njc-privacy-text {
  font-size: 14px;
  color: #078247;
  letter-spacing: 2px;
}
@media (max-width: 960px) {
  .table_form a.njc-privacy-link { font-size: 16px; }
  .table_form a.njc-privacy-link .njc-privacy-text { font-size: 10px; letter-spacing: 1px; }
}

/* J13 フォーム冒頭のリード文（JA・640px 以下）：中央揃えの文が「…してくださ／い。」「[必／須]」と語の途中で折れる。
   2 文（28 文字＋17 文字）を 1 文ずつ 2 行で出す。
   - 左右の余白（J8 で足した 16px）をフォームでは外す
   - 文の幅を「28 文字ぶん」に限る（字間 .6px こみ）＝1 文目でちょうど折れる
   - 28 文字が入らない狭い画面（368px 未満）は、入る大きさまで文字を下げる
   641px 以上は 1 行に収まる。EN は単語の区切りで折れるので対象外（2026-09-27） */
@media (max-width: 640px) {
  body:not(.njc-en) .njc-inquiry-wrap .pagetitle_head > p.text {
    padding-left: 0;
    padding-right: 0;
    font-size: min(12px, calc(3.42vw - .6px));
    max-width: calc(28em + 18.8px);
  }
}

/* ── フッターの見出しの帯（SP・TB）：帯はリンク、右端のボタンで下の一覧を開閉（2026-10-01）──
 * 旧 base.css は 960px 以下で、見出し（会社情報〜お問い合わせ）を「ー／＋」付きの開閉の帯として描き、
 * 下の一覧を隠している。ところが開閉させる JS は旧サイトにも無い＝帯は開かず、押せるのは文字の上だけだった。
 * ヘッダーのスマホメニュー（meanmenu）と同じ作りにする＝帯の全体がセクショントップへのリンク、
 * 右端の「+／-」のボタン（assets/js/njc-footer-nav.js が足す）で一覧を開閉。PC は変えない。
 * JS が動かない時は、ボタンが出ず、帯のリンクと「>」だけになる。 */
.njc-foot-toggle { display: none; }
@media (max-width: 960px) {
  footer .footer_listBox .footer_listHead { padding: 0; cursor: auto; }
  footer .footer_listBox .footer_listHead a.footer_title { display: block; padding: 5px 28px 5px 5px; }
  footer .footer_listBox .footer_listHead:after,
  footer .footer_listBox .footer_listHead.active:after {
    content: ">";
    right: 10px;
    top: 5px;
    font-weight: normal;
    color: #fff;
    pointer-events: none;
  }
  /* 開閉ボタンがある帯＝「>」をやめ、ボタンの幅だけリンクの右を空ける */
  footer .footer_listBox.has-toggle .footer_listHead:after { content: none; }
  footer .footer_listBox.has-toggle .footer_listHead a.footer_title { padding-right: 48px; }
  .njc-foot-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .njc-foot-toggle:before { content: "+"; }
  footer .footer_listBox.is-open .njc-foot-toggle:before { content: "-"; }
  footer .footer_listBox.is-open > ul { display: block; }
}

/* ── 実機確認の宿題（2026-10-01）── */

/* 1) ページ内ジャンプで、見出しが固定ヘッダーの下に隠れる（ハンバーガーメニューが出る幅＝960px 以下）。
 *    ヘッダーは 960px 以下で position:fixed・高さ 51px。ジャンプ先をその分だけ下げる。
 *    例＝トップ→製品案内の #product-…、グループ会社の #iwatani。 */
@media (max-width: 960px) {
  html { scroll-padding-top: 64px; }
}
/*    ログイン中は WordPress の管理バー（画面上に固定）の高さも足す（2026-10-12・IR ライブラリの「掲載ページを表示」で、
 *    ジャンプ先の行が管理バーの下に隠れた）。管理バー＝783px 以上 32px・782px 以下 46px・600px 以下は固定でない。 */
/*    余裕を持たせる（「余裕を持って下に」との指示）＝管理バー・固定ヘッダーの下にさらに約 100px あける。 */
html:has(body.admin-bar) { scroll-padding-top: 140px; }
@media (max-width: 960px) {
  html:has(body.admin-bar) { scroll-padding-top: 190px; }
}
@media (max-width: 782px) {
  html:has(body.admin-bar) { scroll-padding-top: 210px; }
}
@media (max-width: 600px) {
  html:has(body.admin-bar) { scroll-padding-top: 160px; }
}

/* 2) お問い合わせの冒頭文の箇条書き（inc/inquiry-front.php が出力時に ul.njc-note-list へ組み替える）。
 *    元は「全角スペース 2 つ＋・」の行。PC の見た目は元と同じ位置＝左 2 文字下げ。
 *    折り返した 2 行目は、1 行目の 1 文字目の下に来る。SP は左の下げを 1 文字に減らして、文字の入る幅を広げる。 */
.njc-note-list { list-style: none; margin: 0; padding: 0 0 0 2em; }
.njc-note-list li { position: relative; padding-left: 1em; }
.njc-note-list li:before { content: "・"; position: absolute; left: 0; top: 0; }
@media (max-width: 550px) {
  .njc-note-list { padding-left: 0; }
}

/* 3) 行末を全角スペースで埋めたリード文（個人情報保護方針）。page.php が埋めた空白に .njc-lead-pad を付ける。
 *    SP では空白と改行を消し、左揃えで自然に折り返す。左右は本文（.inner02）と同じ位置に揃える。PC・TB は変えない。 */
@media (max-width: 550px) {
  main .pagetitle_head p.text:has(.njc-lead-pad) { text-align: left; width: auto; margin-left: 8px; margin-right: 8px; padding-left: 0; padding-right: 0; }
  main .pagetitle_head p.text .njc-lead-pad,
  main .pagetitle_head p.text:has(.njc-lead-pad) br { display: none; }
}

/* 4) 経営理念のメイン画像（SP）：写真を高くして上下に余白を作り、コピーの行間を詰める。
 *    コピーの 2 行目は 22 文字＝字間こみ 24.64em。画面幅に収まる大きさにして、2 行で止める。 */
@media (max-width: 550px) {
  .njc-philosophy-pending { aspect-ratio: 2 / 1; }
  .njc-philosophy-pending .njc-ph-eyebrow { margin-bottom: 1.1em; }
  body:not(.njc-en) .njc-philosophy-pending .njc-ph-copy { font-size: min(16px, 3.6vw); line-height: 1.7; }
  body.njc-en .njc-philosophy-pending .njc-ph-copy { line-height: 1.6; padding: 0 12px; }
}

/* 5) SDS ダウンロードの検索とリセット。
 *    旧 CSS は、リセットを position:absolute で下から数 px の位置に置いている＝入力欄やボタンの高さが
 *    端末ごとに違うと縦がずれる（タブレット実機でずれた）。高さを決めて、同じ行の中央に揃える。
 *    iOS はボタンを独自の見た目で描く＝appearance を切って、旧 CSS の見た目（枠つき）で出す。 */
.section-filter .filter-wrap { align-items: flex-end; }
.section-filter .filter-wrap .search form { display: flex; align-items: center; gap: 6px; }
.section-filter .filter-wrap .search input.input-box { box-sizing: border-box; height: 36px; line-height: normal; margin: 0; }
.section-filter .filter-wrap .search input.button,
.section-filter .reset input { box-sizing: border-box; height: 32px; line-height: 1; margin: 0; padding: 0 8px; -webkit-appearance: none; appearance: none; }
.section-filter .filter-wrap .search input.button { width: auto; min-width: 54px; }
.section-filter .reset { position: static; display: flex; align-items: center; height: 36px; margin-left: 6px; }
.section-filter .reset form { position: static; margin: 0; }
@media (max-width: 960px) {
  .section-filter .reset { margin-bottom: 10px; }
}
/* SP：入力欄は内容の幅いっぱい、検索とリセットは 2 行目に並べる。
 * .search とそのフォームを display:contents にして、見出し・入力欄・検索・リセットを 1 つの並びとして折り返す。 */
@media (max-width: 550px) {
  .section-filter .filter-wrap { margin-left: 0; gap: 8px; align-items: center; }
  .section-filter .filter-wrap .search,
  .section-filter .filter-wrap .search form { display: contents; }
  .section-filter .filter-wrap .search h3 { flex: 0 0 100%; }
  .section-filter .filter-wrap .search input.input-box { flex: 0 0 100%; width: 100%; height: 40px; }
  .section-filter .filter-wrap .search input.button,
  .section-filter .reset input { height: 36px; padding: 0 14px; }
  .section-filter .reset { height: auto; margin: 0; }
}

/* トップメッセージ（/company/message/ ＝ JA page 476／EN page 76）：本文の節ごとに小見出し h3.head03 を置く（2026-10-06 顧客修正 No.2）。
 * 2 節目以降は上に余白を取る。SP では写真が全幅になり回り込みが解けるので、見出しの印が写真の横に取り残されないよう clear する。
 * 2026-10-06 夜：写真を最初の h3 の後ろへ移動（h3 の折り返し対策）。EN（page 76）も同構造にしたので同じ規則を効かせる。 */
body.page-id-476 main .inner02 .head03,
body.njc-en.page-id-76 main .inner02 .head03 { margin-top: 40px; }
body.page-id-476 main .inner02 figure + .head03,
body.njc-en.page-id-76 main .inner02 figure + .head03 { margin-top: 0; }
@media (max-width: 960px) {
  body.page-id-476 main .inner02 .head03,
  body.njc-en.page-id-76 main .inner02 .head03 { clear: both; margin-top: 30px; }
  body.page-id-476 main .inner02 figure + .head03,
  body.njc-en.page-id-76 main .inner02 figure + .head03 { margin-top: 10px; }
}

/* CSR の PDF ボタン（.btn-wrapper .btn02）：旧 CSS は左 20px の余白しか無く、文字の末尾に右の再生アイコン（14px・right:10px）が重なる。
 * 右にも左と同じ 20px の余白＋アイコン分を取る（2026-10-06）。本文末尾の全角スペースによる応急処置は外した。 */
.btn-wrapper .btn02 a { padding-right: 44px; }
@media (max-width: 960px) {
  .btn-wrapper .btn02 a { padding-right: 20px; }
}

/* CSR 人材への取り組み「人事制度の刷新」の PDF ボタン（.btn03）：CSR の uniq.css は .btn03 を幅 350px 固定・中央寄せ・左 padding 0 にしており、
 * 文言「CSR報告書2026「挑戦を後押しする人事施策」」（21 字＋字間 2px≒340px）が右の再生アイコン（14px・right:10px）に重なる。
 * このボタンだけ幅を文字に合わせ、左 20px／右 34px（20px＋アイコン分）の余白を取る（2026-10-09）。CSR トップの .btn-wrapper .btn03 には触れない。 */
.section-resource-system-reforms .btn-wrapper .btn03 { width: auto; max-width: 100%; }
.section-resource-system-reforms .btn-wrapper .btn03 a { padding: 0 34px 0 20px; }
@media (max-width: 960px) {
  .section-resource-system-reforms .btn-wrapper .btn03 a { padding: 0 20px 0 10px; }
}