@charset "UTF-8";
:root {
  --c-primary: #0e4e94;
  --c-primary-2: #2f74c0;
  --c-primary-light: #4a9fd8;
  --c-primary-dark: #082f5e;
  --c-secondary: #0c8a6a;
  --c-ink: #1d1d1f;
  --c-text: #333333;
  --c-muted: #767676;
  --c-line: #e4e1dd;
  --c-bg: #ffffff;
  --c-bg-gray: #f6f5f3;
  --c-bg-dark: #12161d;
  --c-placeholder: #d9d9d9;
  --c-placeholder-text: #9a9a9a;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif: "Shippori Mincho", "Yu Mincho", serif;
  --font-en: "Jost", "Noto Sans JP", sans-serif;
  --header-h: 88px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-bg);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
.l-inner { max-width: 1120px; margin: 0 auto; padding: 0 5%; }
.l-inner--narrow { max-width: 1120px; }

/* header */
.l-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid var(--c-line);
}
.l-header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
}
.l-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 0 24px 0 28px; max-width: 1440px; margin: 0 auto;
}
.l-header__logo { display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.l-header__logo-mark { height: 40px; width: auto; flex: none; }
.l-header__logo-ja { display: block; font-size: 22px; font-weight: 700; color: var(--c-primary); letter-spacing: 0.08em; }
.l-header__logo-en { display: block; font-family: var(--font-en); font-size: 10.5px; letter-spacing: 0.22em; color: var(--c-muted); text-transform: uppercase; }
.l-header__logo-full { height: 40px; width: auto; flex: none; }
.l-header__right { display: flex; align-items: center; gap: 28px; }
.g-nav__list { display: flex; align-items: center; gap: 20px; }
.g-nav__link { position: relative; font-size: 14.5px; font-weight: 500; padding: 8px 0; color: var(--c-ink); }
.g-nav__link:hover, .g-nav__link.is-current { color: var(--c-primary); }
.l-header__lang { font-family: var(--font-en); font-size: 12.5px; letter-spacing: 0.12em; color: var(--c-muted); display: flex; gap: 6px; align-items: center; }
.l-header__lang .is-active { color: var(--c-ink); font-weight: 600; }
.l-header__contact {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--c-primary-2), var(--c-primary));
  color: #fff; font-size: 13.5px; font-weight: 600; padding: 12px 22px; border-radius: 4px;
}
.l-header__contact svg { width: 15px; height: 15px; fill: currentColor; }

/* page hero (下層ページ見出し帯) */
.page-hero {
  position: relative; overflow: hidden;
  margin-top: var(--header-h);
  background: linear-gradient(120deg, var(--c-primary-dark), var(--c-primary) 60%, var(--c-primary-2));
  color: #fff; padding: 64px 0 52px;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("images/hero-bg.jpg") center/cover no-repeat;
  opacity: 0.2; z-index: 0;
}
.page-hero--greeting::before { background-image: url("images/hq-building.jpg"); background-position: center 10%; }
.page-hero--profile::before { background-image: url("images/tokyo_0513.jpg"); background-position: center; }
.page-hero--history::before { background-image: url("images/iwaki_0664.jpg"); background-position: center 45%; }
.page-hero--access::before { background-image: url("images/aerial-overview.jpg"); background-position: center; }
.page-hero--organization::before { background-image: url("images/iwaki_0003.jpg"); background-position: center 40%; }
.page-hero--compliance::before { background-image: url("images/fukuoka_1056.jpg"); background-position: center 35%; }
.page-hero--custom::before { background-image: url("images/fukuoka_0507.jpg"); background-position: center 45%; }
.page-hero--quality::before { background-image: url("images/hplc-technician.jpg"); background-position: center 40%; }
.page-hero--products::before { background-image: url("images/fukuoka_0099.jpg"); background-position: center 60%; }
.page-hero--recruit::before { background-image: url("images/iwaki_0593.jpg"); background-position: center 28%; }
.page-hero--recruit-form::before { background-image: url("images/nmr-lab.jpg"); background-position: center 35%; }
.page-hero--news::before { background-image: url("images/plant-building-alt.jpg"); background-position: center; }
.page-hero--privacy::before { background-image: url("images/fukuoka-plant.jpg"); background-position: center; }
.page-hero--contact::before { background-image: url("images/iwaki_0015.jpg"); background-position: center; }
.page-hero .l-inner { position: relative; z-index: 1; }
.page-hero__en { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: #a7c7ec; }
.page-hero__ja { font-family: var(--font-sans); font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; margin-top: 10px; letter-spacing: 0.06em; }
.breadcrumb { font-size: 12.5px; color: rgba(255,255,255,0.8); margin-top: 18px; }
.breadcrumb a:hover { text-decoration: underline; }

/* section heading */
.c-sec-head { margin-bottom: 40px; }
.c-sec-head__en {
  display: block; font-family: var(--font-en); font-size: 13px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-primary-2); margin-bottom: 10px;
}
.c-sec-head__en::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--c-primary-2); vertical-align: middle; margin-right: 12px; }
.c-sec-head__ja { font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; color: var(--c-ink); letter-spacing: 0.06em; line-height: 1.5; }

.l-section { padding: 76px 0; border-bottom: 1px solid var(--c-line); }
.l-section--gray { background: var(--c-bg-gray); }
.l-section__lead { max-width: 760px; font-size: 15.5px; line-height: 2.2; margin-bottom: 40px; }

/* buttons */
.c-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: 220px; padding: 15px 26px; font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--c-primary-2), var(--c-primary)); border-radius: 2px;
}

