/* ==================================================================
   三木鐵工所 · 会社概要ページ (/company/) 専用
   ------------------------------------------------------------------
   本文（固定ページ「会社概要」）の <style> から移したもの。
   共通の土台は miki-pages.css にあり、こちらが後から読み込まれる。

   セレクタは必ず .miki-company で始めること。
   前置きを外すと他のページの表示まで変わってしまう。
   ================================================================== */


/* ---------- 書体 ─ このページはヒーローを除いてゴシックにそろえる ----------
   2026-09-05、クライアント要望。会社概要ページだけ明朝をやめる。

   土台の miki-pages.css は `.miki-company` に明朝を指定しているが、
   あれは4ページ共通の指定なので触れない。ここで同じ (0,1,0) の
   セレクタで上書きすると、**このページだけ**が変わる
   （page-company.css のほうが後から読み込まれるため勝つ）。

   ★ 明朝のまま残すのは次の4箇所。指示により意図的に残している。
       .hero-title      … 「初代から、今へ。」
       .hero-lead       … その下の紹介文
       .closing h2      … 「はじめてのご相談も、お気軽にお問い合わせください。」
       .closing .call p … その下の一文
     締めの2つは、他の3ページ（加工技術・設備紹介・加工実績）の締めと
     同じ見え方にそろえるため。ゴシックにしないこと。

   var(--serif) は「明朝」の意味のまま残してある（ヒーローが使う）。
   ゴシックにしたいときは var(--gothic) を使うこと。
   --serif の中身を書き換えて済ませないのは、名前と中身が食い違うと
   あとから読む人が必ず間違えるため。 */
.miki-company{
  --gothic:'Noto Sans JP', sans-serif;
  font-family:var(--gothic);
}


/* ---------- 親テーマの打ち消し ----------
   旧エディタ拡張の 旧エディタ拡張のラッパー h2 { text-align:center } を戻す。
   （このページの本文だけに入っていた指定） */
.miki-company h1,
.miki-company h2,
.miki-company h3,
.miki-company h4,
.miki-company h5,
.miki-company h6{
  text-align:left !important;
}

/* ヒーロータイトルだけはセンター */
.miki-company .hero-title{
  text-align:center !important;
}


/* ---------- HERO ----------
   実写工場写真をシネマティック処理して背景に。 */
.miki-company .hero{
  position:relative;
  background:#141414;color:var(--paper);
  overflow:hidden;
}

/* 背景写真。本文側に <img class="hero-bg"> として置いてあるので、
   お客様がメディアライブラリから差し替えられる。
   ここは「背面に敷く」役割だけを持つ。 */
.miki-company .hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
}

/* ★ 写真の上に敷く黒フィルター（2026-09-05 追加）。
   それまでのヒーロー写真は暗く加工された実写だったため不要だったが、
   明るい外観写真に差し替えたので白い文字が読めなくなった。

   50% にした根拠（実測）:
     旧写真 miki-company-hero-1536x864.png の平均輝度 70.1
     新写真 miki-exterior-2026.webp        の平均輝度 140.3
     70.1 / 140.3 = 0.50 → 黒を 50% 重ねると旧写真と同じ明るさになる。
   ★ 写真を差し替えたらこの数値も測り直すこと。
     必要な濃さは写真の明るさで変わる。

   z-index は 写真0 → このフィルター1 → 文字（.inner）2 の順。 */
.miki-company .hero::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(20,20,20,.5);
  z-index:1;
  pointer-events:none;
}

.miki-company .hero .inner{
  position:relative;z-index:2;
  max-width:1440px;margin:0 auto;
  min-height:60vh;
  padding:56px 48px 80px;
  display:flex;flex-direction:column;justify-content:flex-start;
}

.miki-company .hero .eyebrow{
  display:flex;align-items:center;gap:16px;
  font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.36em;color:rgba(246,244,239,.75);
  margin-bottom:40px;
}

.miki-company .hero .eyebrow .num{color:var(--accent-soft)}

.miki-company .hero .eyebrow .rule{flex:0 0 60px;height:1px;background:rgba(246,244,239,.4)}

.miki-company .hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(36px, 5vw, 80px);
  line-height:1.15;letter-spacing:.02em;color:var(--paper);
  text-shadow:0 2px 32px rgba(0,0,0,.55);
  text-align:center;
}

