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

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

   ── ヒーロー背景の作りが会社概要と違う（重要） ──────────────
   会社概要 (page-company.css) は写真1枚だけだったので、
   <div class="bg"> ごと <img class="hero-bg"> に置き換えた。

   こちらは <div class="bg"> を残し、その内側に <img> を入れている。
   .bg が filter とグラデーション（::before / ::after）の土台として
   必要なため。期待する構造は次のとおり:

     <section class="hero">
       <div class="bg" aria-hidden="true">
         <img class="hero-bg" src="..." alt="" aria-hidden="true">
       </div>
       <div class="inner">...</div>
     </section>

   <img> を .bg の外に出してはいけない。
   filter:contrast(1.02) saturate(.9) が写真に効かなくなり色味が変わる。
   ────────────────────────────────────────────────

   ※ 本文CSSは font-weight:100 / 200 を指定しているが、Google Fonts は
      300以上しか要求していないため、現在は 300 で代替されている。
      移行で見た目を変えないため、この状態のまま維持している。
      （CLAUDE.md の「未着手の課題」参照。段階3で扱う）
   ================================================================== */


/* ---------- Page hero ---------- */
.miki-machining .hero{
  position:relative;
  background:var(--ink);color:var(--paper);
  overflow:hidden;
}

.miki-machining .hero .bg{
  position:absolute;inset:0;
  /* filter は写真と陰影の両方に効かせる。元の .bg に付いていたものを維持。
     filter があるとここが stacking context になるので、
     中の img / ::before / ::after の重なりはこの箱の中で完結する。 */
  filter:contrast(1.02) saturate(.9);
}

/* 背景写真。本文側に <img class="hero-bg"> として置いてあるので、
   お客様がメディアライブラリから差し替えられる。
   ※ このページ内の .combine::before（下部の大きな帯）でも
      同じ miki-hero-scaled.jpg を背景に使っている。片方だけ変えたいときは
      本文の src ではなくこのファイルの .combine::before を直すこと。
      2026-08-27 調査: トップページのスライダーは
      theme/assets/images/slide-*.jpg を使っており、この画像とは無関係。
      （以前あった「スライダーと共用」という記述は誤り） */
.miki-machining .hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
}

/* 写真の上に重ねる陰影。元は .bg の background に写真と一緒に指定していた
   2層のグラデーション（先に書いたものが上に乗る）。 */
.miki-machining .hero .bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.35) 55%, rgba(20,20,20,.88) 100%),
    linear-gradient(90deg, rgba(20,20,20,.7) 0%, rgba(20,20,20,0) 45%);
}

/* 下端の放射グラデーション。元の .bg::after をそのまま。 */
.miki-machining .hero .bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(120% 80% at 50% 100%, rgba(20,20,20,.55), transparent 60%);
}

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

.miki-machining .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,.7);
  margin-bottom:40px;
}

.miki-machining .hero .eyebrow .num{color:#e8a794}

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

.miki-machining .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 24px rgba(0,0,0,.4);
}

.miki-machining .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,.7);
  margin-bottom:28px;text-transform:uppercase;
}

.miki-machining .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,.2);
  align-items:end;
}

.miki-machining .hero-lead{
  max-width:520px;
  font-size:16px;line-height:2.15;color:rgba(246,244,239,.82);
  font-weight:400;
}

.miki-machining .hero-meta{
  justify-self:end;text-align:right;
  font-family:var(--sans);font-size:11px;letter-spacing:.36em;color:rgba(246,244,239,.55);
  line-height:2;
}