/* placeholder box for missing assets (img.placeholder* = 実写真が入った枠なので装飾は付けない) */
.placeholder:not(img) {
  background: repeating-linear-gradient(135deg, var(--c-placeholder), var(--c-placeholder) 10px, #e8e8e8 10px, #e8e8e8 20px);
  border: 1px dashed #b5b5b5; color: var(--c-placeholder-text);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 13px; letter-spacing: 0.04em; border-radius: 4px;
}
.placeholder--photo { aspect-ratio: 16/10; }
.placeholder--wide { aspect-ratio: 16/6; }
.placeholder--square { aspect-ratio: 1/1; }
.placeholder--chart { min-height: 280px; }

/* 実写真を差し込んだ img は object-fit で比率を保ったままトリミング表示 */
img.placeholder--photo, img.placeholder--wide, img.placeholder--square {
  object-fit: cover; width: 100%; display: block; border-radius: 4px;
}

/* profile block: 写真＋文章（社長挨拶ページの構成を他ページでも共通利用） */
.profile-flex { display: flex; gap: 36px; align-items: flex-start; flex-wrap: wrap; }
.profile-flex__photo { width: 280px; aspect-ratio: 3/4; flex: none; object-fit: cover; border-radius: 4px; display: block; }
#message .profile-flex__photo { width: 100%; max-width: 420px; aspect-ratio: 3/2; object-position: center; }
/* 受託・研究開発ページ：横位置（横長）で見せたい写真用の修飾クラス */
.profile-flex__photo--wide { width: 100%; max-width: 420px; aspect-ratio: 3/2; }
.profile-flex__text { flex: 1; min-width: 260px; font-size: 15px; line-height: 2.2; }

/* cards */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
a.card:hover { transform: translateY(-4px); transition: transform 0.25s var(--ease); }
.card--featured { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; align-items: stretch; }
.card--featured .access-visual { position: relative; overflow: hidden; min-height: 0; }
.card--featured .access-visual .placeholder,
.card--featured .access-visual .access-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; }
.card--featured .card__body { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.card--featured .card__title { font-size: 24px; margin: 0 0 16px; }
.card--featured .card__text { font-size: 16px; line-height: 2.5; }
.card-grid .card .card__title { font-size: 15px; }

/* アクセスページ：外観写真の下にGoogleマップを並べる */
.access-map { aspect-ratio: 16/10; width: 100%; display: block; border: 0; }
.card-grid .card .placeholder--photo { aspect-ratio: 4/3; }
.card-grid .card .access-map { aspect-ratio: 4/3; border-radius: 0; }
.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden;
}
.card__body { padding: 26px 24px; }

/* 品質保証ページ：GMP工程のSTEPを縦方向に進む配置に変更し、STEP間を下向き矢印で接続 */
.gmp-layout { display: grid; grid-template-columns: 1fr 280px; gap: 36px; align-items: stretch; max-width: 980px; margin: 0 auto; }
.gmp-flow { display: flex; flex-direction: column; }
.gmp-flow .card__body { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.gmp-flow .gmp-flow__head { flex: 0 0 190px; }
.gmp-flow .gmp-flow__head .card__title { margin: 4px 0 0; }
.gmp-flow .card__text { flex: 1; min-width: 160px; margin: 0; }
.gmp-flow__arrow { display: flex; justify-content: center; padding: 8px 0; color: var(--c-primary-2); }
.gmp-flow__arrow svg { width: 20px; height: 20px; display: block; }
.gmp-visuals { display: flex; flex-direction: column; gap: 24px; }
.gmp-visuals__item { flex: 1; border-radius: 4px; overflow: hidden; min-height: 0; }
.gmp-visuals__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .gmp-layout { grid-template-columns: 1fr; }
  .gmp-visuals { flex-direction: row; }
  .gmp-visuals__item { aspect-ratio: 4/3; }
}
@media (max-width: 780px) {
  .gmp-flow .card__body { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gmp-flow .gmp-flow__head { flex: none; }
  .gmp-visuals { flex-direction: column; }
}

/* 品質保証ページ：分析機器一覧の右側に配置する画像列 */
.instruments-layout { display: grid; grid-template-columns: 1fr 280px; gap: 36px; align-items: start; }
.instruments-images { display: flex; flex-direction: column; gap: 24px; position: sticky; top: calc(var(--header-h) + 24px); }
.instruments-images__item { border-radius: 4px; overflow: hidden; aspect-ratio: 4/3; }
.instruments-images__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .instruments-layout { grid-template-columns: 1fr; }
  .instruments-images { position: static; flex-direction: row; }
}
@media (max-width: 600px) {
  .instruments-images { flex-direction: column; }
}