.miki-company .hero-title .en{
  display:block;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(14px, 1.3vw, 20px);
  letter-spacing:.5em;color:rgba(246,244,239,.78);
  margin-bottom:28px;text-transform:uppercase;
  text-shadow:none;
}

.miki-company .hero-title em{
  font-style:normal;color:var(--accent-soft);
}

.miki-company .hero-bottom{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  margin-top:56px;padding-top:40px;
  border-top:1px solid rgba(246,244,239,.28);
  align-items:end;
}

.miki-company .hero-lead{
  /* ★ ヒーローは明朝のまま。上の「書体」の項を参照 */
  font-family:var(--serif);
  max-width:520px;
  font-size:16px;line-height:2.15;color:rgba(246,244,239,.88);
  font-weight:400;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}

.miki-company .hero-meta{
  justify-self:end;text-align:right;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:rgba(246,244,239,.72);
  line-height:2;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}

.miki-company .hero-meta strong{color:var(--accent-soft);font-weight:500;letter-spacing:.28em;display:block;margin-bottom:6px}


/* ---------- TIMELINE（沿革） ---------- */
.miki-company .timeline{
  background:var(--paper);
  padding:120px 48px 80px;
}

.miki-company .timeline .inner{max-width:1200px;margin:0 auto}

.miki-company .timeline .eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:12px;letter-spacing:.36em;color:var(--ink-3);font-weight:500;
  margin-bottom:56px;text-transform:uppercase;
}

.miki-company .timeline .eyebrow .rule{flex:0 0 40px;height:1px;background:var(--ink-3);opacity:.4}

.miki-company .timeline-row{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:48px;
  position:relative;
  padding-top:40px;
}

.miki-company .timeline-row::before{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:1px;background:var(--line);
}

.miki-company .tl-node{
  position:relative;
  padding-top:32px;
}

.miki-company .tl-node::before{
  content:"";
  position:absolute;left:0;top:-6px;
  width:11px;height:11px;
  background:var(--accent);
  border-radius:50%;
}

.miki-company .tl-node.past::before{background:var(--ink)}

.miki-company .tl-node .year{
  font-family:var(--sans);font-weight:200;
  font-size:clamp(52px, 6vw, 88px);
  line-height:.95;letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:14px;
}

.miki-company .tl-node .en{
  font-family:var(--sans);font-size:11px;letter-spacing:.36em;color:var(--accent);font-weight:500;text-transform:uppercase;
  display:block;margin-bottom:10px;
}

.miki-company .tl-node .label{
  font-family:var(--gothic);font-size:19px;line-height:1.6;color:var(--ink);font-weight:600;
  letter-spacing:.02em;
}

/* 説明文は明朝13pxの薄いグレーで読みにくかったため、
   ゴシック化にあわせて15pxにし、色も一段濃くした（2026-09-05） */
.miki-company .tl-node p{
  margin-top:10px;font-size:15px;line-height:1.95;color:var(--ink-2);
}


/* ---------- COMPANY OVERVIEW（会社概要表） ---------- */
.miki-company .overview{
  background:var(--paper);
  padding:80px 48px 120px;
}

.miki-company .overview .inner{max-width:1200px;margin:0 auto}

.miki-company .overview .head{
  display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:baseline;
  margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid var(--ink);
}

.miki-company .overview .head .num{
  font-family:var(--sans);font-weight:200;
  font-size:clamp(56px, 7vw, 100px);
  line-height:.9;letter-spacing:-.03em;
  color:var(--ink);
}

.miki-company .overview .head .num sub{
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--ink-3);
  vertical-align:baseline;margin-left:10px;font-weight:400;
}

.miki-company .overview .head .headings h2{
  font-family:var(--gothic);font-weight:600;
  font-size:clamp(24px, 2.6vw, 36px);line-height:1.4;letter-spacing:.02em;color:var(--ink);
}

.miki-company .overview .head .headings .eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:12px;letter-spacing:.36em;color:var(--ink-3);font-weight:500;
  margin-bottom:16px;text-transform:uppercase;
}

.miki-company .overview .head .headings .eyebrow .rule{flex:0 0 40px;height:1px;background:var(--ink-3);opacity:.4}


.miki-company .spec-list{
  display:grid;grid-template-columns:1fr;
}

.miki-company .spec-list .row{
  display:grid;grid-template-columns:12em 1fr;gap:32px;
  padding:20px 0;border-bottom:1px dashed var(--line);
  align-items:baseline;
}