.miki-machining .hero-meta strong{color:#e8a794;font-weight:500;letter-spacing:.32em;display:block;margin-bottom:6px}


/* ---------- Process section ---------- */
.miki-machining .process{
  padding:140px 0;position:relative;
}

.miki-machining .process.dark{background:var(--ink);color:var(--paper)}

.miki-machining .process.dark .p-eyebrow .rule{background:rgba(246,244,239,.35)}

.miki-machining .process.dark .p-eyebrow{color:rgba(246,244,239,.65)}

.miki-machining .process.dark h2{color:var(--paper)}

.miki-machining .process.dark .p-body{color:rgba(246,244,239,.75)}

.miki-machining .process.dark .p-cta{border-color:var(--paper);color:var(--paper)}

.miki-machining .process.dark .p-cta:hover{background:var(--paper);color:var(--ink)}

.miki-machining .process.dark .p-num{color:rgba(246,244,239,.08)}



.miki-machining .p-inner{max-width:1440px;margin:0 auto;padding:0 48px}

.miki-machining .p-grid{
  display:grid;grid-template-columns: 1fr 1fr;gap:96px;
  align-items:start;
}

.miki-machining .process.reverse .p-grid{grid-template-columns: 1fr 1fr}

.miki-machining .process.reverse .p-visual{order:2}

.miki-machining .process.reverse .p-text{order:1}


.miki-machining .p-visual{position:relative}

.miki-machining .p-visual .img-wrap{aspect-ratio:4/5;overflow:hidden;background:#111}

.miki-machining .p-visual img{width:100%;height:100%;object-fit:cover}

.miki-machining .p-visual .caption{
  margin-top:16px;
  font-family:var(--sans);font-size:11px;letter-spacing:.36em;color:var(--ink-3);
  display:flex;justify-content:space-between;
}

.miki-machining .process.dark .p-visual .caption{color:rgba(246,244,239,.55)}


.miki-machining .p-num{
  position:absolute;
  font-family:var(--sans);font-weight:200;
  font-size:clamp(140px, 22vw, 320px);
  line-height:.85;
  color:rgba(20,20,20,.05);
  z-index:0;pointer-events:none;
  letter-spacing:-.03em;
}

.miki-machining .process:not(.reverse) .p-num{right:-.05em;top:-.15em}

.miki-machining .process.reverse .p-num{left:-.05em;top:-.15em}


.miki-machining .p-text{position:relative;z-index:1;padding-top:20px}

.miki-machining .p-eyebrow{
  display:flex;align-items:center;gap:16px;
  font-family:var(--sans);font-size:12px;letter-spacing:.36em;color:var(--ink-3);font-weight:500;
  margin-bottom:32px;
}

.miki-machining .p-eyebrow .num{color:var(--accent);font-weight:600}

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

/* ── 見出し帯と「最大加工サイズ」（第2回修正・2026-10-01） ──────────
   紙資料(2) の形。黒帯の題名＋その下に1行の表。
   ★ 色と書体はサイトに合わせる。紙資料の赤線や枠の太さは写さない。
     帯の地は --ink、下に濃紺 --miki-navy の線（ヘッダー下線と同じ色）。
     dark の区画（02 マシニング）では地と文字を入れ替える。
   ★ 表は本文の <table> ではなく <dl class="p-spec">（dt＝項目 / dd＝値）。 */
.miki-machining .p-head{margin-bottom:40px}

.miki-machining .p-head h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(28px, 3vw, 40px);line-height:1.4;letter-spacing:.16em;
  text-align:center;
  background:var(--ink);color:var(--paper);
  padding:.4em .6em;margin:0;
  border-bottom:3px solid var(--miki-navy);
}

.miki-machining .p-spec{
  display:grid;grid-template-columns:2fr 3fr;
  margin:0;border:1px solid var(--ink);border-top:none;
  font-family:'Noto Sans JP', sans-serif;color:var(--ink);
}

.miki-machining .p-spec :is(dt, dd){display:flex;align-items:center;justify-content:center}

.miki-machining .p-spec dt{
  padding:14px 12px;border-right:1px solid var(--ink);
  font-size:15px;font-weight:600;letter-spacing:.12em;text-align:center;
}

.miki-machining .p-spec dd{
  margin:0;padding:12px 12px;
  font-size:20px;font-weight:600;letter-spacing:.04em;text-align:center;
  font-variant-numeric:tabular-nums;
}

.miki-machining .process.dark .p-head h2{background:var(--paper);color:var(--ink)}

.miki-machining .process.dark .p-spec{border-color:rgba(246,244,239,.55);color:var(--paper)}

.miki-machining .process.dark .p-spec dt{border-color:rgba(246,244,239,.55)}

.miki-machining .p-body{
  font-size:16px;line-height:2.15;color:var(--ink-2);
}

.miki-machining .p-body p + p{margin-top:20px}


.miki-machining .p-detail-img{
  margin-top:56px;
  aspect-ratio:4/3;overflow:hidden;
  background:#111;
  position:relative;
}

.miki-machining .p-detail-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s ease}

.miki-machining .p-detail-img:hover img{transform:scale(1.03)}

.miki-machining .p-detail-img .cap{
  position:absolute;left:0;bottom:0;padding:14px 18px;
  font-family:var(--sans);font-size:10px;letter-spacing:.36em;color:rgba(246,244,239,.85);
  background:linear-gradient(0deg, rgba(0,0,0,.6), transparent);
  width:100%;
}

.miki-machining .p-cta{
  display:inline-flex;align-items:center;gap:18px;
  margin-top:48px;padding:18px 32px;
  border:1px solid var(--ink);color:var(--ink);
  font-family:var(--sans);font-size:12px;letter-spacing:.28em;font-weight:500;
  text-transform:uppercase;
  transition:all .3s ease;
}

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

.miki-machining .p-cta:hover{background:var(--ink);color:var(--paper);opacity:1}

.miki-machining .p-cta:hover::after{transform:translateX(6px)}


/* ---------- Closing / combine ---------- */
.miki-machining .combine{
  background:var(--ink);color:var(--paper);
  padding:200px 48px;
  position:relative;overflow:hidden;
}

.miki-machining .combine::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(20,20,20,.98) 0%, rgba(20,20,20,.88) 40%, rgba(20,20,20,.55) 100%),
    url("../../../../uploads/2026/08/miki-hero-scaled.jpg") right center/cover no-repeat;
  filter:contrast(1.05);
  opacity:.85;
}

.miki-machining .combine .inner{max-width:1200px;margin:0 auto;text-align:left;position:relative;z-index:1}

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

.miki-machining .combine .eyebrow .rule{flex:0 0 60px;height:1px;background:rgba(246,244,239,.35)}