/* 製品情報ページ：構造式画像（製品ごとに縦横比が異なるため object-fit:contain で欠けずに表示） */
.structure-figure { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid var(--c-line); padding: 20px; }
.structure-figure img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-card__cas { font-size: 12.5px; color: var(--c-muted); margin: 2px 0 10px; }
.product-card__use { font-size: 12.5px; color: var(--c-primary); }
.card__en { font-family: var(--font-en); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-primary-2); }
.card__title { font-size: 18px; font-weight: 700; color: var(--c-ink); margin: 10px 0 12px; }
.card__text { font-size: 13.5px; line-height: 2; color: var(--c-text); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--c-primary); border: 1px solid var(--c-primary-2); border-radius: 20px; padding: 2px 12px; margin: 3px 4px 0 0; }
/* 職種タグの色分け（既存パレットの範囲内でバリエーション） */
.tag--solid { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.tag--outline-dark { color: var(--c-primary-dark); border-color: var(--c-primary-dark); }
.tag--muted { background: var(--c-bg-gray); color: var(--c-text); border-color: var(--c-line); }
.tag--on-dark { color: #fff; border-color: rgba(255,255,255,0.7); }
.tag--gradient { color: #fff; border-color: transparent; }

/* 化合物タグ（縦一列）：白地＋左端に紺のアクセントバー、下に薄いグレーの区切り線 */
.tag-bar-list { display: flex; flex-direction: column; }
.tag-bar {
  display: block; width: 100%; box-sizing: border-box; background: #fff; color: #1a2b3c; font-weight: 600; font-size: 13px;
  padding: 10px 20px 10px 18px; border-left: 6px solid var(--c-primary); border-bottom: 1px solid #eee;
}
.tag-bar-list .tag-bar:last-child { border-bottom: none; }

/* 「2）微量、特定不純物除去」「3）特殊原料」統合レイアウト */
.purity-grid { border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden; margin-bottom: 40px; }
.purity-grid__row { display: grid; grid-template-columns: 1fr 1fr; }
.purity-grid__row + .purity-grid__row { border-top: 1px solid var(--c-line); }
.purity-grid__photo { aspect-ratio: 16/10; overflow: hidden; background: #fff; }
.purity-grid__photo img, .purity-grid__photo .placeholder { width: 100%; height: 100%; }
.purity-grid__photo img { object-fit: cover; display: block; }
.purity-grid__photo + .purity-grid__photo { border-left: 1px solid var(--c-line); }
/* タグ一覧横の画像セル：写真2枚を縦に並べてタグ一覧と高さを揃える */
.purity-grid__photo--stack { aspect-ratio: auto; height: 100%; display: flex; flex-direction: column; }
.purity-grid__photo--stack img { flex: 1 1 0; min-height: 0; object-fit: cover; display: block; }
.purity-grid__photo--stack img + img { border-top: 1px solid var(--c-line); }
.purity-grid__text { grid-column: 1 / -1; padding: 28px 32px; }
.purity-grid__text h3 { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.purity-grid__text p { font-size: 14.5px; line-height: 2.1; }
@media (max-width: 680px) { .purity-grid__row { grid-template-columns: 1fr; } .purity-grid__photo + .purity-grid__photo { border-left: 0; border-top: 1px solid var(--c-line); } }

/* 社員紹介カード（先輩の声一覧）：文字量が変わってもカード高さを揺らさない */
.voice-card__catch { font-size: 14.5px; font-weight: 700; line-height: 1.7; color: var(--c-ink); margin: 10px 0; min-height: 76px; }
/* 文節単位でのみ折り返す（語の途中・1〜2文字だけの孤立行を防ぐ） */
.voice-card__catch .ph { display: inline-block; }
.voice-card__meta { font-size: 13px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-card__year { font-size: 12px; color: var(--c-text); opacity: 0.75; margin-top: 2px; }

/* 社員インタビュー個別ページ：シンプルなパンくずのみ（色帯ヒーローは廃止） */
.simple-breadcrumb { margin-top: var(--header-h); padding: 22px 0; border-bottom: 1px solid var(--c-line); }
.breadcrumb--dark { color: var(--c-muted); margin-top: 0; }

/* 組織図ページ：完成済みSVG（箱を線でつないだフローチャート）をそのまま表示。幅が狭い画面では横スクロールで対応 */
.org-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.org-chart-img { display: block; width: 100%; height: auto; min-width: 760px; }

/* テーブル等、幅の広いコンテンツを横スクロール可能にする汎用ラッパー */
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll-wrap .data-table { min-width: 560px; }

/* 横スクロール可能なコンテンツの視覚的誘導：右端フェード＋案内テキスト（.org-chart-wrap・.table-scroll-wrap 等と併用。モバイル幅のみ表示） */
.scroll-x-hint { position: relative; }
.scroll-x-hint::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 36px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--c-bg) 85%);
  pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
.scroll-x-hint__note {
  display: none; font-size: 12px; color: var(--c-muted); text-align: center; margin-top: 10px;
}
@media (max-width: 760px) {
  .scroll-x-hint::after { opacity: 1; }
  .scroll-x-hint__note { display: block; }
}

/* 社員インタビュー個別ページ：Q&A（左）＋会話風景写真（右、質問3つ分の高さに合わせる） */
.qa-profile { display: flex; gap: 40px; align-items: stretch; flex-wrap: wrap; }
.qa-profile__text { flex: 1; min-width: 280px; }
.qa-profile__name { font-size: 20px; font-weight: 700; color: var(--c-ink); margin-bottom: 6px; }
.qa-profile__meta { font-size: 13.5px; color: var(--c-text); margin-bottom: 30px; }
.qa-profile__photo { width: 320px; flex: none; }
/* 本文が長いページでも写真枠が縦に伸びすぎないよう上限を設ける（1100px以上は01/02/07の枠の高さ512pxに揃える。短い本文のページには影響しない） */
.qa-profile__photo { max-height: 604px; }
@media (min-width: 1100px) { .qa-profile__photo { max-height: 512px; } }
.qa-profile__photo .placeholder { height: 100%; min-height: 360px; }
.qa-profile__photo img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; border-radius: 4px; }
.qa-block { padding: 0 0 28px; }
.qa-block:last-child { padding-bottom: 0; }
.qa-block__q { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; font-weight: 700; color: var(--c-ink); margin: 0 0 12px; line-height: 1.6; }
.qa-block__q-mark { font-family: var(--font-en); color: var(--c-primary); font-size: 18px; font-weight: 700; flex: none; line-height: 1.4; }
.qa-block__a { font-size: 14.5px; line-height: 2.1; color: var(--c-text); }
@media (max-width: 860px) { .qa-profile__photo { width: 100%; max-height: none; } .qa-profile__photo .placeholder { min-height: 240px; } .qa-profile__photo img { min-height: 240px; } }

/* 社員インタビュー個別ページ：1日のスケジュール（data-tableと同じ見た目のタイムライン） */
.schedule-table th { width: 120px; }
.interview-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; }

/* strength cards */
.strength-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 56px; }
.strength-card { border-top: 3px solid var(--c-primary); padding: 24px 20px; background: var(--c-bg-gray); }
.strength-card__num { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.18em; color: var(--c-primary-2); }
.strength-card__title { font-size: 16px; font-weight: 700; margin: 10px 0 12px; line-height: 1.6; }
.strength-card__text { font-size: 13px; line-height: 1.95; color: var(--c-muted); }

/* counters */
.counter-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.counter { text-align: center; padding: 30px 12px; border-right: 1px solid var(--c-line); }
.counter:last-child { border-right: 0; }
.counter__label { font-size: 12.5px; color: var(--c-muted); }
.counter__value { font-family: var(--font-en); font-size: clamp(28px, 4vw, 42px); font-weight: 500; color: var(--c-primary); margin-top: 4px; }
.counter__unit { font-size: 13px; font-family: var(--font-sans); color: var(--c-ink); margin-left: 4px; }

/* table */
.data-table th, .data-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c-line); font-size: 13.5px; vertical-align: top; }
.data-table--spaced th, .data-table--spaced td { padding-top: 22px; padding-bottom: 22px; }
.data-table th { width: 160px; color: var(--c-muted); font-weight: 600; background: var(--c-bg-gray); }