.miki-company .spec-list .row:last-child{border-bottom:none}

.miki-company .spec-list .k{
  font-family:var(--sans);font-size:11px;letter-spacing:.36em;color:var(--ink-3);font-weight:600;text-transform:uppercase;
}

/* 会社概要の表だけ、日本語をゴシックの太めにする（クライアント要望⑥）。
   対象は「日本語ラベル（.k .ja）」と「値（.v）」の2つだけ。
   英字ラベル（Barlow）・等幅（JetBrains Mono）・バッジ（Barlow）は
   表の骨格なのでそのまま。
   Noto Sans JP 600 は親テーマが既に読み込んでいるので追加取得は無い。 */
/* 2026-09-05: 表から英字ラベル（COMPANY / REPRESENTATIVE …）を外し、
   日本語だけにした。英字が無くなったので上マージンは不要。
   .k 側の Barlow / letter-spacing / uppercase は、当たる文字が
   無くなったので効かない（残しておいても害はないので触っていない）。 */
/* 2026-09-05: 文字が小さいという指摘を受けて2度大きくした。
   15/16 → 16/18 → **20/22**。
   このページの他の本文は17〜20pxで、16pxの表はサイト内で最も小さい部類だった。

   ★ 英字社名と TEL/FAX の等幅（JetBrains Mono）もやめてゴシックにした。
     表の中で書体が2種類あると目立つため。値と同じサイズにしている。
     TEL と FAX の数字の開始位置は等幅では完全に一致していたが、
     ゴシックでは 0.64px ずれる。実測のうえ、見て分からない量なので許容した。
     （揃えたければ「TEL」「FAX」を span で囲って幅を固定するしかなく、
      本文のHTMLを増やすことになる） */
.miki-company .spec-list .k .ja{
  display:block;font-family:var(--gothic);font-size:20px;letter-spacing:.08em;color:var(--ink);font-weight:600;text-transform:none;
  margin-top:0;
}

.miki-company .spec-list .v{
  font-family:var(--gothic);font-size:22px;line-height:2;color:var(--ink);letter-spacing:.02em;font-weight:600;
}

/* 表の中だけ「等幅」をやめる。クラス名は本文HTMLにあるので変えられない。
   他の .mono（アクセスのTEL/FAX・沿革下の注記など）は等幅のまま。 */
.miki-company .spec-list .v .mono{font-family:var(--gothic);font-size:22px;letter-spacing:.02em}

.miki-company .spec-list .v em{font-style:normal;color:var(--accent);font-weight:600}

/* .badge（業務内容のボタン風タグ）は 2026-09-05 に廃止。
   ボタンに見えて押せるように誤解されるため、地の文にした。
   区切りは中黒。サイト内の他の箇所（「旋盤・マシニング・ワイヤー放電加工を軸に」）
   と同じ書き方に揃えている。
   使う要素が無くなったので規則ごと削除した。戻すときは git 履歴から。 */


/* ---------- CLIENTS（主要取引先） ---------- */
.miki-company .clients{
  background:var(--ink);color:var(--paper);
  padding:120px 48px;
}

.miki-company .clients .inner{max-width:1200px;margin:0 auto}

.miki-company .clients .head{margin-bottom:64px}

.miki-company .clients .eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:12px;letter-spacing:.36em;color:rgba(246,244,239,.65);font-weight:500;
  margin-bottom:24px;text-transform:uppercase;
}

.miki-company .clients .eyebrow .rule{flex:0 0 40px;height:1px;background:rgba(246,244,239,.35)}

.miki-company .clients h2{
  font-family:var(--gothic);font-weight:600;
  font-size:clamp(24px, 2.6vw, 36px);line-height:1.5;letter-spacing:.02em;color:var(--paper);
  max-width:22em;
}

.miki-company .clients-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:0;
  border-top:1px solid rgba(246,244,239,.18);
}

.miki-company .client-item{
  padding:24px 0;
  display:flex;align-items:baseline;gap:24px;
  border-bottom:1px solid rgba(246,244,239,.18);
  font-family:var(--gothic);font-size:17px;color:var(--paper);letter-spacing:.02em;font-weight:500;
}

.miki-company .client-item:nth-child(odd){padding-right:32px;border-right:1px solid rgba(246,244,239,.18)}

.miki-company .client-item:nth-child(even){padding-left:32px}