.miki-machining .combine h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(36px, 5vw, 68px);line-height:1.5;
  max-width:16em;
  letter-spacing:.02em;
}

.miki-machining .combine .body{
  margin-top:64px;max-width:640px;
  font-size:16px;line-height:2.15;color:rgba(246,244,239,.78);
}

.miki-machining .combine .body p + p{margin-top:18px}

.miki-machining .combine .call{
  margin-top:80px;padding-top:56px;
  border-top:1px solid rgba(246,244,239,.2);
  display:flex;flex-wrap:wrap;gap:48px;align-items:center;justify-content:space-between;
}

.miki-machining .combine .call p{
  font-family:var(--serif);font-size:22px;line-height:1.8;max-width:24em;
}

.miki-machining .combine .call p .accent{color:#e8a794}

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

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

.miki-machining .combine .cta:hover{opacity:.9;background:var(--accent);color:var(--paper)}

.miki-machining .combine .cta:hover::after{transform:translateX(6px)}


.miki-machining .combine .watermark{
  position:absolute;right:-2vw;bottom:-4vw;
  font-family:var(--sans);font-weight:100;
  font-size:clamp(200px, 26vw, 460px);
  line-height:.8;color:rgba(246,244,239,.03);
  letter-spacing:-.04em;pointer-events:none;
}


/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .miki-machining .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-machining .hero .hero-title{font-size:min(36px, 8vw);margin:0}
  .miki-machining .hero .eyebrow{margin-bottom:16px}                       /* 40 → 16px */
  .miki-machining .hero .hero-bottom{margin-top:20px;padding-top:16px}      /* 56/40（加工技術・加工実績は 36/24）→ 20/16px */
  .miki-machining .hero .hero-lead{margin-bottom:0}

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

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

  .miki-machining .p-inner{padding:0 var(--pad-side)}

  /* 写真と本文は同じ工法の説明＝1つの項目の中。詰める */
  .miki-machining .p-grid, .miki-machining .process.reverse .p-grid{
    grid-template-columns:1fr;
    gap:var(--gap-in-block);
  }

  .miki-machining .process.reverse .p-visual{order:1}

  /* ★ スマホでは各工法の大きい写真（ヒーローと同じ写真）とその下の「01 — TURNING / 旋盤加工」を出さない
     （2026-10-03・Ken の指示「大きすぎて見難い」）。3工法とも。
     画像は loading="lazy" なので、隠れている間は読み込まれない。PC・タブレット（961px 以上）はそのまま。 */
  .miki-machining .p-visual{display:none}

  /* スマホでは各工法の説明文（.p-body）を中央そろえに（2026-10-03・Ken の指示）。3工法とも。 */
  .miki-machining .p-body{text-align:center}

  .miki-machining .process.reverse .p-text{order:2}

  .miki-machining .p-head{margin-bottom:var(--gap-in-block)}

  .miki-machining .p-spec{grid-template-columns:1fr 1.4fr}

  .miki-machining .p-spec dt{font-size:13px;letter-spacing:.06em;padding:12px 8px}

  .miki-machining .p-spec dd{font-size:17px;padding:10px 8px}

  .miki-machining .combine{padding:var(--gap-section) var(--pad-side)}

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

  /* 工法どうしは大きな項目。切れ目を大きく取る */
  .miki-machining .process{padding:var(--gap-between-blocks) 0}

  /* ★ 2026-10-03（Ken の指示「上下の余白を少し見直して」）: スマホの縦の余白を少し詰める。
     共通の変数（--gap-*）は他のページも使うので変えず、このページだけ数値で上書きする。 */
  .miki-machining .process{padding:44px 0}                                     /* 64 → 44px */
  .miki-machining .p-text{padding-top:0}                                       /* 20 → 0（写真を隠したので上の空きが不要） */
  .miki-machining .p-eyebrow{margin-bottom:20px}                               /* 32 → 20px */
  .miki-machining .p-detail-img{margin-top:32px}                               /* 56 → 32px */
  .miki-machining .combine{padding:48px var(--pad-side)}                       /* 64 → 48px */
  .miki-machining .combine .eyebrow{margin-bottom:32px}                        /* 56 → 32px */
  .miki-machining .combine .body{margin-top:32px}                              /* 64 → 32px */
  .miki-machining .combine .call{margin-top:40px;padding-top:28px}             /* 80/56 → 40/28px */

  /* ★ 2026-10-03（Ken の指示）: 締めの帯の見出しを2行以内、「どの加工で…」と「という段階から…」をそれぞれ1行に。
     字の大きさを画面幅に合わせる。見出しは15文字の行（部品に合った方法を共に考える。）、
     一文は18文字（「どの加工で頼めばよいか分からない」）が 360px 幅（中身 320px）でも収まる大きさ。 */
  .miki-machining .combine h2{font-size:min(36px, 5.6vw)}                     /* 500px で約28px・390px 約22px・360px 約20px */
  .miki-machining .combine .call p{font-size:min(22px, 4.8vw);letter-spacing:0}  /* 390px 約19px・360px 約17px */

}