/* quote / policy box */
.policy-box { background: var(--c-bg-gray); border-left: 4px solid var(--c-primary); padding: 28px 32px; font-size: 15px; line-height: 2; }

/* 特殊原料コールアウト（受託・研究開発ページ「技術の紹介」）：コーポレートカラーを使った目を引くボックス */
.tech-callout { background: rgba(14, 78, 148, 0.09); border-left: 6px solid var(--c-primary); border-radius: 4px; padding: 28px 32px; font-size: 15px; line-height: 2; color: var(--c-text); }

/* list */
.check-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 2; }
.check-list li::before { content: "―"; position: absolute; left: 0; color: var(--c-primary-2); }

/* form */
.form-row { margin-bottom: 22px; }
.form-row label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 3px; font-family: var(--font-sans); font-size: 14px;
}
.required { color: #c0392b; font-size: 11px; margin-left: 6px; }

/* placeholder note badge (for draft review only) */
.draft-flag {
  display: inline-block; font-size: 11px; font-weight: 700; color: #fff;
  background: #c0392b; padding: 2px 8px; border-radius: 3px; margin-bottom: 10px;
}

/* footer */
.l-footer { background: var(--c-primary); color: #c6cdd6; margin-top: 0; }
.l-footer__main { display: grid; grid-template-columns: 1.2fr 2fr; gap: 60px; padding: 64px 0 48px; }
.l-footer__logo-ja { font-size: 21px; font-weight: 700; color: #fff; letter-spacing: 0.08em; }
.l-footer__logo-en { font-family: var(--font-en); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #8791a0; }
.l-footer__address { margin-top: 20px; font-size: 13.5px; line-height: 2; color: #9aa4b1; }
.l-footer__sitemap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 40px; font-size: 13.5px; }
.l-footer__sitemap a { display: block; width: fit-content; padding: 4px 0; } /* 10/22先方依頼：項目ごとに1行にする（以前は inline-block で横に並んでいた） */
.l-footer__sitemap a::before { content: "－ "; color: var(--c-primary-2); }
.l-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 18px 0; display: flex; justify-content: space-between; font-size: 12px; color: #8791a0; }

@media (max-width: 860px) {
  .card-grid, .card-grid--3, .card-grid--4, .strength-grid { grid-template-columns: 1fr; }
  .card--featured { grid-template-columns: 1fr; height: auto; }
  .card--featured .access-visual { aspect-ratio: 4/3; }
  .counter-grid { grid-template-columns: repeat(2, 1fr); }
  .l-footer__main { grid-template-columns: 1fr; }
  .profile-flex__photo { width: 100%; max-width: 280px; }
  #message .profile-flex__photo { max-width: 420px; }
}

/* ============ 完成版：スクロールアニメーション ============ */
.js-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js-reveal.is-visible { opacity: 1; transform: translateY(0); }
.js-reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal[data-delay="2"] { transition-delay: 0.2s; }

/* ============ 完成版：ヘッダー（スクロール影・ハンバーガー） ============ */
.l-header.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.c-burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; z-index: 120; }
.c-burger span { position: absolute; left: 10px; width: 24px; height: 2px; background: var(--c-ink); transition: 0.3s var(--ease); }
.c-burger span:nth-child(1) { top: 16px; }
.c-burger span:nth-child(2) { top: 22px; }
.c-burger span:nth-child(3) { top: 28px; }
.c-burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.c-burger.is-open span:nth-child(2) { opacity: 0; }
.c-burger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 1240px) {
  .c-burger { display: block; }
  .g-nav {
    display: block; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: #fff; padding: 32px 8%; transform: translateX(100%); transition: transform 0.4s var(--ease);
    overflow-y: auto;
  }
  .g-nav.is-open { transform: translateX(0); }
  .g-nav__list { flex-direction: column; align-items: flex-start; gap: 4px; }
  .g-nav__link { display: block; padding: 16px 0; width: 100%; border-bottom: 1px solid var(--c-line); font-size: 16px; }
  .l-header__lang { display: none; }
  .l-header__contact { padding: 10px 16px; font-size: 12.5px; }
}

@media (max-width: 480px) {
  .l-header__logo-ja { font-size: 14px; }
  .l-header__logo-en { font-size: 9px; letter-spacing: 0.12em; }
  .l-header__logo-full { height: 28px; }
  .l-header__right { gap: 10px; }
  .c-burger { flex-shrink: 0; }
  .l-header__contact { flex-shrink: 0; padding: 8px 10px; font-size: 11px; white-space: nowrap; }
}

/* ============ 完成版：プレースホルダー（素材未着手のブロック） ============ */
.placeholder:not(img) {
  background: var(--c-bg-gray);
  border: 1px solid var(--c-line);
  color: var(--c-muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font-size: 12.5px; letter-spacing: 0.05em; border-radius: 4px; gap: 10px; padding: 20px;
}
.placeholder:not(img)::before {
  content: "";
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary-2), var(--c-primary));
  opacity: 0.15;
}
.placeholder__label { font-family: var(--font-en); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-primary-2); }