.miki-company .client-item .num{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:rgba(246,244,239,.5);font-weight:400;
  min-width:2.5em;
}

.miki-company .client-item .name{flex:1}


.miki-company .banks-note{
  margin-top:48px;padding-top:24px;
  border-top:1px solid rgba(246,244,239,.18);
  display:flex;flex-wrap:wrap;gap:32px;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:rgba(246,244,239,.6);
}

.miki-company .banks-note strong{
  color:var(--accent-soft);font-weight:500;letter-spacing:.28em;margin-right:12px;
}


/* ---------- ACCESS / MAP（アクセス） ---------- */
.miki-company .access{
  background:var(--paper);
  padding:120px 48px;
}

.miki-company .access .inner{max-width:1200px;margin:0 auto}

.miki-company .access .head{
  display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:baseline;
  margin-bottom:56px;
}

.miki-company .access .head .num{
  font-family:var(--sans);font-weight:200;
  font-size:clamp(56px, 7vw, 100px);
  line-height:.9;letter-spacing:-.03em;color:var(--ink);
}

.miki-company .access .head .num sub{
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--ink-3);
  vertical-align:baseline;margin-left:10px;font-weight:400;
}

.miki-company .access .head .eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:12px;letter-spacing:.36em;color:var(--ink-3);font-weight:500;
  margin-bottom:12px;text-transform:uppercase;
}

.miki-company .access .head .eyebrow .rule{flex:0 0 40px;height:1px;background:var(--ink-3);opacity:.4}

.miki-company .access .head h2{
  font-family:var(--gothic);font-weight:600;
  font-size:clamp(24px, 2.6vw, 36px);line-height:1.4;letter-spacing:.02em;color:var(--ink);
}


.miki-company .access-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;
  align-items:stretch;
}

.miki-company .access-info{
  display:flex;flex-direction:column;justify-content:center;gap:32px;
}

.miki-company .access-info .photo{
  aspect-ratio:4/3;overflow:hidden;background:#111;
}

.miki-company .access-info .photo img{width:100%;height:100%;object-fit:cover}

.miki-company .access-info .details h3{
  font-family:var(--gothic);font-weight:600;font-size:20px;letter-spacing:.06em;
  color:var(--ink);margin-bottom:14px;
}

/* ★ 〒・住所は <p> に入っていない（本文の <p> が保存時に外れており、
   .details の直下のテキストになっている）。下の `.details p` では
   当たらないので、.details そのものに指定する。
   実測（getComputedStyle）で確認済み。セレクタだけ見て判断しないこと。 */
.miki-company .access-info .details{
  font-size:16px;line-height:2;color:var(--ink-2);font-weight:500;
}

.miki-company .access-info .details p{
  font-family:var(--gothic);font-size:15px;line-height:2.1;color:var(--ink-2);
}

/* アクセスの TEL/FAX も等幅をやめる（2026-09-05・指示）。
   表と同じ扱い。サイズは同じ枠の〒・住所（16px）にそろえる。
   .mono というクラス名は本文HTMLにあるので変えられない。
   等幅のまま残すのは SECTION の添え字・取引銀行の注記など、
   英字の飾りとして使っているところだけ。 */
.miki-company .access-info .details p.mono{
  font-family:var(--gothic);font-size:16px;letter-spacing:.02em;line-height:2;margin-top:6px;
  font-weight:500;
}

.miki-company .access-info .details p em{font-style:normal;color:var(--accent);font-weight:600}


.miki-company .map-wrap{
  aspect-ratio:1/1;overflow:hidden;background:#eee;
  border:1px solid var(--line);
  position:relative;
}

.miki-company .map-wrap iframe{width:100%;height:100%;border:0;display:block}


/* ---------- CLOSING（お問い合わせ誘導） ---------- */
.miki-company .closing{
  padding:140px 48px;
  background:var(--paper-2);
  text-align:left;
}

.miki-company .closing .inner{max-width:1200px;margin:0 auto}

.miki-company .closing .eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:12px;letter-spacing:.36em;color:var(--ink-3);font-weight:500;
  margin-bottom:40px;text-transform:uppercase;
}

.miki-company .closing .eyebrow .rule{flex:0 0 60px;height:1px;background:var(--ink-3);opacity:.4}

/* ★ 締めは明朝のまま。他のページ（加工技術・設備紹介・加工実績）の
   締めと同じ見え方にそろえるため、ゴシック化の対象から外している（指示）。 */
.miki-company .closing h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(28px, 4vw, 52px);line-height:1.4;letter-spacing:.02em;color:var(--ink);max-width:18em;
}

.miki-company .closing h2 em{font-style:normal;color:var(--accent)}

.miki-company .closing .call{
  margin-top:56px;padding-top:40px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:48px;align-items:center;justify-content:space-between;
}

.miki-company .closing .call p{
  font-family:var(--serif);font-size:20px;line-height:1.9;max-width:26em;color:var(--ink-2);
}

.miki-company .closing .cta{
  display:inline-flex;align-items:center;gap:18px;
  padding:22px 40px;
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:12px;letter-spacing:.28em;font-weight:600;text-transform:uppercase;
  transition:all .3s ease;white-space:nowrap;
}

.miki-company .closing .cta::after{content:"→";transition:transform .3s ease}

.miki-company .closing .cta:hover{background:var(--accent);opacity:1}

.miki-company .closing .cta:hover::after{transform:translateX(6px)}


/* ---------- スマホ・タブレット ---------- */
@media (max-width:960px){
  .miki-company .hero .inner{padding:24px var(--pad-side) 32px;min-height:auto}   /* 32/50 → 24/32px（2026-10-03） */

  /* ★ 2026-10-03（Ken の指示「削る技術で… を2行までに・ヒーローの余白も」）: スマホのヒーロー。
     見出しは 10文字の行が実機 390px（中身 350px）で3行になっていた（36px）。
     画面幅に合わせて縮める（500px 以上は 36px のまま、390px で約31px、360px で約29px）。
     見出しの上の 50px（本文の h2 に付く余白）と下の 20px、小見出しの下 40px、紹介文の下の空きを詰める。 */
  .miki-company .hero .hero-title{font-size:min(36px, 8vw);margin:0}
  .miki-company .hero .eyebrow{margin-bottom:16px}                       /* 40 → 16px */
  .miki-company .hero .hero-bottom{margin-top:20px;padding-top:16px}      /* 56/40（加工技術・加工実績は 36/24）→ 20/16px */
  .miki-company .hero .hero-lead{margin-bottom:0}

  .miki-company .hero-bottom{grid-template-columns:1fr;gap:var(--gap-in-block)}

  .miki-company .hero-meta{justify-self:flex-start;text-align:left}

  .miki-company .timeline{padding:var(--gap-section) var(--pad-side)}

  /* 沿革は1件ずつが独立した項目なので、切れ目を大きく取る */
  .miki-company .timeline-row{grid-template-columns:1fr;gap:var(--gap-between-blocks)}

  .miki-company .overview{padding:var(--gap-section) var(--pad-side)}

  .miki-company .overview .head{grid-template-columns:1fr;gap:var(--gap-in-block);padding-bottom:var(--gap-in-block)}

  /* 会社概要表：ラベルと値は詰め（--gap-in-item）、
     行と行の切れ目を広げる（上下に --gap-between-items ＝ 合計40px） */
  .miki-company .spec-list .row{
    grid-template-columns:1fr;
    gap:var(--gap-in-item);
    padding:var(--gap-between-items) 0;
  }

  .miki-company .spec-list .k .ja{margin-top:2px}

  .miki-company .clients{padding:var(--gap-section) var(--pad-side)}

  .miki-company .clients-grid{grid-template-columns:1fr}

  .miki-company .client-item:nth-child(odd){padding-right:0;border-right:none}

  .miki-company .client-item:nth-child(even){padding-left:0}

  .miki-company .access{padding:var(--gap-section) var(--pad-side)}

  .miki-company .access .head{grid-template-columns:1fr;gap:var(--gap-in-block)}

  .miki-company .access-grid{grid-template-columns:1fr;gap:var(--gap-in-block)}

  .miki-company .map-wrap{aspect-ratio:4/3}

  .miki-company .closing{padding:var(--gap-section) var(--pad-side)}

  .miki-company .closing .call{flex-direction:column;align-items:flex-start;gap:var(--gap-in-block)}

}