/* ============ 会社情報：兄弟ページ用サブナビ ============ */
.sub-nav { border-bottom: 1px solid var(--c-line); background: var(--c-bg-gray); }
.sub-nav__list { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0; }
.sub-nav__link {
  font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 20px;
  background: #fff; border: 1px solid var(--c-line); color: var(--c-text);
}
.sub-nav__link:hover { border-color: var(--c-primary-2); color: var(--c-primary); }
.sub-nav__link.is-current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ============ ヘッダー：会社情報メガメニュー ============ */
.g-nav__item { position: relative; }
.g-nav__link .g-nav__arrow { font-size: 9px; margin-left: 4px; opacity: 0.6; transition: transform 0.25s var(--ease); }
.g-nav__item.is-open .g-nav__link .g-nav__arrow { transform: rotate(180deg); }
.g-nav__toggle { display: none; }

.mega-menu {
  position: fixed; top: var(--header-h); left: 0; right: 0;
  background: var(--c-primary-dark);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.g-nav__item.is-open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-menu__inner { padding: 32px 5% 40px; }
.mega-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.mega-menu__title { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #fff; }
.mega-menu__title:hover { color: #a7c7ec; }
.mega-menu__title-arrow { font-family: var(--font-en); color: #a7c7ec; transition: transform 0.25s var(--ease); }
.mega-menu__title:hover .mega-menu__title-arrow { transform: translateX(4px); }
.mega-menu__close {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; cursor: pointer; transition: 0.25s var(--ease); flex-shrink: 0;
}
.mega-menu__close span {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 1px; background: #fff; transition: background 0.25s var(--ease);
}
.mega-menu__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mega-menu__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.mega-menu__close:hover { background: #fff; border-color: #fff; }
.mega-menu__close:hover span { background: var(--c-primary-dark); }

.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 24px; }
.mega-card { display: block; transition: transform 0.3s var(--ease); }
.mega-card:hover { transform: translateY(-4px); }
.mega-card__photo {
  display: block; aspect-ratio: 8/3; margin-bottom: 12px; border-radius: 4px; overflow: hidden; transition: transform 0.4s var(--ease);
}
.mega-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega-card:hover .mega-card__photo { transform: scale(1.03); }
.mega-card__title {
  display: block; font-size: 14.5px; font-weight: 700; color: #fff; transition: color 0.25s var(--ease);
}
.mega-card__title::after {
  content: "→"; display: inline-block; margin-left: 6px; color: #a7c7ec;
  opacity: 0; transform: translateX(-4px); transition: 0.25s var(--ease);
}
.mega-card:hover .mega-card__title { color: #a7c7ec; }
.mega-card:hover .mega-card__title::after { opacity: 1; transform: translateX(0); }
.mega-card__desc { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-top: 4px; }

@media (max-width: 1240px) {
  .mega-menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    background: none; border: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease);
    width: 100%;
  }
  .g-nav__item.is-open .mega-menu { max-height: 1400px; }
  .mega-menu__inner { padding: 4px 0 4px 16px; }
  .mega-menu__head { display: none; }
  .mega-grid { display: block; }
  .mega-card__photo, .mega-card__desc { display: none; }
  .mega-card { padding: 12px 0; border-bottom: 1px solid var(--c-line); }
  .mega-card:hover { transform: none; }
  .mega-card__title { font-size: 14.5px; font-weight: 500; color: var(--c-ink); }
  .mega-card:hover .mega-card__title { color: var(--c-ink); }
  .mega-card__title::after { display: none; }
  .g-nav__item { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; }
  .g-nav__item .g-nav__link { flex: 1; }
  .g-nav__toggle {
    display: block; width: 40px; height: 40px; background: none; border: 1px solid var(--c-line); border-radius: 4px;
    color: var(--c-ink); font-size: 12px; transition: transform 0.3s var(--ease);
  }
  .g-nav__item.is-open .g-nav__toggle { transform: rotate(180deg); }
}

/* ============ ヘッダー：採用情報 テキストのみのシンプルドロップダウン ============ */
.simple-menu {
  position: fixed; top: var(--header-h); left: 0; right: auto;
  min-width: 200px; background: #fff; border: 1px solid var(--c-line); border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  max-height: none; overflow: visible; margin-top: 14px;
}
.simple-menu__inner { padding: 8px; display: flex; flex-direction: column; }
.simple-menu__link { display: block; padding: 11px 16px; font-size: 13.5px; font-weight: 500; color: var(--c-ink); border-radius: 4px; }
.simple-menu__link:hover { background: var(--c-bg-gray); color: var(--c-primary); }
@media (max-width: 1240px) {
  .simple-menu { position: static; min-width: 0; background: none; border: 0; box-shadow: none; border-radius: 0; margin-top: 0; max-height: 0; overflow: hidden; }
  .simple-menu__inner { padding: 4px 0 4px 16px; }
  .simple-menu__link { color: var(--c-text); padding: 10px 0; border-bottom: 1px solid var(--c-line); border-radius: 0; }
  .simple-menu__link:hover { background: none; color: var(--c-primary); }
}

@media (max-width: 600px) {
  .mega-grid { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ 受託・研究開発について：TOPページ準拠のミニカード列 ============ */
.rd__lead { max-width: 760px; font-size: 15px; line-height: 2.3; margin-bottom: 56px; }
.rd__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rd-card {
  background: #fff;
  box-shadow: 0 8px 32px rgba(29, 29, 31, 0.06);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.rd-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(29, 29, 31, 0.12); }
.rd-card__thumb { overflow: hidden; aspect-ratio: 3 / 2; }
.rd-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.rd-card:hover .rd-card__thumb img { transform: scale(1.07); }
.rd-card__body { padding: 26px 28px 30px; }
.rd-card__title { font-size: 18px; font-weight: 700; color: var(--c-ink); display: flex; align-items: center; justify-content: space-between; }
.rd-card__title .c-btn__arrow { color: var(--c-primary); }
.rd-card__text { font-size: 13.5px; margin-top: 10px; line-height: 2; color: var(--c-muted); }
.rd__btnwrap { margin-top: 56px; text-align: center; }
@media (max-width: 860px) { .rd__cards { grid-template-columns: 1fr; } }

/* ============ 改善実施例など：濃色背景のボックス紹介セクション（TOPページ準拠） ============ */
.c-sec-head--center { text-align: center; }
.c-sec-head--white .c-sec-head__en { color: #a7c7ec; }
.c-sec-head--white .c-sec-head__en::before { background: #a7c7ec; }
.c-sec-head--white .c-sec-head__ja { color: #fff; }
.qa { position: relative; padding: 110px 0; background: var(--c-bg-dark); color: #fff; }
.qa > * { position: relative; }
.qa__lead { max-width: 760px; margin: -16px auto 56px; text-align: center; font-size: 15px; line-height: 2.3; opacity: 0.92; }
.qa__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.qa__cards--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
.qa-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
  padding: 40px 32px;
  text-align: center;
  transition: background 0.35s, transform 0.35s var(--ease);
}
.qa-card:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-5px); }
.qa-card__icon { width: 56px; height: 56px; margin: 0 auto 20px; }
.qa-card__icon svg { width: 100%; height: 100%; fill: none; stroke: #a7c7ec; stroke-width: 1.3; }
.qa-card__title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.qa-card__text { font-size: 13.5px; line-height: 2; opacity: 0.85; text-align: left; }
.qa__btnwrap { margin-top: 56px; text-align: center; }
.c-btn--white { background: #fff; color: var(--c-ink); }
@media (max-width: 860px) { .qa__cards, .qa__cards--2 { grid-template-columns: 1fr; } }

/* トップへ戻るボタン：画面右下固定、一定量スクロール後に表示 */
.c-totop {
  position: fixed; right: 28px; bottom: 28px; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-primary); color: #fff; box-shadow: 0 4px 16px rgba(8, 47, 94, 0.25);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.25s, bottom 0.2s var(--ease);
}
.c-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.c-totop:hover { background: var(--c-primary-dark); }
.c-totop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 480px) {
  .c-totop { right: 16px; bottom: 16px; width: 42px; height: 42px; }
  .c-totop svg { width: 18px; height: 18px; }
}

/* スマホ幅（600px以下）
   - 横スクロールする表：語の途中（「百万円」「3月期」など）で折らない
   ※ text-wrap（pretty / balance）は使わない：iPhoneのSafariでは段落全体の行の長さを揃えようとして
     言葉の途中で改行され右側が大きく空くため（10/21）。短い行が残る箇所は文中の区切りで個別に調整する */
@media (max-width: 600px) {
  .table-scroll-wrap :is(th, td) { word-break: keep-all; }
}

/* ============================================================
   10/21 スマホ表示の見直し（相互薬工 鈴木様ご指摘：社長挨拶・組織図ほか全体）
   ============================================================ */
/* 横スクロールする図・表の右端フェードを止める：スクロールすると白いもやが図の上を一緒に動き、残像のように見えるため。
   「→ 横にスクロールできます」の案内文はそのまま表示する */
@media (max-width: 760px) {
  .scroll-x-hint::after { content: none; }
}
@media (max-width: 600px) {
  /* 「項目名＋内容」の表（会社概要・沿革・募集要項など）：項目名の列を細くし、内容の列を広げて細かい折り返しを減らす */
  .data-table:not(.schedule-table) tbody th { width: 7.2em; padding-left: 12px; padding-right: 10px; }
  .data-table tbody th + td { padding-left: 12px; padding-right: 12px; }
  /* フッターのページ一覧：3列だと項目名が途中で折り返すため2列にする。著作権表示と注記は縦に並べる */
  .l-footer__sitemap { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .l-footer__sitemap a { display: block; }
  .l-footer__bottom { flex-direction: column; gap: 6px; }
  /* 受託・研究開発「技術一覧」：2列だと反応名が細かく折り返すため1列にする */
  .check-list[style*="columns:2"] { columns: 1 !important; }
  /* PCの行の長さに合わせて入れた改行は、スマホでは改行させずに文章を流す */
  .pc-br { display: none; }
  /* 組織図：760px幅のままだと箱の文字が約7.6pxと小さすぎるため、スマホでは1000px幅（文字約10px）で表示し、横スクロールで見てもらう */
  .org-chart-img { min-width: 1000px; }
}

/* 10/21 幅の狭いスマホ（画面表示の拡大を使ったiPhoneなど、幅320〜400px程度）の見直し */
@media (max-width: 600px) {
  /* 表の項目名列：「特殊反応装置」など6文字の項目名が1行に収まる幅にする */
  .data-table:not(.schedule-table) tbody th { width: 8em; }
  /* 分析機器の表（見出し行「機器名／備考」）：機器名の列を広げ、機器名が細かく折り返さないようにする */
  #instruments .data-table th:first-child { width: 64%; }
  #instruments .data-table :is(th, td) { padding-left: 10px; padding-right: 10px; }
  /* 社員インタビューの1日の流れ（時刻＋内容の表）：時刻の列が160pxと広く、内容が細かく折り返すため、時刻が1行に収まる幅にする */
  .schedule-table tbody th { width: 8.4em; padding-left: 12px; padding-right: 10px; white-space: nowrap; }
}
@media (max-width: 360px) {
  /* 分析機器の表：備考の列（「吸光・発光・蛍光測定可能」など）が細かく折り返さないよう、機器名の列を少し狭める */
  #instruments .data-table th:first-child { width: 58%; }
  /* 幅の狭いスマホでは「項目名＋内容」の表（会社概要・沿革・募集要項・設備一覧など）を、項目名を上・内容を下の縦並びにして、内容を横幅いっぱいで読めるようにする */
  .data-table:not(.schedule-table) tr:has(> th:first-child + td) { display: block; }
  .data-table:not(.schedule-table) tr:has(> th:first-child + td) > :is(th, td) { display: block; width: auto; border-bottom: 0; }
  .data-table:not(.schedule-table) tr:has(> th:first-child + td) > th { padding: 10px 12px 6px; }
  .data-table:not(.schedule-table) tr:has(> th:first-child + td) > td { padding: 8px 12px 14px; border-bottom: 1px solid var(--c-line); }
}
@media (max-width: 420px) {
  /* フッターのページ一覧：2列だと「品質保証・品質管理」などが途中で折り返すため1列にする */
  .l-footer__sitemap { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  /* 製品情報の製品カード：2列だと化学名が細かく折り返すため1列にする */
  body .products-page .card-grid.card-grid--4 { grid-template-columns: 1fr; }
}

@media (max-width: 374px) {
  /* ヘッダー：ロゴ画像が縦横比の崩れたまま「お問い合わせ」ボタンにくっつくため、縦横比を保ったまま縮め、ボタンとのすき間を空ける */
  .l-header__logo { flex: 0 1 auto; min-width: 0; margin-right: 8px; }
  .l-header__logo-full { height: auto; width: 100%; max-width: 169px; }
  .l-header__right { gap: 6px; }
  .l-header__contact { padding: 7px 8px; font-size: 10.5px; }
}

/* 10/21 メニューが≡になる幅（1240px以下）では、ヘッダーのロゴと≡の左右の端を、下の見出し・本文（.l-inner）の左右の端に揃える */
@media (max-width: 1240px) {
  .l-header__inner { max-width: 1120px; padding: 0 5%; }
  /* ≡ボタンは線の右側に10pxの余白があるため、その分だけ右へ出して線の右端を本文の右端に合わせる */
  .c-burger { margin-right: -10px; }
  /* ≡を押して開くメニュー：左右の端をロゴ・本文と同じ位置に揃え、各項目の区切り線を同じ長さ（横幅いっぱい）にする。
     ▾ボタンは右端に縦一列で揃える */
  .g-nav { padding: 24px 5%; }
  .g-nav__list { align-items: stretch; gap: 0; }
  .g-nav__list > li { width: 100%; border-bottom: 1px solid var(--c-line); }
  .g-nav__list > li > .g-nav__link { border-bottom: 0; }
  .g-nav__toggle { flex: none; }
}

/* 改行調整（10/21）：見出し・短い項目は文節の区切り（<wbr>）でだけ折り返し（.bxk）、紹介文・長い本文は行の終わりまで埋めて文末の数文字をまとめる（.bx）。数字の範囲（24～42インチなど）は途中で折り返さない（.bxn）。
   言葉の途中での改行や、最後の行が1〜2文字だけになるのを防ぐ（Chrome・Safariとも同じ動き） */
body { line-break: strict; } /* 「っ」「ャ」「ー」などが行の頭に来ないようにする（禁則処理を厳しめに） */
.bx { display: inline-block; }
.bxk { word-break: keep-all; overflow-wrap: anywhere; }
.bxn { white-space: nowrap; }
/* 左揃えの長い本文は両端揃えにして、行の終わりの小さなでこぼこ（「（」が次の行に送られたときなど）をなくす */
.tj { text-align: justify; }
/* 沿革の表（写真の横に並ぶ表）：タブレット幅（約700〜1000px）で表が260px前後まで細くなり、内容が2〜4文字ずつ折り返していたため、
   表の幅が420px未満になるときは写真の下に回して横幅いっぱいで表示する */
#page-company-history .profile-flex > div:has(> table) { min-width: min(420px, 100%) !important; }
/* フッターのページ一覧：タブレット幅（約880〜1060px）で列が細くなり、「コンプライアンス宣言」「品質保証・品質管理」などが途中で折り返していたため、
   列の間隔を少し詰め、特に細くなる幅（861〜1019px）では2列にする */
@media (min-width: 601px) and (max-width: 1100px) {
  .l-footer__sitemap { column-gap: 28px; }
}
@media (min-width: 861px) and (max-width: 1019px) {
  .l-footer__sitemap { grid-template-columns: 1fr 1fr; }
}
/* 社員インタビューの写真だけの区切り（作業風景・正面写真）：スマホでは写真が横長の細い帯（高さ約130px）になり、
   上下の余白（約76pxずつ）がそのままだと白い空きが大きく見えるため、写真を横3：縦2にして上下の余白を詰める（10/21） */
@media (max-width: 600px) {
  .l-section#scene-work, .l-section#scene-front { padding-top: 28px; padding-bottom: 28px; }
  #scene-work .placeholder--wide, #scene-front .placeholder--wide { aspect-ratio: 3 / 2; }
}
/* 社員インタビューの質問と答え：860px以下（写真と文章が上下に並ぶ幅）では、1つ目のまとまりの写真と2つ目のまとまりの写真が続けて並んでいたため、
   2つ目のまとまりは「文章 → 写真」の順にして、写真が続かないようにする（10/22） */
@media (max-width: 860px) {
  .qa-profile + .qa-profile .qa-profile__photo { order: 1; }
}
/* スマホ・タブレット（1240px以下）の英語切り替え：ヘッダーの「JP / EN」は非表示のため、≡で開くメニューのいちばん上に置く（10/22） */
.g-nav__lang { display: none; }
@media (max-width: 1240px) {
  .g-nav__lang { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; border-bottom: 1px solid var(--c-line); font-family: var(--font-en); font-size: 15px; letter-spacing: 0.12em; color: var(--c-muted); }
  .g-nav__lang a { display: inline-block; padding: 6px 4px; }
  .g-nav__lang .is-active { color: var(--c-ink); font-weight: 600; }
}
/* ≡で開くメニュー：幅1121〜1240px（iPadの横向きなど）で、メニューの左右の端がロゴ・本文の端（中央寄せの1120px枠）とずれていたため、同じ端に揃える（10/22） */
@media (max-width: 1240px) {
  .g-nav { padding-left: calc((100% - min(100%, 1120px)) / 2 + 5%); padding-right: calc((100% - min(100%, 1120px)) / 2 + 5%); }
}
/* 社長挨拶の署名（10/22先方依頼）：「相互薬工株式会社」「代表取締役社長」を本文より大きくし、直筆署名もそれに合わせて少し大きくする */
.greeting-sign { display: block; text-align: left; } /* 本文は両端揃え（.tj）だが、署名の行は字間が広がらないよう左揃えにする */
.greeting-sign__company { font-size: 20px; letter-spacing: 0.06em; }
.greeting-sign__title { font-weight: 400; font-size: 15px; letter-spacing: 0.05em; }
.greeting-sign__img { display: inline-block; height: 80px; width: auto; vertical-align: middle; }
@media (max-width: 600px) {
  .greeting-sign__company { font-size: 18px; }
  .greeting-sign__title { font-size: 14px; }
  .greeting-sign__img { height: 70px; }
}
/* 会社概要「関連会社」（10/22先方依頼）：社名を「株式会社ソーゴ・／トレーディング」のように区切りで折り返す。スマホでは社名の列を少し広げ、カタカナの途中で切れないようにする */
@media (max-width: 600px) {
  .data-table.data-table--group tbody th { width: 9em; }
}

/* ============================================================
   英語ページ（en/index.html）用の指定（10/27）
   html[lang="en"] のときだけ効く。日本語版の見え方は変えない
   ============================================================ */
/* 英単語の途中で改行しない。日本語用の禁則・改行の仕掛けを英語では外す */
html[lang="en"] body { line-break: auto; word-break: normal; overflow-wrap: normal; }
html[lang="en"] .bx { display: inline; }
html[lang="en"] .bxk { word-break: normal; overflow-wrap: normal; }
html[lang="en"] .bxn { white-space: normal; }
html[lang="en"] .tj { text-align: left; }
html[lang="en"] .table-scroll-wrap :is(th, td) { word-break: normal; }
/* 製品の化学名・URLなど、空白のない長い語だけは枠からはみ出さないよう折り返す */
html[lang="en"] .card__spec, html[lang="en"] a[href^="http"] { overflow-wrap: anywhere; }
/* 見出し・ボタン・表の項目名などの短い文：最後の行が1単語だけにならないよう、行の長さをそろえる */
html[lang="en"] :is(h1, h2, h3, h4, th, .c-btn, .breadcrumb, .counter__label, .card__title, .case-flow__node, .mega-card__title, .mega-card__desc, .simple-menu__link) { text-wrap: balance; }
/* トップのキャッチコピー：英語は文字数が多いため、字間を詰めて大きさを抑え、各行が途中で折り返さないようにする */
html[lang="en"] #page-home .hero__catch { font-size: min(clamp(34px, 5.2vw, 62px), 9.2vw); letter-spacing: 0.01em; line-height: 1.35; }
html[lang="en"] #page-home .hero__catch .line span { white-space: nowrap; }
/* フッター：英語は項目名が長いため、列の幅を中身に合わせ、PC・タブレットでは1項目1行にする（日本語版と同じ考え方） */
html[lang="en"] .l-footer__main { grid-template-columns: auto 1fr; }
html[lang="en"] .l-footer__logo-ja { letter-spacing: 0.02em; white-space: nowrap; }
html[lang="en"] .l-footer__sitemap { grid-template-columns: repeat(3, max-content); justify-content: start; }
html[lang="en"] .l-footer__sitemap a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1019px) {
  html[lang="en"] .l-footer__main { grid-template-columns: 1fr; gap: 40px; }
  html[lang="en"] .l-footer__sitemap { grid-template-columns: repeat(3, max-content); }
}
@media (max-width: 860px) {
  html[lang="en"] .l-footer__main { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 760px) {
  html[lang="en"] .l-footer__sitemap { grid-template-columns: repeat(2, max-content); }
}
@media (max-width: 600px) {
  html[lang="en"] .l-footer__sitemap { grid-template-columns: 1fr 1fr; }
  html[lang="en"] .l-footer__sitemap a { white-space: normal; }
}
@media (max-width: 420px) {
  html[lang="en"] .l-footer__sitemap { grid-template-columns: 1fr; }
}
/* トップ「強み」の見出し：英語は字間を少し詰め、カードの幅に収める */
html[lang="en"] #page-home .strength-card__title { letter-spacing: 0.01em; }