/* ==================================================================
   セクション見出しの中央揃え（2026-09-07・指示）
   ------------------------------------------------------------------
   会社概要のセクション見出し4つ（03 会社概要 / 04 主要取引先 /
   05 アクセス / 06 締め）を、**番号・英字ラベル・見出しをひとかたまりとして**
   内側の中心にそろえる。

   ★ もともと左寄せだったのは、上の「親テーマの打ち消し」で
     `.miki-company h1〜h6{ text-align:left !important }` を当てていたため。
     旧エディタ拡張の `h2{text-align:center}` を消すための打ち消しで、
     **意図した設計ではなかった。** だから `!important` で上書きし返している
     （`.hero-title` と同じやり方）。

   ★ 03 と 05 は PC で2段組み（左に大きな番号・右にラベルと見出し）だった。
     1段にして縦に積むので **PC だけ高さが増える**（実測 +163.15px）。
     スマホはもともと1段なので**高さは変わらない**。

   ★ 英字ラベルの罫線は、本文HTMLでは**右にしか無い**
     （`<span>— ACCESS</span><span class="rule"></span>`）。
     中央に置くと文字が 27px 左に寄るので、`::before` で**左にも同じ線**を出す。
     本文は触らない。線の太さ・色・長さは、その節の `.rule` に合わせてある。
   ================================================================== */

/* --- 03 会社概要 / 05 アクセス：2段組みをやめて縦に積む --- */
.miki-company .overview .head,
.miki-company .access .head{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
}
.miki-company .overview .head .headings,
.miki-company .access .head .headings{
  text-align:center;
}

/* ★ 大きな番号（01 SECTION / 02 SECTION）だけは左端に戻す（2026-09-07・指示）。
   英字ラベルと見出しは中央のまま。`.head` に `justify-items:center` を
   掛けているので、番号だけ `justify-self:start` で打ち消す。
   段は積んだままなので**高さは変わらない**。 */
.miki-company .overview .head .num,
.miki-company .access .head .num{
  justify-self:start;
  text-align:left;
}

/* --- 04 主要取引先 / 06 締め：もともと1段。中央にするだけ --- */
.miki-company .clients .head{ text-align:center; }

/* --- 英字ラベルを中央に。罫線は左右対称にする --- */
.miki-company .overview .head .eyebrow,
.miki-company .access .head .eyebrow,
.miki-company .clients .eyebrow,
.miki-company .closing .eyebrow{
  justify-content:center;
}
.miki-company .overview .head .eyebrow::before,
.miki-company .access .head .eyebrow::before{
  content:"";flex:0 0 40px;height:1px;background:var(--ink-3);opacity:.4;
}
.miki-company .clients .eyebrow::before{
  content:"";flex:0 0 40px;height:1px;background:rgba(246,244,239,.35);
}
.miki-company .closing .eyebrow::before{
  content:"";flex:0 0 60px;height:1px;background:var(--ink-3);opacity:.4;
}

/* --- 見出し本体。上の打ち消しに勝たせる --- */
.miki-company .overview .head .headings h2,
.miki-company .access .head h2,
.miki-company .clients h2,
.miki-company .closing h2{
  text-align:center !important;
  margin-inline:auto;
}

/* ★ 締めの下の一文（「図面・寸法メモ・写真、…」）は**左のまま**にする。
   加工技術 06 と 加工実績 04 の締めも、見出しは中央・下の一文は左で、
   そちらに合わせるため。 */

/* ==================================================================
   スマホの見出しの英字・文字の大きさ・余白（2026-10-03・Ken の指示）
   ------------------------------------------------------------------
   ★ ファイルの最後に置く。上の「セクション見出しの中央揃え」などが @media の後ろにあり、
     同じ詳細度なら後勝ちになるため。
   ================================================================== */
/* 取引銀行のラベル：PC は英字（MAIN BANKS）、スマホは和文（取引銀行）。本文で span に分けてある */
.miki-company .banks-note .eb-ja{display:none}

@media (max-width:960px){
  /* 見出しの英字を出さない。英字だけの小見出し（— COMPANY OVERVIEW など）は罫ごと、
     沿革の「— MILESTONES」は英字と罫だけ（和文「三木鐵工所の歩み」は残す）、番号の横の SECTION */
  .miki-company .overview .head .headings .eyebrow,   /* 259行の (0,5,0) に合わせる */
  .miki-company .access .head .eyebrow,
  .miki-company .clients .eyebrow,
  .miki-company .closing .eyebrow,
  .miki-company .timeline .eyebrow > span:first-child,
  .miki-company .timeline .eyebrow .rule,
  .miki-company .head .num sub{display:none}
  .miki-company .banks-note .eb-en{display:none}
  .miki-company .banks-note .eb-ja{display:inline}

  /* 余白：セクションの上下 64 → 40px、見出しの上の 50px（本文の h2 に付く余白）を消す */
  .miki-company .timeline,
  .miki-company .overview,
  .miki-company .clients,
  .miki-company .access,
  .miki-company .closing{padding-top:40px;padding-bottom:40px}
  .miki-company .overview h2,
  .miki-company .clients h2,
  .miki-company .access h2,
  .miki-company .closing h2{margin-top:0}
  .miki-company .timeline .eyebrow{margin-bottom:24px}               /* 56 → 24px */
  .miki-company .timeline-row{gap:32px}                               /* 64 → 32px */
  .miki-company .spec-list .row{padding:12px 0}                       /* 20 → 12px */
  .miki-company .banks-note{margin-top:28px;padding-top:16px;gap:8px 16px}   /* 48/24 → 28/16px */

  /* 文字の大きさ：スマホで大きすぎるものを下げ、小さすぎるものを上げる */
  /* ★ 沿革（2026-10-03・Ken の指示「点・年・英字・創業が全部改行されている。英字不要で横並び、年の字を小さく」）:
     スマホでは1件を「● 1941 創業」の1行にし、説明文をその下に置く。英字（FOUNDED など）は出さない。
     点（::before）は絶対配置をやめて並びの1つ目に入れる。年 52 → 26px。 */
  .miki-company .tl-node{
    display:grid;grid-template-columns:auto auto 1fr;align-items:center;column-gap:12px;
    padding-top:0;
  }
  .miki-company .tl-node::before{position:static;grid-column:1}
  .miki-company .tl-node .year{grid-column:2;font-size:26px;line-height:1.2;margin-bottom:0;letter-spacing:0;font-variant-numeric:tabular-nums}   /* 数字の幅をそろえて「創業」などの位置を3件で合わせる */
  .miki-company .tl-node .en{display:none}
  .miki-company .tl-node .label{grid-column:3;font-size:18px}
  .miki-company .tl-node p{grid-column:1 / -1;margin-top:6px}
  .miki-company .timeline-row{gap:24px}                               /* 32 → 24px */

  /* ★ 番号と見出しを横並びに（2026-10-03・Ken の指示「01 会社概要と横並びに」）。02 アクセスも同じ形。
     PC の「中央揃え」（このファイルの @media より前）は grid で縦に積んでいるので、スマホだけ flex で1行にして中央に置く。 */
  .miki-company .overview .head,
  .miki-company .access .head{display:flex;justify-content:center;align-items:baseline;gap:14px}
  /* ★ 同日、番号（01・02）もスマホでは出さないことになった（Ken の指示）。見出しだけが中央に残る */
  .miki-company .overview .head .num,
  .miki-company .access .head .num{display:none}
  .miki-company .overview .head .num,
  .miki-company .access .head .num{font-size:40px}                    /* 56 → 40px */
  .miki-company .spec-list .k .ja{font-size:15px}                     /* 20 → 15px（項目名） */
  .miki-company .spec-list .v,
  .miki-company .spec-list .v .mono{font-size:18px;line-height:1.8}   /* 22 → 18px（値） */
  /* ★ 見出しを2行以内に（2026-10-03・Ken の指示）。<br> の後ろの行が 390px 幅で折り返していた。画面幅に合わせて縮める */
  .miki-company .closing h2{font-size:min(24px, 5.6vw)}               /* 28 → 24px（390px 約22px・360px 約20px） */
  .miki-company .clients h2{font-size:min(24px, 4.5vw)}               /* 19文字の行（信頼のなかで、部品加工を続けています。）が入る大きさ */
  .miki-company .closing .call p{font-size:17px}                      /* 20 → 17px */
  .miki-company .banks-note{font-family:var(--gothic);font-size:14px;letter-spacing:.04em}   /* 等幅 11px → ゴシック 14px */
  .miki-company .banks-note strong{letter-spacing:.1em}

  /* 地図の幅を写真と同じに（2026-10-03・Ken の実機）。Chrome では同じ幅だが、iPhone の Safari は
     iframe の width:100% を守らず中身の幅で広がる・縮むことがある。よく知られた回避策
     （width を小さく置いて min-width:100% で広げる）を入れる。Chrome の見た目は変わらない。 */
  .miki-company .map-wrap{width:100%}
  .miki-company .map-wrap iframe{width:1px;min-width:100%}
}