/* =========================================================
   JACKSTELLA株式会社 — Site styles
   LAYOUT: ワイヤー(rendered/01_TOP.png)の構成 × mi-6トーン。
   COLOR: テンパーカラー全面採用（2026-08-02 前田社長決裁）。
     シルバー→ブラックの金属グラデに加え、鋼の焼き色そのままの
     イリデッセント（青・紫・緑・金）を画像アセット側で使う。
     ※ 旧方針「青・金は使わない」は本案件では撤回済み。
     ※ 色トークンは :root のみ。:root の外に生のカラーコードを書かない。
   踏襲元: alphalaser-jp/html (構造・ホバー・SNS SVG・contact-cta・footer).

   ---- このファイルの読み方（2026-08-02 リファクタ後） ----
   ・後勝ちで死んでいる宣言は機械的に除去済み＝**ここに書いてある宣言は全部effective**。
     「6回上書きされていてどれが効いているか分からない」状態は解消している。
   ・同じセレクタが複数回出てくることはあるが、それぞれ別プロパティを足しているだけ。
     並べ替え・統合はカスケードを壊すので意図的にやっていない。
   ・**追記で上書きブロックを足さないこと**。既存の定義そのものを書き換える。
   ・チェック: python dev/clients/bricks-uk/jackstella-jp/check-css.py （死に宣言0を保証）
   ・除去したルールの退避先: ../../../_removed-css-20260802.txt
   ========================================================= */
:root{
  --color-white:#ffffff;
  --color-nearwhite:#fbfbfb;
  --color-ink:#191e2e;
  /* headings (dark ink) */
  --color-body:#333333;
  /* body text */
  --color-sub:#727272;
  /* auxiliary gray / logo tone */
  --color-border:#e0e0e0;
  --color-border-2:#dcdcdc;
  --color-ph:#d9dde1;
  /* image placeholder gray */
  --color-ph-icon:#b7bcc2;
  /* placeholder glyph */
  --color-hover-bg:#eceef1;
  /* nav item hover */
  --color-mega-bg:#f2f3f5;
  /* dropdown bg */
  --color-contact-bg:#e6e6e6;
  /* contact section light gray */
  --color-footer-bg:#ffffff;
  /* wireframe footer = white */

  /* temper color (テンパーカラー: silver -> black) */
  --temper-silver:#d9dde1;
  --temper-mid:#a8adb3;
  --temper-black:#1a1a1a;
  --grad-temper:linear-gradient(90deg,var(--temper-silver),var(--temper-mid) 52%,var(--temper-black));
  /* 明朝（2026-08-04 三上様が「①明朝・細め」で確定）。
     ワイヤー(.xd)は全11ページ545テキストが Hiragino Mincho ProN（W3 376 / W6 169）＝100%明朝。
     第一候補をヒラギノ明朝にし、Windows/Android には Noto Serif JP（読込済み）を当てる。
     細め(W3)=font-weight:400 / 太め(W6)=600 で対応する。 */
  --font-mincho:"Hiragino Mincho ProN","HiraMinProN-W3","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  /* 2026-08-04 サイト全体を明朝に統一（前田社長決定・ワイヤー準拠）。
     従来ゴシック用だった --font-jp / --font-en を明朝のエイリアスにすることで、
     各セレクタを書き換えずに全体を切り替えている。
     ⚠️ ゴシックに戻す場合は、この2行を下記の元定義に戻すだけでよい：
        --font-jp:"Noto Sans JP","Assistant",sans-serif;
        --font-en:"Assistant","Noto Sans JP",sans-serif;  */
  --font-jp:var(--font-mincho);
  --font-en:var(--font-mincho);
  /* GALAXYグループ5社の識別色（会社案内 ⑤-2 のカード上帯・ALPHA LASER と同値）。
     出典＝貴社共有パンフ「グループ5社の役割と強み」からの実測値。
     ⚠️ 本サイトは「青を使わない」方針だが、これは各社の識別色であって装飾色ではないため例外。 */
  --color-galaxy-hd:#886e02;
  --band-aichi:#1565c0;
  --band-jackstella:#0d7a5f;
  --band-alj:#7b2d8b;
  --band-ale:#c0392b;
  --band-suntec:#e67e22;
  --color-self-bg:#f2f8f6;
  /* 自社(JACKSTELLA)カードの下地＝帯の緑を淡くしたもの */

  --radius-band:20px;
  --radius-btn:16px;
  --shadow-card:0 0 7px rgba(0,0,0,.12);
  --shadow-float:0 6px 18px rgba(0,0,0,.12);          /* 追従お問い合わせ（ALPHA LASER と同一） */
  --shadow-float-hover:0 10px 24px rgba(25,30,46,.25);
  --shadow-soft:0 10px 26px rgba(0,0,0,.13);
  --shadow-text:0 2px 14px rgba(0,0,0,.45);
  --maxw:1360px;
  --gutter:24px;
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html{
  scroll-behavior:smooth;
}
body{
  font-family:var(--font-jp);
  color:var(--color-body);
  background:var(--color-white);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{
  max-width:100%;
  display:block;
}
a{
  color:inherit;
  text-decoration:none;
}
ul{
  list-style:none;
}
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  width:100%;
}
/* section heading: JP大 + EN小 inline (お問い合わせ -Contact) */
/* image placeholder (中間セクション用に温存) */
/* brand social icons — ALPHA LASER と同一の画像・同一サイズに統一（2026-08-02 前田社長指示） */
.social{
  display:flex;
  gap:12px;
  align-items:center;
}
.social__link{
  display:inline-flex;
  align-items:center;
  transition:transform .2s;
}
.social__link[aria-label="Instagram"]{width:33px;height:33px}
.social__link[aria-label="Facebook"]{width:29px;height:29px}
.social__link:hover{
  transform:translateY(-2px);
}
.social__link svg,.social__link img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

/* PC専用の改行（SPでは折り返しが変わるので消す） */
.br-pc{display:inline}
/* ===================== HEADER ===================== */
.header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--color-border);
}
.header__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  height:78px;
  display:flex;
  align-items:center;
  gap:24px;
}
.header__logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.header__logo img{
  height:38px;
  width:auto;
}
.nav{
  margin-left:auto;
  align-self:stretch;
}
.nav__list{
  display:flex;
  height:100%;
}
.nav__item{
  display:flex;
  position:relative;
}
.nav__link{
  display:flex;
  align-items:center;
  padding:0 22px;
  font-size:15px;
  color:var(--color-body);
  border-bottom:2px solid transparent;
  transition:color .2s,background .2s;
}
.nav__item:hover .nav__link{
  background:var(--color-hover-bg);
  color:var(--color-ink);
}
.header__social{
  align-self:center;
}
.header__toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
  cursor:pointer;
}
.header__toggle span{
  width:24px;
  height:2px;
  background:var(--color-ink);
}
/* dropdown (事業内容) — compact, under the item */
.nav__item--has-mega{
  position:relative;
}
.mega{
  position:absolute;
  left:0;
  top:100%;
  min-width:270px;
  background:var(--color-mega-bg);
  border-top:1px solid var(--color-border);
  box-shadow:0 14px 26px rgba(0,0,0,.10);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s;
  z-index:45;
  padding:10px 0;
}
.nav__item--has-mega:hover .mega,.nav__item--has-mega:focus-within .mega,.mega:hover{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
/* 「事業内容」は一覧ページを持たない中間カテゴリ。リンクではないのでカーソルを変えない
   （2026-08-07 案B）。開閉は hover と :focus-within が担当する。 */
.nav__link--parent,.footer__nav-link--parent{
  cursor:default;
}
.mega__link{
  display:block;
  font-size:14px;
  color:var(--color-body);
  padding:10px 24px;
  transition:background .2s,color .2s;
}
.mega__link:hover{
  background:var(--color-hover-bg);
  color:var(--color-ink);
}
/* ===================== FV (HERO) ===================== */
/* wireframe: 溶接写真を左62%の角丸帯(1200x500・r20)に cover 配置。
   白見出し＋サブが写真〜右へまたがり中央。右下にCTA2つ(縦積み)。背景=白(ピンクは注記placeholder)。 */
/* temper accent bar (silver->black) — 控えめに注記①を反映 */
/* floating contact — fixed, always visible on scroll
   配置・形・ホバー挙動は ALPHA LASER と同一（2026-08-02 前田社長指示）。
   ALと違うのは色だけ＝ALのprimary(紺)ではなくJACKSTELLAのインクを当てる。
   アイコンはJACKSTELLAのインラインSVGのまま（currentColorで着色される）。 */
.floating-contact{
  position:fixed;
  right:clamp(14px,1.6vw,26px);
  bottom:clamp(20px,2.4vw,36px);
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.floating-contact__btn{
  width:60px;
  height:60px;
  border-radius:14px;
  background:var(--color-white);
  border:1px solid var(--color-border-2);
  box-shadow:var(--shadow-float);
  display:grid;
  place-items:center;
  color:var(--color-body);
  transition:all .35s cubic-bezier(.22,.61,.36,1);
}
.floating-contact__btn svg{
  width:28px;
  height:28px;
}
.floating-contact__btn:hover{
  background:var(--color-white);
  color:var(--color-ink);
  border:2px solid var(--color-ink);
  border-radius:50%;
  transform:translateY(-2px);
  box-shadow:var(--shadow-float-hover);
}
/* ===================== CONTACT (3導線) ===================== */
.contact-cta{
  padding:clamp(50px,6vw,78px) 0 clamp(56px,7vw,88px);
  background:var(--color-contact-bg);
}
.contact-cta__grid{
  display:flex;
  justify-content:center;
  gap:clamp(18px,2.2vw,30px);
  flex-wrap:wrap;
  margin-top:clamp(34px,4vw,56px);
}
.contact-cta__item{
  position:relative;
  background:var(--color-white);
  width:240px;
  padding:34px 20px 30px;
  text-align:center;
  border:1px solid var(--color-border);
  transition:box-shadow .25s,transform .25s;
}
.contact-cta__item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:3px;
  background:var(--grad-temper);
  opacity:0;
  transition:opacity .25s;
}
.contact-cta__item:hover{
  box-shadow:var(--shadow-soft);
  transform:translateY(-3px);
}
.contact-cta__item:hover::before{
  opacity:1;
}
.contact-cta__icon{
  display:block;
  height:52px;
  margin-bottom:16px;
}
.contact-cta__icon img{
  height:44px;
  width:auto;
  margin:0 auto;
  display:block;
}
.contact-cta__title{
  font-size:clamp(15px,1.2vw,17px);
  color:var(--color-ink);
  line-height:1.5;
  font-weight:500;
  margin-bottom:12px;
}
.contact-cta__note{
  font-size:12.5px;
  color:var(--color-sub);
  line-height:1.8;
}
.contact-cta__link{
  position:absolute;
  inset:0;
}
/* ===================== FOOTER (wireframe: white) ===================== */
.footer{
  background:var(--color-footer-bg);
  color:var(--color-body);
  border-top:1px solid var(--color-border);
}
.footer__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(36px,4vw,56px) var(--gutter);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.footer__logo{
  display:block;
  margin-bottom:18px;
}
.footer__logo img{
  height:34px;
  width:auto;
}
.footer__nap{
  font-size:14px;
  color:var(--color-sub);
  line-height:1.95;
}
.footer__nav{
  display:flex;
  gap:clamp(28px,4vw,60px);
}
.footer__nav-col{
  display:flex;
  flex-direction:column;
  gap:13px;
}
.footer__nav-link{
  font-size:15px;
  color:var(--color-body);
}
.footer__nav-link:hover{
  color:var(--temper-black);
  text-decoration:underline;
}
.footer__biz-list{
  display:flex;
  flex-direction:column;
  gap:11px;
}
.footer__biz-link{
  font-size:13.5px;
  color:var(--color-sub);
  padding-left:.3em;
}
.footer__biz-link:hover{
  color:var(--temper-black);
}
.footer__right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}
.footer__contact-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 24px;
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-btn);
  color:var(--color-body);
  font-size:14px;
  font-weight:500;
  transition:border-color .2s,box-shadow .2s,color .2s;
}
.footer__contact-btn img{
  width:22px;
  height:auto;
}
.footer__contact-btn:hover{
  border-color:var(--temper-mid);
  box-shadow:var(--shadow-card);
  color:var(--temper-black);
}
.footer__copyright{
  text-align:center;
  font-family:var(--font-en);
  font-size:12px;
  color:var(--color-sub);
  padding:16px;
  border-top:1px solid var(--color-border);
}
/* ===================== REVEAL ===================== */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
/* ===================== RESPONSIVE ===================== */
@media(max-width:900px){
  .hero{
    padding-top:0;
  }
  .hero__inner{
    min-height:auto;
    padding:0;
  }
  .hero__photo{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    border-radius:0;
  }
  .hero__title{
    color:var(--color-ink);
    text-shadow:none;
    font-size:clamp(24px,6vw,34px);
  }
  .hero__sub{
    color:var(--color-body);
    text-shadow:none;
  }
  .floating-contact{
    right:12px;
    top:auto;
    bottom:16px;
    transform:none;
    flex-direction:row;
  }
  .floating-contact__btn{
    width:50px;
    height:50px;
  }
  /* PC向けの改行指定はSPだと変な位置で切れるので無効化 */
  .br-pc{display:none}
  .footer__inner{
    grid-template-columns:1fr;
    gap:26px;
  }
}
@media(max-width:640px){
  .nav,.header__social{
    display:none;
  }
  .header__toggle{
    display:flex;
    margin-left:auto;
  }
  .contact-cta__grid{
    flex-direction:column;
    align-items:center;
  }
  .nav.is-open{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:78px;
    background:var(--color-white);
    border-bottom:1px solid var(--color-border);
    box-shadow:0 12px 20px rgba(0,0,0,.08);
    z-index:48;
  }
  .nav.is-open .nav__list{
    flex-direction:column;
    height:auto;
  }
  .nav.is-open .nav__item{
    display:block;
    position:static;
  }
  .nav.is-open .nav__link{
    padding:14px 24px;
    border-bottom:1px solid var(--color-border);
  }
  .nav.is-open .mega{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border-top:none;
    background:var(--color-nearwhite);
    min-width:0;
  }
  .footer__nav{
    flex-direction:column;
    gap:20px;
  }
}
/* =========================================================
   Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4
   JACKSTELLA 中間6ブロック（メッセージ / お知らせ / 事業内容 /
   設備紹介 / ご依頼の流れ / 会社案内）— mi-6語彙 × テンパー(silver→black)
   Author: 秘書 · Date: 2026-07-30
   ルール: BEM / :root外に生カラー禁止 / 極細巨大英字 / 広い余白 /
          テンパーグラデは②メッセージ(薄ブロブ)と⑤設備紹介(主役)の2箇所
   ========================================================= */
/* 水平スクロール抑止（レスポンシブ安全弁） */
html,body{
  overflow-x:clip;
}
/* ===================== SECTION COMMONS ===================== */
.section{
  position:relative;
  padding:clamp(72px,10vw,140px) 0;
  background:var(--color-white);
}
.container--narrow{
  max-width:960px;
  margin:0 auto;
  padding:0 var(--gutter);
  width:100%;
}
/* mi-6語彙: 極細巨大英字ディスプレイ見出し */
.section__display{
  font-style:normal;
  min-width:0;
}
.section__title{
  margin-top:18px;
}
.section__body{
  max-width:760px;
  margin:clamp(30px,4vw,52px) auto 0;
  text-align:left;
  font-size:clamp(14px,1.05vw,16px);
  line-height:2;
  color:var(--color-body);
}
.section__body--center{
  text-align:center;
}
.section__body p+p{
  margin-top:1em;
}
.section__more{
  margin-top:clamp(30px,4vw,52px);
  text-align:center;
}
.section__note{
  margin-top:clamp(20px,2.5vw,32px);
  text-align:center;
  font-size:12.5px;
  color:var(--color-sub);
  line-height:1.9;
}
.section__head--center{
  text-align:center;
  margin-bottom:clamp(40px,5vw,64px);
}
/* ===================== ARROW LINK (mi-6風・CTA） ===================== */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:18px;
  color:var(--color-ink);
  font-size:14px;
  font-weight:500;
  letter-spacing:.06em;
  transition:color .25s ease;
  white-space:nowrap;
}
.link-arrow__circle{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--color-border-2);
  display:grid;
  place-items:center;
  color:var(--color-body);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.link-arrow__circle svg{
  width:16px;
  height:16px;
}
.link-arrow:hover{
  color:var(--temper-black);
}
.link-arrow:hover .link-arrow__circle{
  background:var(--temper-black);
  color:var(--color-white);
  border-color:var(--temper-black);
  transform:translateX(4px);
}
.link-arrow:focus-visible{
  outline:2px solid var(--temper-black);
  outline-offset:4px;
  border-radius:8px;
}
.link-arrow--center{
  justify-content:center;
}
.link-arrow--on-dark{
  color:var(--color-white);
}
.link-arrow--on-dark .link-arrow__circle{
  border-color:rgba(255,255,255,.55);
  color:var(--color-white);
}
.link-arrow--on-dark:hover{
  color:var(--color-white);
}
.link-arrow--on-dark:hover .link-arrow__circle{
  background:var(--color-white);
  color:var(--temper-black);
  border-color:var(--color-white);
}
/* ===================== ② MESSAGE ===================== */
.section--message{
  padding-top:clamp(96px,12vw,168px);
}
.section__deco--message{
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.section--message .section__body{
  max-width:820px;
}
/* ===================== ③ NEWS ===================== */
.news__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(20px,2.6vw,36px);
  padding:0;
  margin:0;
  list-style:none;
}
.news__card{
  list-style:none;
  min-width:0;
}
.news__link{
  display:block;
  border-radius:16px;
  padding:16px 16px 20px;
  background:var(--color-white);
  transition:transform .3s ease, box-shadow .3s ease;
}
.news__link:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-soft);
}
.news__link:focus-visible{
  outline:2px solid var(--temper-black);
  outline-offset:2px;
}
.news__thumb{
  aspect-ratio:4/3;
  border-radius:12px;
  overflow:hidden;
  background:var(--color-ph);
  display:grid;
  place-items:center;
  color:var(--color-ph-icon);
}
.news__meta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:16px;
}
.news__tag{
  font-size:11px;
  padding:4px 12px;
  background:var(--color-nearwhite);
  border:1px solid var(--color-border-2);
  border-radius:999px;
  color:var(--color-sub);
  letter-spacing:.05em;
}
.news__date{
  font-family:var(--font-en);
  font-size:12px;
  color:var(--color-sub);
}
.news__title{
  margin-top:12px;
  font-size:15px;
  font-weight:500;
  color:var(--color-ink);
  line-height:1.75;
  overflow-wrap:anywhere;
  min-width:0;
}
/* ===================== ④ BUSINESS ===================== */
.pillars{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(12px,1.5vw,20px);
  margin:clamp(30px,4vw,50px) 0 0;
  padding:0;
  list-style:none;
}
.pillar{
  position:relative;
  aspect-ratio:2/3;
  border-radius:20px;
  overflow:hidden;
  background:var(--color-ph);
  transition:transform .35s ease;
}
.pillar:hover{
  transform:translateY(-4px);
}
.pillar__photo{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--color-ph-icon);
  background:linear-gradient(180deg, var(--temper-silver) 0%, var(--temper-mid) 100%);
}
.pillar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(25,30,46,0) 40%, rgba(25,30,46,.7) 100%);
  z-index:1;
}
/* 事業4本柱の縦組みラベル（30px＝24px以上のため 2026-08-04 明朝化）。
   ワイヤーも同箇所は明朝W3（45px）。細め＝font-weight:400 */
.pillar__label{
  position:absolute;
  right:20px;
  top:24px;
  bottom:24px;
  writing-mode:vertical-rl;
  font-family:var(--font-mincho);
  font-size:clamp(20px,2.2vw,30px);
  font-weight:400;
  letter-spacing:.18em;
  color:var(--color-white);
  z-index:2;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  line-height:1.4;
}

/* 事業4本柱の画像リンク（2026-08-18 新設・三上様ご指示）
   「事業内容はこちら」の1本リンクを廃止し、画像そのものを各事業ページへの入口にした。
   ・.pillar__link はタイル全面を覆う当たり判定（ラベル z-index:2 より上に置く）
   ・右下の丸矢印でリンクだと分かるようにし、マウスを乗せると白黒が反転する（前田社長指示）
   ・縦組みラベルは右上から伸びるので、矢印は右下に置いて重ならない。
     640px以下はラベルが横組み・左下に移るので、そちらでも重ならない */
.pillar__link{
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  text-decoration:none;
  color:var(--color-white);
}
.pillar__arrow{
  position:absolute;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  color:var(--color-white);
  background:transparent;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.pillar__arrow svg{
  width:18px;
  height:18px;
}
.pillar__link:hover .pillar__arrow,
.pillar__link:focus-visible .pillar__arrow{
  background:var(--color-white);
  border-color:var(--color-white);
  color:var(--color-ink);
}
.pillar__link:focus-visible{
  outline:2px solid var(--color-white);
  outline-offset:-4px;
}
.points{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(16px,2vw,28px);
  margin:clamp(48px,6vw,80px) 0 0;
  padding:0;
  list-style:none;
}
.point{
  padding:clamp(24px,2.6vw,36px);
  border-radius:20px;
  border:1px solid var(--color-border);
  background:var(--color-white);
  text-align:center;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.point:hover{
  border-color:var(--temper-mid);
  box-shadow:var(--shadow-card);
  transform:translateY(-3px);
}
.point__body{
  font-size:14px;
  line-height:1.9;
  color:var(--color-body);
}
.point__body small{
  color:var(--color-sub);
  font-size:11.5px;
  display:block;
  margin-top:6px;
}
/* ===================== ⑤ EQUIPMENT (テンパー主役) ===================== */
.section--equipment{
  position:relative;
  overflow:hidden;
  color:var(--color-white);
  padding:clamp(96px,12vw,168px) 0;
}
.equipment__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.equipment__bg::before{
  content:"";
  position:absolute;
  inset:0;
}
.section--equipment .container{
  position:relative;
  z-index:1;
}
.section--equipment .section__display{
  color:var(--color-white);
}
.section--equipment .section__title{
  color:var(--color-white);
}
.section--equipment .section__body{
  color:rgba(255,255,255,.92);
}
.equipment__gallery{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:20px;
  margin-top:clamp(48px,6vw,80px);
}
.equipment__figure{
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);
  margin:0;
}
/* ===================== ⑥ FLOW ===================== */
.steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(16px,2vw,32px);
  margin:clamp(48px,6vw,80px) 0 0;
  padding:0;
  list-style:none;
  position:relative;
}
.step{
  position:relative;
  text-align:center;
  padding:0 8px;
  min-width:0;
}
.step:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-16px;
  top:88px;
  width:12px;
  height:12px;
  border-top:1.5px solid var(--color-border-2);
  border-right:1.5px solid var(--color-border-2);
  transform:rotate(45deg);
  pointer-events:none;
}
.step__no{
  display:block;
  font-family:var(--font-en);
  font-weight:200;
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:-0.02em;
  color:var(--color-ink);
  margin-bottom:20px;
  line-height:1;
}
.step__icon{
  width:clamp(96px,10vw,132px);
  height:clamp(96px,10vw,132px);
  margin:0 auto 24px;
  border-radius:50%;
  border:1px solid var(--color-border-2);
  display:grid;
  place-items:center;
  color:var(--color-sub);
  transition:border-color .3s ease, color .3s ease, transform .3s ease;
}
.step__icon svg{
  width:42px;
  height:42px;
}
.step:hover .step__icon{
  border-color:var(--temper-mid);
  color:var(--temper-black);
  transform:translateY(-2px);
}
.step__title{
  font-size:clamp(15px,1.4vw,17px);
  font-weight:500;
  color:var(--color-ink);
  margin-bottom:12px;
  letter-spacing:.05em;
}
.step__body{
  font-size:12.5px;
  line-height:1.85;
  color:var(--color-body);
}
/* ===================== ⑦ COMPANY ===================== */
.company__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,88px);
  align-items:center;
}
.company__photo{
  aspect-ratio:4/5;
  border-radius:20px;
  overflow:hidden;
  background:var(--color-ph);
  display:grid;
  place-items:center;
  color:var(--color-ph-icon);
  margin:0;
}
.company__body{
  min-width:0;
}
.company__body .section__display{
  margin-bottom:12px;
}
.company__body .section__body{
  margin-top:32px;
  text-align:left;
  max-width:none;
}
.company__body .link-arrow{
  margin-top:36px;
}
/* ===================== RESPONSIVE (中間セクション) ===================== */
@media(max-width:900px){
  .section{
    padding:clamp(56px,9vw,96px) 0;
  }
  .section--equipment{
    padding:clamp(72px,10vw,120px) 0;
  }
  .section__display{
    font-size:clamp(44px,13vw,88px);
    letter-spacing:-0.02em;
  }
  .news__grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .pillars{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .points{
    grid-template-columns:1fr;
  }
  .equipment__gallery{
    grid-template-columns:1fr;
    gap:16px;
  }
  .steps{
    grid-template-columns:1fr;
    gap:36px;
  }
  .step:not(:last-child)::after{
    right:auto;
    left:50%;
    top:auto;
    bottom:-24px;
    transform:translateX(-50%) rotate(135deg);
  }
  .company__grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .company__body .section__display,.company__body .section__title{
    text-align:center;
  }
  .company__body .section__body{
    text-align:left;
  }
  .company__body .link-arrow{
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
    display:flex;
  }
}
@media(max-width:640px){
  .section__display{
    font-size:clamp(40px,15vw,68px);
  }
  .pillars{
    grid-template-columns:1fr;
  }
  .pillar{
    aspect-ratio:16/9;
  }
  .pillar__label{
    writing-mode:horizontal-tb;
    top:auto;
    bottom:16px;
    right:auto;
    left:20px;
    font-size:20px;
  }
  .link-arrow{
    gap:14px;
    font-size:13px;
  }
  .link-arrow__circle{
    width:44px;
    height:44px;
  }
}
/* =========================================================
   HERO — Redesign v2 (mi-6語彙 × テンパー × アシンメトリー × 遊び)
   既存の.hero/.hero__photo/.hero__copy/.hero__title/.hero__sub/.hero__cta
   の position/text/color を上書き。btn-fv/hero__accent は新HTMLで撤去。
   ========================================================= */
/* 左からのテンパー主役ブロブ */
/* 右下の副ブロブ（呼吸を作る） */
/* 極細巨大英字ディスプレイ（主役） */
/* 既存.hero__titleを上書き（インキ化・左寄せ・テキストシャドウ解除） */
.hero__sub{
  margin-top:0;
}
/* CTA: mi-6風のリンク矢印（大） */
/* 右カラム: 写真+浮遊カード */
.hero__photo{
  /* 既存absoluteを完全上書き */
  position:relative;
  left:auto;
  top:auto;
  width:100%;
  max-width:420px;
  height:auto;
  aspect-ratio:4/5;
  border-radius:18px;
  overflow:hidden;
  background:var(--color-ph);
  box-shadow:var(--shadow-soft);
  margin:0;
}
.hero__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Hero Responsive 上書き */
@media(max-width:900px){
  .hero__inner{
    grid-template-columns:1fr;
  }
  .hero__photo{
    max-width:none;
    aspect-ratio:16/10;
  }
}
/* =========================================================
   HERO — Redesign v3 (mi-6 実測ベース強化版)
   - 大英字1行化 clamp(58px,10.5vw,152px) wt200 ls-0.045em lh1
   - 背景=マルチradial-gradientの画面全体テンパーiridescent + slow drift
   - 右下=拡張カード(受付中バッジ+小サムネ+タイトル+タグ+円CTA)
   - 左隣=「会社を見る↓」円CTA(mi-6の"MI-6について"相当)
   - 上部eyebrow(- JACKSTELLA株式会社 / Kyushibo, Reborn.)で締める
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(60px,7vw,110px) 0 clamp(72px,8vw,120px);
  background:var(--color-nearwhite);
  min-height:clamp(620px,88vh,880px);
}
/* 画面全体を包む iridescent風テンパーブロブ */
/* 上に薄いグレイン/ハイライト */
.hero__inner{
  position:relative;
  z-index:1;
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(24px,3vw,52px);
  min-height:inherit;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr auto;
  gap:clamp(36px,5vw,72px);
  align-items:stretch;
}
.hero__stage{
  position:relative;
  z-index:2;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:clamp(0px,2vw,32px);
}
/* eyebrow: 会社名+英字サブ */
.hero__eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  font-family:var(--font-jp);
  font-size:12.5px;
  color:var(--color-sub);
  margin:0 0 clamp(20px,2.6vw,36px);
  flex-wrap:wrap;
}
.hero__eyebrow::before{
  content:"";
  display:block;
  width:36px;
  height:1px;
  background:var(--temper-black);
  flex:0 0 auto;
}
/* 極細巨大英字（1行・幅使う） */
.hero__title{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(20px,2.1vw,32px);
  line-height:1.55;
  letter-spacing:.06em;
  color:var(--color-ink);
  text-shadow:none;
  margin:0 0 8px;
  text-align:left;
}
.hero__sub{
  font-family:var(--font-jp);
  font-weight:400;
  font-size:clamp(14px,1.2vw,17px);
  color:var(--color-body);
  letter-spacing:.05em;
  text-shadow:none;
  margin:0;
  line-height:1.85;
}
/* aside: 下段（左＝会社を見る円CTA / 右＝拡張カード） */
/* 会社を見る円CTA */
/* 拡張カード */
/* Responsive v3 */
@media(max-width:900px){
  .hero{
    padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,88px);
    min-height:auto;
  }
  .hero__inner{
    gap:36px;
  }
  .hero__stage{
    padding-top:0;
  }
}
/* =========================================================
   HERO — Redesign v4 (写真メイン × テンパー金属焼け色)
   - 写真フル背景 + silver→black グラデを mix-blend-mode:multiply で
     写真そのものを「金属熱変色」に変質させる（テンパーカラーの本質）
   - 大英字は白抜き、コピー+CTAは on-dark、右下カード浮遊、左下cue残る
   - FV底辺にテンパー帯hairlineでブランド質感を締める
   ========================================================= */
.hero.hero--v4{
  position:relative;
  min-height:clamp(580px, 82vh, 780px);
  padding:clamp(120px,10vw,160px) 0 clamp(56px,6vw,88px);
  margin-top:-78px;
  /* header高さ分だけ食い込ませる（透明ヘッダー背後をFV写真で埋める） */
  background:var(--temper-black);
  overflow:hidden;
}
/* 写真フル背景 — v3の.hero__photo(絶対配置420px)を完全上書き */
.hero--v4 .hero__photo{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  width:auto;
  height:auto;
  max-width:none;
  aspect-ratio:auto;
  border-radius:0;
  box-shadow:none;
  z-index:0;
  margin:0;
  background:var(--temper-black);
  padding:0;
}
.hero--v4 .hero__photo img{
  display:block;
}
/* テンパー(金属熱変色)tint — multiply blend で写真色みを金属焼けに */
.hero__photo-tint{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background: linear-gradient(135deg,
    var(--temper-silver) 0%,
    var(--temper-mid) 42%,
    var(--temper-black) 100%);
  mix-blend-mode: multiply;
  opacity:.75;
  z-index:1;
  pointer-events:none;
}
/* 追加のグラデ: 上部にhighlight/下部を暗く（可読性） */
.hero__photo-grade{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background:
    radial-gradient(ellipse 60% 45% at 22% 22%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, transparent 30%, rgba(0,0,0,.55) 100%);
  z-index:2;
  pointer-events:none;
}
/* inner を写真の上に */
.hero--v4 .hero__inner{
  position:relative;
  padding:0 clamp(24px,3vw,52px);
}
/* eyebrow を白基調へ */
/* 大英字 & コピーは白抜き（写真の上） */
/* 会社を見る円CTA — 白円+テンパーインク */
/* カードは白背景で写真の上に浮遊感 */
/* FV底辺のテンパー帯（金属質感の締め） */
.hero__temper-band{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:6px;
  background:var(--grad-temper);
  z-index:4;
  pointer-events:none;
}
/* Responsive v4 */
@media(max-width:900px){
  .hero.hero--v4{
    min-height:auto;
    padding:clamp(56px,7vw,88px) 0;
  }
}
/* =========================================================
   HERO — v5 refinement
   コピー確定(ワイヤー忠実): 持続可能な金型補修の実現へ / 領域に捉われないレーザー溶接技術
   写真フル背景 + 左からsilver→blackのテンパー縦帯を写真の上に半透明で乗せ、
   その上に日本語見出しを配置。写真tintは弱めて火花色を少し残す。
   ========================================================= */
/* 写真tintを弱めに戻す（火花のオレンジを少し残す） */
/* 左テンパー縦帯（silver→black） */
.hero__panel{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  pointer-events:none;
}
/* stage: 左テンパー帯の上にコピーを配置 */
.hero--v4 .hero__inner{
  z-index:4;
}
/* 日本語見出しを主役に拡大（1行で綺麗に収まるサイズ） */
/* Responsive v5 */
@media(max-width:900px){
  .hero__panel{
    width:100%;
    background:linear-gradient(180deg,
      var(--temper-silver) 0%,
      var(--temper-mid) 42%,
      var(--temper-black) 100%);
    opacity:.82;
    -webkit-mask-image:linear-gradient(180deg, black 0%, black 72%, transparent 100%);
    mask-image:linear-gradient(180deg, black 0%, black 72%, transparent 100%);
  }
  .hero--v4 .hero__sub{
    font-size:clamp(14px,3.6vw,18px);
  }
}
/* =========================================================
   HERO v6 refinement (なおた様指示: 火花を右下CTA上に / テンパー黒寄り)
   - 写真: width130% + left-25% で画像を左シフト → 火花が右下寄りに見える
   - 左テンパー縦帯: silver短く / blackを長く（"焼け"感UP）
   - 写真tint軽くして火花のオレンジを残す
   - CTA(お問い合わせ+お電話)を右下aside内に移動、cueは撤去
   ========================================================= */
/* 写真: 拡大＋右下寄せ、火花のオレンジを彩度UPで目立たせる */
.hero--v4 .hero__photo{
  overflow:hidden;
}
.hero--v4 .hero__photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:20% 30%;
  filter: saturate(1.35) contrast(1.18) brightness(1.06);
  transform: scale(1.35);
  transform-origin: 20% 30%;
}
/* 写真tint超薄めに（火花のオレンジを最大限残す） */
.hero--v4 .hero__photo-grade{
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 42%, transparent 62%),
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35) 100%);
}
/* 左テンパー縦帯: グレー寄り（silver→midメインで真っ黒回避） */
/* 金属ヘアライン (縦の淡い光帯) — 鋼板の反射 */
.hero__panel::before{
  content:"";
  position:absolute;
  left:22%;
  top:-10%;
  width:2px;
  height:120%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.22) 35%,
    rgba(255,255,255,.06) 60%,
    transparent 100%);
  filter:blur(8px);
  pointer-events:none;
}
.hero__panel::after{
  content:"";
  position:absolute;
  right:14%;
  top:20%;
  width:1px;
  height:70%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.14) 50%,
    transparent 100%);
  filter:blur(4px);
  pointer-events:none;
}
/* stage: CTA消えたので余白調整 */
.hero--v4 .hero__stage{
  padding-top:clamp(48px,7vw,110px);
  padding-bottom:0;
  max-width:640px;
}
/* aside: 右下 absolute配置（CTAが必ず画面内に見えるように） */
/* 📌 2026-08-25：ここにあった .hero__aside / .hero__cta / .btn-square 系（29ブロック）を削除した。
   HTML から .hero__aside を外したのは 2026-08-04 で、CSS だけが死にコードとして残っていたもの。
   .hero__cta と .btn-square* も .hero__aside の中身専用で、HTML 参照は0件だった（実測）。
   削除分の全文＝`../../../_removed-css-20260825.txt`（html/ の外＝非公開）。 */
@media(max-width:640px){
  /* FVの下パディングを詰める（元は「ボタン列をFVの下端まで下ろす」ための指定だったが、
     ボタン自体が無くなった今も FV の余白として意味があるので残す） */
  .hero.hero--v4{
    padding-bottom:20px;
  }
}
/* =========================================================
   HERO v8: 見出し明朝体化 (Noto Serif JP) & 2行改行
   参考: イーエムオーFV。品位ある明朝で「持続可能な / 金型補修の実現へ」
   ========================================================= */
.hero--v4 .hero__title{
  font-family:"Noto Serif JP", "yakuhanjps", serif;
  font-weight:500;
  font-size:clamp(34px, 5.2vw, 76px);
  line-height:1.55;
  letter-spacing:.04em;
  color:var(--color-white);
  text-shadow:0 4px 28px rgba(0,0,0,.45);
  margin:0 0 clamp(24px,2.6vw,36px);
  text-align:left;
  max-width:none;
  word-break:keep-all;
  overflow-wrap:normal;
  font-feature-settings:"palt";
}
/* 見出し上のeyebrow英字（2026-08-04 明朝化。ワイヤーは英字も明朝だったため） */
.hero--v4 .hero__eyebrow{
  display:flex;
  align-items:center;
  font-family:var(--font-mincho);
  font-weight:400;
  font-size:12.5px;
  letter-spacing:.32em;
  color:rgba(255,255,255,.8);
  text-transform:uppercase;
  margin:0 0 24px;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.hero--v4 .hero__eyebrow::before{
  content:"";
  width:36px;
  height:1px;
  background:rgba(255,255,255,.75);
  flex:0 0 auto;
}
/* サブ（2026-08-04 明朝化。三上様の選定範囲＝FV全体） */
.hero--v4 .hero__sub{
  font-family:var(--font-mincho);
  font-weight:400;
  font-size:clamp(14px,1.3vw,20px);
  line-height:1.85;
  letter-spacing:.1em;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 14px rgba(0,0,0,.4);
  margin:0;
  max-width:none;
  text-align:left;
}
@media(max-width:900px){
  .hero--v4 .hero__title{
    font-size:clamp(28px, 7vw, 52px);
    line-height:1.5;
    letter-spacing:.03em;
  }
}
@media(max-width:640px){
  .hero--v4 .hero__title{
    font-size:clamp(26px, 7.5vw, 40px);
  }
}
/* =========================================================
   HERO v12: テンパー素材画像を全体に配置（鉄感・テンパー感マシマシ）
   - hero__panel = temper-01 (鉄板テンパー焼け) を左縦帯背景に
   - hero__photo-tint = temper-02 (光の帯) を screen blend で写真overlayに
   - section__deco--message = temper-03 (粒子) をメッセージブロブに差し替え
   - equipment__bg = temper-01 を設備紹介背景に
   Asset: なおた様提供 (GPT生成テンパー素材)
   ========================================================= */
/* 左テンパー縦帯: シャープな鋼板テンパー画像を主役に（回転コンテナ） */
.hero__panel{
  width:min(56%, 820px);
  background:none;
  overflow:hidden;
  opacity:1;
  z-index:1;
  -webkit-mask-image:linear-gradient(90deg, black 0%, black 68%, transparent 100%);
  mask-image:linear-gradient(90deg, black 0%, black 68%, transparent 100%);
}
/* 中の画像がゆっくり回転 — 初期位置は元と同じ right center */
.hero__panel-img{
  position:absolute;
  inset:-22%;
  background:url('../images/temper-04.webp') right center / cover no-repeat;
  transform-origin:center center;
  animation:heroPanelSpin 300s linear infinite;
  will-change:transform;
}
@keyframes heroPanelSpin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero__panel-img{
    animation:none;
  }
}
/* 左側グレーグラデ overlay (見出しの可読性UP・鋼板と共存) */
.hero__shade{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:min(48%, 700px);
  background:linear-gradient(90deg,
    rgba(20,22,26,.55) 0%,
    rgba(20,22,26,.35) 30%,
    rgba(20,22,26,.1) 65%,
    transparent 100%);
  z-index:2;
  pointer-events:none;
}
.hero__panel::before,.hero__panel::after{
  display:none;
}
/* 写真overlay: temper-02 (光の帯) を CTA背後(右下)だけに薄く */
.hero--v4 .hero__photo-tint{
  background:
    url('../images/temper-02.webp') right bottom / 55% 60% no-repeat;
  mix-blend-mode:screen;
  opacity:.28;
}
/* メッセージセクションのブロブ: temper-03 (粒子) に置き換え */
.section__deco--message{
  background:
    url('../images/temper-03.webp') center center / cover no-repeat;
  opacity:.85;
  filter:none;
  right:-18%;
  top:-25%;
  width:95%;
  height:120%;
  mix-blend-mode:multiply;
  border-radius:0;
}
/* 設備紹介の背景: temper-01 (鉄板) に置き換え */
.equipment__bg{
  background:
    linear-gradient(135deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%),
    url('../images/temper-01.webp') center center / cover no-repeat;
}
.equipment__bg::before{
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.15), transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(0,0,0,.45), transparent 55%);
  mix-blend-mode:overlay;
}
/* =========================================================
   HERO v14: 見出し 左→右 テンパー帯ワイプ + 文字リビールアニメ
   帯: silver→black のグラデがX方向にスライド
   文字: 帯が通過した後、下から現れる
   ========================================================= */
.hero__title--reveal{
  display:flex;
  flex-direction:column;
  gap:0;
}
.hero__title-line{
  display:block;
  position:relative;
  overflow:hidden;
  padding:2px 0;
  /* descender対応 */
}
.hero__title-inner{
  display:inline-block;
  transform:translateY(110%);
  will-change:transform;
  animation:heroTitleReveal .95s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:.55s;
}
.hero__title-line::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--temper-black) 22%,
    var(--temper-mid) 52%,
    var(--temper-silver) 82%,
    transparent 100%);
  transform:translateX(-100%);
  animation:heroTitleSweep 1.35s cubic-bezier(.65,0,.35,1) forwards;
  z-index:2;
  pointer-events:none;
}
/* 2行目は少し遅延（stagger） */
.hero__title--reveal .hero__title-line:nth-child(2)::before{
  animation-delay:.18s;
}
.hero__title--reveal .hero__title-line:nth-child(2) .hero__title-inner{
  animation-delay:.73s;
}
@keyframes heroTitleSweep{
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(120%); }
}
@keyframes heroTitleReveal{
  0%   { transform:translateY(110%); }
  100% { transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero__title-inner{
    transform:none;
    animation:none;
  }
  .hero__title-line::before{
    display:none;
  }
}
/* =========================================================
   SECTION overrides (なおた様指示)
   ② メッセージ = 白背景（temper-03ブロブ撤去）
   ③ ニュース = 鉄板temper-01背景・白文字・縦積み・カードダーク
   ========================================================= */
/* ② メッセージ: 上から下へ薄いグレーグラデ（silver→nearwhite） */
.section__deco--message{
  display:none;
}
/* ③ ニュース: 鉄板テンパー背景 + 白文字 */
/* ダーク背景でカードは半透明白＋ホバーで浮上 */
.section--news .news__link{
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:20px 22px 22px;
}
/* =========================================================
   HEADER: 初期透明/白文字 → スクロールで白背景 (ALPHA LASER流)
   ========================================================= */
.header{
  background:transparent;
  border-bottom-color:transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.header.is-scrolled{
  background:var(--color-white);
  border-bottom-color:var(--color-border);
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}
/* 初期(透明)時: ナビ・ハンバーガー・ロゴを白抜きに */
.header:not(.is-scrolled) .nav__link{
  color:var(--color-white);
}
.header:not(.is-scrolled) .nav__item:hover .nav__link{
  background:rgba(255,255,255,.14);
  color:var(--color-white);
}
.header:not(.is-scrolled) .header__toggle span{
  background:var(--color-white);
}
/* ロゴは白背景ありJPGのまま表示（filter適用しない） */
.header:not(.is-scrolled) .mega{
  background:rgba(20,22,26,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top-color:rgba(255,255,255,.12);
}
.header:not(.is-scrolled) .mega__link{
  color:rgba(255,255,255,.9);
}
.header:not(.is-scrolled) .mega__link:hover{
  background:rgba(255,255,255,.1);
  color:var(--color-white);
}
/* =========================================================
   v18 大改装
   - body dark 化（ヘッダー透明時のFV連結・白抜け防止）
   - section__display(英字)→小サブラベル / section__title→大メイン
   - section__head--left / section__more--right バリアント
   - 全体角丸→四角
   - ニュースカードに青みトーン
   - 事業/設備を共通ダーク背景（薄temper-04 + 黒マスク + 光グラデ）
   - Flow / Company にテンパー質感磨き
   ========================================================= */
/* body 背景は白のまま（hero を負marginでheader下に食い込ませて解決） */
/* section__display: 英字を小さめのサブラベル(eyebrow)に */
.section__display{
  overflow-wrap:normal;
  white-space:normal;
}
/* section__title: 日本語見出しを大きく、明朝でメインに */
.section__title{
  font-feature-settings:"palt";
}
/* head--left バリアント */
.section__head--left{
  text-align:left;
  margin-bottom:clamp(40px,5vw,64px);
}
.section__head--left .section__display,.section__head--left .section__title{
  text-align:left;
}
/* section__more--right */
.section__more--right{
  text-align:right;
  display:flex;
  justify-content:flex-end;
}
.section__more--right .link-arrow{
  margin:0;
}
/* 全体角丸→四角化 (Pointは除外) */
.news__link,.news__thumb,.pillar,.company__photo,.pillar__photo,.equipment__figure,.step__icon{
  border-radius:0 !important;
}
/* Point 01/02/03 は角丸で戻す */
.section--business .point{
  border-radius:20px !important;
}
/* ニュースカード: 白背景で浮遊感 */
.section--news .news__link{
  background:var(--color-white);
  border-color:transparent;
}
.section--news .news__link:hover{
  background:var(--color-white);
  border-color:transparent;
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(0,0,0,.28);
}
.section--news .news__thumb{
  background:var(--color-ph);
  color:var(--color-ph-icon);
  overflow:hidden;
}
.section--news .news__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.section--news .news__link:hover .news__thumb img{
  transform:scale(1.05);
}
.section--news .news__tag{
  background:var(--color-nearwhite);
  border-color:var(--color-border-2);
  color:var(--color-sub);
}
.section--news .news__date{
  color:var(--color-sub);
}
.section--news .news__title{
  color:var(--color-ink);
}
/* 事業(Business) と 設備(Equipment) を共通ダーク背景 */
.section--business,.section--equipment{
  position:relative;
  overflow:hidden;
  background:var(--temper-black);
  color:var(--color-white);
  padding:clamp(80px,10vw,140px) 0;
}
/* 薄いtemper-04画像を敷く */
.section--business::before,.section--equipment::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../images/temper-04.webp') center center / cover no-repeat;
  opacity:.22;
  z-index:0;
  pointer-events:none;
}
/* 少しカラフルな光グラデ + 黒マスク */
.section--business::after,.section--equipment::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 18%, rgba(90,140,240,.22), transparent 40%),
    radial-gradient(circle at 18% 82%, rgba(240,120,180,.18), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(255,180,80,.1), transparent 45%),
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.55) 100%);
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
}
.section--business>.container,.section--equipment>.container{
  position:relative;
  z-index:2;
}
.section--business .section__display,.section--equipment .section__display{
  color:rgba(255,255,255,.65);
}
.section--business .section__title,.section--equipment .section__title{
  color:var(--color-white);
}
.section--business .section__body,.section--equipment .section__body,.section--business .section__body p,.section--equipment .section__body p{
  color:rgba(255,255,255,.88);
}
.section--business .link-arrow,.section--equipment .link-arrow{
  color:var(--color-white);
}
.section--business .link-arrow__circle,.section--equipment .link-arrow__circle{
  border-color:rgba(255,255,255,.5);
  color:var(--color-white);
}
.section--business .link-arrow:hover .link-arrow__circle,.section--equipment .link-arrow:hover .link-arrow__circle{
  background:var(--color-white);
  color:var(--temper-black);
  border-color:var(--color-white);
}
/* Business の point カード: ダーク＋四角 */
/* Business の pillar: 四角ダーク */
.section--business .pillar{
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.1);
}
/* Equipment の gallery: ガラス感四角 */
.section--equipment .equipment__figure{
  border-color:rgba(255,255,255,.15);
}
.equipment__bg{
  display:none;
}
/* Flow: 白背景 + 左上テンパー光 (虹色ブロブと同じ位置に) + STEP */
.section--flow::before{
  content:"";
  position:absolute;
  left:-15%;
  top:-25%;
  right:auto;
  width:65%;
  height:90%;
  background:radial-gradient(ellipse at center,
    rgba(135,150,165,.85) 0%,
    rgba(135,150,165,.5) 30%,
    transparent 68%);
  opacity:1;
  filter:blur(8px);
  z-index:0;
  pointer-events:none;
}
.section--flow .step__icon{
  border-width:1.5px;
  transition:border-color .3s ease, background .3s ease, color .3s ease, transform .3s ease;
}
.section--flow .step:hover .step__icon{
  border-color:var(--temper-black);
}
/* Company: 白 + 左下テンパー光 + 写真四角 + ちょい豪華な帯 */
.section--company::before{
  left:-12%;
  bottom:-25%;
  width:52%;
  height:80%;
}
/* 会社案内: 上に細いテンパー帯を装飾 */
.section--company .company__body::before{
  content:"";
  display:block;
}
/* =========================================================
   v22 追加調整
   - hero__eyebrow の横罫線削除
   - section__title をゴシック(Noto Sans JP)へ
   - Message に radial グラデ2つ追加
   - News は Message と地続き、内側に角丸パネル(鉄板背景)
   ========================================================= */
/* eyebrow: 横罫線削除 */
.hero--v4 .hero__eyebrow::before{
  display:none;
}
.hero--v4 .hero__eyebrow{
  gap:0;
}
/* 見出し立ち位置逆転: 英字を大きく（メイン）、日本語を小さく（サブ） */
.section__display{
  font-family:var(--font-en);
  font-size:clamp(56px, 8.5vw, 128px);
  line-height:1;
  color:var(--color-ink);
  text-transform:none;
  text-align:center;
  margin:0;
}
.section__display--left{
  text-align:left;
}
/* 英字と日本語の間にテンパー帯hairline (Company流用) */
.section__display::after{
  content:"";
  display:block;
  width:44px;
  height:2px;
  background:var(--grad-temper);
  margin:22px auto 0;
}
.section__display--left::after{
  margin-left:0;
  margin-right:auto;
}
/* セクション和見出し。明朝化にあわせて字間を .24em → .14em に詰めた
   （明朝は仮想ボディに対して字面が小さく、ゴシックと同じ字間だと間延びするため） */
.section__title{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(13px, 1.1vw, 15px);
  letter-spacing:.14em;
  color:var(--color-sub);
  text-align:center;
  margin:20px 0 0;
  line-height:1.5;
}
.section__title--left{
  text-align:left;
}
/* Message: 白ベース + 右上に大きく濃いグレー円グラデ */
.section--message{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 85% 75% at 95% 12%,
      rgba(135,150,165,.85) 0%,
      rgba(135,150,165,.5) 25%,
      rgba(135,150,165,.2) 50%,
      transparent 72%),
    var(--color-white);
}
/* 虹色ブロブ (透過PNG・グレー円グラデと同じ右上に重ねてテンパー感UP) */
.section--message::before{
  content:"";
  position:absolute;
  left:auto;
  right:-20%;
  top:-25%;
  width:85%;
  height:140%;
  background:url('../images/message-bloom-t.webp') right top / contain no-repeat;
  opacity:.85;
  pointer-events:none;
  z-index:0;
  transform:scaleX(-1);
}
.section--message .container--narrow{
  position:relative;
  z-index:1;
}
/* News: Messageと地続き（背景=同じグラデ延長）＋padding調整 */
.section--news{
  background:linear-gradient(180deg,
    var(--color-nearwhite) 0%,
    color-mix(in oklab, var(--color-nearwhite) 85%, var(--temper-silver)) 100%);
  padding-top:0 !important;
  color:var(--color-ink);
}
/* section--news直下のstyle overrideを解除（displayとtitle） */
.section--news .section__display{
  color:rgba(255,255,255,.7);
}
.section--news .section__title{
  color:var(--color-white);
}
/* ニュース角丸パネル: 緑→青→紫グラデ背景 */
.news__panel{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  padding:clamp(48px,6vw,88px) clamp(28px,4vw,64px);
  background:
    linear-gradient(180deg, rgba(10,12,20,.15) 0%, rgba(10,12,20,.35) 100%),
    url('../images/news-bg.webp') center center / cover no-repeat;
  color:var(--color-white);
  box-shadow:0 30px 80px rgba(0,0,0,.18);
}
/* newsパネル内のカード: 白背景で浮遊感 */
.news__panel .news__link{
  background:var(--color-white);
  border-color:transparent;
}
.news__panel .news__link:hover{
  background:var(--color-white);
  border-color:transparent;
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(0,0,0,.28);
}
.news__panel .news__thumb{
  background:var(--color-ph);
  color:var(--color-ph-icon);
}
.news__panel .news__tag{
  background:var(--color-nearwhite);
  border-color:var(--color-border-2);
  color:var(--color-sub);
}
.news__panel .news__date{
  color:var(--color-sub);
}
.news__panel .news__title{
  color:var(--color-ink);
}
/* =========================================================
   v24: 事業pillar写真挿入 / Point 白カードおしゃれ化 / 設備地続き
   ========================================================= */
/* pillar 写真: <img> をカバー表示 */
.section--business .pillar__photo{
  background:none;
  overflow:hidden;
  position:absolute;
  inset:0;
}
.section--business .pillar__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.85) contrast(1.05) brightness(.85);
  transition:transform .6s ease, filter .4s ease;
}
.section--business .pillar:hover .pillar__photo img{
  transform:scale(1.06);
  filter:saturate(1) contrast(1.1) brightness(.95);
}
.section--business .pillar__photo::after{
  content:none;
}
/* Point 01/02/03: 白カード + 極細大英数字 + hairline */
.section--business .point{
  background:var(--color-white);
  color:var(--color-ink);
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:transform .3s ease, box-shadow .3s ease;
}
.section--business .point:hover{
  background:var(--color-white);
  border-color:transparent;
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(0,0,0,.28);
}
/* 左上のhairline装飾 */
.section--business .point::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:52px;
  height:2px;
  background:var(--grad-temper);
}
/* 番号: 極細大英字 */
/* 本文: 左寄せ、余白広め */
/* Metalwork wrapper: 事業と設備を1つの巨大背景で完全に地続きに (トーン軽め) */
.metalwork{
  position:relative;
  background:
    linear-gradient(135deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%),
    url('../images/temper-04.webp') center center / cover no-repeat;
  overflow:hidden;
}
.metalwork::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 15%, rgba(90,140,240,.22), transparent 40%),
    radial-gradient(circle at 18% 85%, rgba(240,120,180,.18), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255,180,80,.1), transparent 45%);
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
}
.metalwork>.section{
  position:relative;
  z-index:2;
}
/* wrapper内では各セクション自身の背景を撤去 */
.metalwork .section--business,.metalwork .section--equipment{
  background:transparent !important;
}
.metalwork .section--business::before,.metalwork .section--equipment::before,.metalwork .section--business::after,.metalwork .section--equipment::after{
  display:none !important;
}
/* padding調整: 両方に余白入れて隙間確保（背景はwrapper共通で地続き維持） */
.metalwork .section--business{
  padding-bottom:clamp(60px,7vw,100px) !important;
}
.metalwork .section--equipment{
  padding-top:clamp(60px,7vw,100px) !important;
}
/* 事業内容 白角丸パネル (中にグレー円グラデ+虹色ブロブ一部) */
.business__panel{
  position:relative;
  background:
    radial-gradient(ellipse 60% 55% at 95% 10%,
      rgba(135,150,165,.55) 0%,
      rgba(135,150,165,.2) 32%,
      transparent 65%),
    var(--color-white);
  border-radius:28px;
  padding:clamp(56px,6vw,96px) clamp(28px,4vw,64px);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  overflow:hidden;
  color:var(--color-ink);
}
.business__panel::before{
  content:"";
  position:absolute;
  left:-12%;
  bottom:-18%;
  width:60%;
  height:80%;
  background:url('../images/message-bloom-t.webp') left bottom / contain no-repeat;
  opacity:.5;
  pointer-events:none;
  z-index:0;
}
/* 右上のグレー円グラデの上に光の画像を重ねる */
.business__panel::after{
  content:"";
  position:absolute;
  right:-10%;
  top:-15%;
  width:55%;
  height:85%;
  background:url('../images/message-bloom-t.webp') right top / contain no-repeat;
  opacity:.7;
  pointer-events:none;
  z-index:0;
  transform:scaleX(-1);
}
.business__panel>*{
  position:relative;
  z-index:1;
}
/* 白panel内: 見出し・本文・カードを通常色に */
.metalwork .business__panel .section__display{
  color:var(--color-ink) !important;
}
.metalwork .business__panel .section__title{
  color:var(--color-sub) !important;
}
.metalwork .business__panel .section__body,.metalwork .business__panel .section__body p{
  color:var(--color-body);
}
.metalwork .business__panel .link-arrow{
  color:var(--color-ink);
}
.metalwork .business__panel .link-arrow__circle{
  border-color:var(--color-border-2);
  color:var(--color-body);
}
.metalwork .business__panel .link-arrow:hover{
  color:var(--temper-black);
}
.metalwork .business__panel .link-arrow:hover .link-arrow__circle{
  background:var(--temper-black);
  color:var(--color-white);
  border-color:var(--temper-black);
}
.metalwork .business__panel .point{
  background:rgba(200,210,220,.4);
  border:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.metalwork .business__panel .point:hover{
  background:rgba(200,210,220,.55);
  border:none;
  box-shadow:0 20px 44px rgba(0,0,0,.12);
}
/* =========================================================
   Point 01/02/03: 参考画像流入 (ユタカプラス風)
   背景に極細巨大数字 + 上にアイコン + タイトル + 本文
   ========================================================= */
.section--business .point{
  overflow:hidden;
  padding:clamp(28px,3vw,44px) clamp(28px,3vw,40px);
  text-align:left;
}
/* 背景の極細巨大数字 (白) */
.section--business .point::after{
  content:attr(data-num);
  position:absolute;
  top:-24px;
  right:-8px;
  font-family:var(--font-mincho);
  font-weight:100;
  font-size:clamp(130px, 12vw, 200px);
  color:rgba(255,255,255,.85);
  line-height:.9;
  letter-spacing:-0.06em;
  z-index:0;
  pointer-events:none;
}
.section--business .point--01::after{
  content:"01";
}
.section--business .point--02::after{
  content:"02";
}
.section--business .point--03::after{
  content:"03";
}
.section--business .point>*{
  position:relative;
  z-index:1;
}
/* POINT 01 ラベル (小さめ) */
/* アイコン: 丸背景なしで素配置 */
/* タイトル (大きめ) */
/* Point見出し（24px＝24px以上のため 2026-08-04 明朝化・ワイヤーも明朝W3 40px） */
.section--business .point__title{
  order:2;
  font-family:var(--font-mincho);
  font-weight:400;
  font-size:clamp(19px, 1.9vw, 24px);
  line-height:1.55;
  letter-spacing:.05em;
  color:var(--color-ink);
  margin:0 0 clamp(14px,1.5vw,20px);
  text-align:left;
}
/* Point本文: タイトルと同サイズ（ワイヤーでは見出しと1つのテキスト＝見出し扱い。2026-08-04 明朝化） */
.section--business .point__body{
  font-family:var(--font-mincho);
  font-weight:400;
  font-size:clamp(19px, 1.9vw, 24px);
  line-height:1.55;
  letter-spacing:.05em;
  color:var(--color-ink);
  text-align:left;
}
.section--business .point__body small{
  color:var(--color-sub);
  font-size:12px;
  font-weight:400;
  display:block;
  margin-top:8px;
}
/* 旧 point__no は撤去したため不要 */
/* Point 01/02/03 の上の線(見出し下hairline)を削除 */
.section--business .section__display::after{
  display:none;
}
/* 設備 gallery: 写真をカバー表示、暗めに */
.section--equipment .equipment__figure{
  overflow:hidden;
  padding:0;
  background:rgba(0,0,0,.35);
}
.section--equipment .equipment__figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.7) contrast(1.05) brightness(.82);
  transition:transform .6s ease, filter .4s ease;
}
.section--equipment .equipment__figure:hover img{
  transform:scale(1.05);
  filter:saturate(1) contrast(1.1) brightness(.95);
}
/* =========================================================
   v26 追加調整
   - 英字を Manrope (ミニマル)へ
   - ダーク背景セクションの section__title を白に
   - Flow: 大番号 + 接続線でオシャレ化
   - Company: ダーク調で高級感
   ========================================================= */
/* 英字系フォント：2026-08-04 に Manrope から明朝へ変更（サイト全体の明朝統一） */
.hero__eyebrow,.section__display,.step__no,.news__date{
  font-family:var(--font-mincho);
  font-weight:300;
  letter-spacing:-0.02em;
}
/* 巨大英字（Message / News / Business …）。
   明朝には 200 のウェイトが無いため、読み込んでいる Noto Serif JP の最小値 300 を明示する
   （200 のままでも 300 に丸められるが、意図を残すため明示） */
.section__display{
  font-weight:300;
  letter-spacing:-0.035em;
}
.hero__eyebrow{
  font-weight:400;
  letter-spacing:.32em;
}
.news__date{
  font-weight:400;
  letter-spacing:.05em;
}
/* ダーク背景セクションの section__title を白（グレー→白） */
.section--business .section__title,.section--equipment .section__title,.news__panel .section__title,.section--company .section__title{
  color:rgba(255,255,255,.9) !important;
}
.section--news .section__title{
  color:rgba(255,255,255,.9) !important;
}
/* ダーク背景セクションの section__display(英字) も白に統一 */
.section--business .section__display,.section--equipment .section__display,.news__panel .section__display,.section--news .section__display,.section--company .section__display{
  color:rgba(255,255,255,.98) !important;
}
/* =========================================================
   Flow 再デザイン (Agu参考画像流入): 01/step + 接続線 + アイコン
   ========================================================= */
.section--flow{
  padding:clamp(96px,10vw,140px) 0;
  background:var(--color-white);
}
.section--flow .steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
  margin-top:clamp(56px,7vw,96px);
  position:relative;
}
/* 上部接続線 (dot手前で切れる感じ) */
.section--flow .steps::before{
  content:"";
  position:absolute;
  left:12.5%;
  right:12.5%;
  height:1px;
  background:var(--color-ink);
  z-index:0;
}
.section--flow .step{
  transition:none;
}
.section--flow .step::after{
  display:none;
}
.section--flow .step:hover{
  background:transparent;
}
/* 番号 (01 大英字 + step 小ラベル) */
.section--flow .step__no{
  font-family:var(--font-mincho);
}
/* 接続点(●) */
.section--flow .step__dot{
  border-radius:50%;
  background:var(--color-ink);
}
/* アイコンを表示 (円ボーダーなしのlineアイコンをシンプルに) */
.section--flow .step__icon{
  border:none;
  border-radius:0;
}
.section--flow .step:hover .step__icon{
  color:var(--temper-black);
  border:none;
  background:transparent;
  transform:none;
}
.section--flow .step__title{
  margin-bottom:14px;
}
.section--flow .section__note{
  margin-top:clamp(40px,5vw,60px);
  text-align:center;
  font-size:12px;
  color:var(--color-sub);
}
@media (max-width:900px){
  .section--flow .steps{
    grid-template-columns:1fr;
    gap:clamp(36px,5vw,52px);
  }
  .section--flow .steps::before{
    display:none;
  }
}
/* Flow: 番号枠+線dot重ね+写真+小アイコン&タイトル横並び+本文 */
.section--flow .step{
  position:relative;
  overflow:visible;
  padding:0 clamp(12px,1.6vw,20px);
  text-align:left;
}
/* 番号: 枠なしシンプル縦積み (元のデザインに戻す) */
.section--flow .step__no{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:0;
  border:none;
  background:transparent;
  line-height:1;
  margin:0;
  min-width:0;
  position:relative;
  z-index:2;
}
.section--flow .step__no-num{
  font-family:var(--font-mincho);
  font-weight:300;
  font-size:clamp(22px,2.4vw,32px);
  color:var(--color-ink);
  letter-spacing:-0.02em;
}
.section--flow .step__no-label{
  font-family:var(--font-mincho);
  font-weight:400;
  font-size:10px;
  letter-spacing:.24em;
  color:var(--color-sub);
  text-transform:uppercase;
  margin-top:4px;
}
/* 番号枠と線dotの相対配置: dotを枠の下端に重ねる */
.section--flow .step__dot{
  width:12px;
  height:12px;
  margin:14px auto clamp(20px,2.5vw,32px);
  position:relative;
  z-index:1;
}
/* 上部接続線 (dotの高さに合わせて調整) */
.section--flow .steps::before{
  top:calc(clamp(56px,6vw,74px) + 14px);
}
/* 写真エリア */
.section--flow .step__photo{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  margin:0 0 clamp(20px,2.5vw,28px);
  background:var(--color-nearwhite);
}
.section--flow .step__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* アイコン(左)+タイトル(右)の横並び、アイコンは薄い四角枠 */
.section--flow .step__head{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  margin-bottom:clamp(12px,1.4vw,16px);
}
.section--flow .step__icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  color:var(--color-ink);
  flex:0 0 auto;
  border:1px solid var(--color-border-2) !important;
  border-radius:0 !important;
  padding:0;
  margin:0;
  background:var(--color-white) !important;
}
.section--flow .step__icon svg{
  width:22px;
  height:22px;
}
.section--flow .step__title{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(15px,1.4vw,17px);
  color:var(--color-ink);
  margin:0;
  letter-spacing:.05em;
  text-align:left;
  line-height:1.5;
}
/* 本文 */
.section--flow .step__body{
  font-size:13px;
  line-height:1.9;
  color:var(--color-body);
  text-align:left;
}
/* 旧CSS: step背景写真は撤去 (写真エリアに置き換え) */
.section--flow .step::before,.section--flow .step--01::before,.section--flow .step--02::before,.section--flow .step--03::before,.section--flow .step--04::before{
  content:none;
  background:none;
  display:none;
}
/* Companyコンパクト化: 写真+本文を中央寄せ (二つの間が画面中央) */
.section--company{
  padding:clamp(64px,7vw,96px) 0 !important;
}
.section--company .company__grid{
  grid-template-columns:280px minmax(340px, 500px);
  gap:clamp(48px,5vw,80px);
  margin:clamp(32px,4vw,52px) auto 0;
  justify-content:center;
  align-items:center;
}
.section--company .company__photo{
  max-width:280px;
  justify-self:end;
  margin-left:0;
}
/* 見出しと本文の左端を揃える */
.section--company .company__body .section__display,.section--company .company__body .section__title{
  margin-left:0;
  padding-left:0;
  text-align:left;
}
.section--company .company__body .section__body{
  margin-left:0;
  margin-right:0;
  max-width:none;
  font-size:14px;
  line-height:1.95;
  text-align:left;
}
.section--company .company__body .section__body p{
  font-size:14px;
  line-height:1.95;
}
@media (max-width:900px){
  .section--company .company__grid{
    grid-template-columns:1fr;
  }
  .section--company .company__photo{
    max-width:100%;
    justify-self:center;
  }
}
/* =========================================================
   Company 再デザイン: ダーク調で高級感
   ========================================================= */
.section--company{
  background:var(--temper-black);
  color:var(--color-white);
  overflow:hidden;
  position:relative;
  padding:clamp(96px,10vw,140px) 0;
}
.section--company::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../images/temper-01.webp') right center / cover no-repeat;
  opacity:.28;
  z-index:0;
  pointer-events:none;
  filter:none;
}
.section--company::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(80,120,220,.15), transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(220,80,150,.12), transparent 44%),
    linear-gradient(135deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.4) 100%);
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
}
.section--company>.container{
  position:relative;
  z-index:2;
}
.section--company .section__display,.section--company .section__title{
  color:var(--color-white);
}
.section--company .section__title{
  color:rgba(255,255,255,.7);
}
.section--company .company__grid{
  margin-top:clamp(48px,6vw,80px);
}
.section--company .company__photo{
  aspect-ratio:4/5;
  background:var(--temper-black);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
.section--company .company__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.85) contrast(1.05) brightness(.92);
}
.section--company .company__body{
  color:var(--color-white);
}
.section--company .company__body .section__body,.section--company .company__body .section__body p{
  color:rgba(255,255,255,.92);
  font-size:15px;
  line-height:2.15;
}
.section--company .company__body .section__body p+p{
  margin-top:1.5em;
}
.section--company .company__body::before{
  background:var(--grad-temper);
  width:48px;
  height:2px;
  margin-bottom:24px;
}
.section--company .link-arrow{
  color:var(--color-white);
}
.section--company .link-arrow__circle{
  border-color:rgba(255,255,255,.5);
  color:var(--color-white);
}
.section--company .link-arrow:hover .link-arrow__circle{
  background:var(--color-white);
  color:var(--temper-black);
  border-color:var(--color-white);
}
/* =========================================================
   Dark Band wrapper: Company + Contact を共通ダーク背景で
   ========================================================= */
.dark-band{
  position:relative;
  overflow:hidden;
}
.dark-band::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(80,120,220,.15), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(220,80,150,.12), transparent 45%);
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
}
/* シンプルな黒マスク */
.dark-band::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:1;
  pointer-events:none;
}
.dark-band>.section,.dark-band>.contact-cta{
  position:relative;
  z-index:2;
  background:transparent !important;
}
/* Company自身の背景は撤去(wrapperに委譲) */
.dark-band .section--company::before,.dark-band .section--company::after{
  display:none !important;
}
/* padding調整: 隙間なくして地続き */
.dark-band .section--company{
  padding-bottom:clamp(56px,6vw,84px) !important;
}
.dark-band .contact-cta{
  padding:clamp(24px,3vw,40px) 0 clamp(72px,9vw,120px) !important;
}
/* お問い合わせ白角丸パネル */
.contact__panel{
  background:var(--color-white);
  border-radius:28px;
  padding:clamp(48px,6vw,88px) clamp(28px,4vw,64px);
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  position:relative;
}
/* 両セクションの装飾背景が連続に見えるよう、bg-position を統一 */
.section--business::before,.section--equipment::before{
  background-position:center top;
}
/* =========================================================
   v27 大量調整
   - hero__title ゴシックミニマル (Noto Sans JP 300)
   - btn-square--pill 楕円化
   - point__icon スタイル
   - equipment スライダー化
   - Company 背景を temper-04 に変更・上線削除・CTA 右下
   - Contact 見出しを他section と統一（既存 section__display/title で自動対応）
   - Flow に虹色ブロブ overlay 追加
   ========================================================= */
/* 1. FV日本語見出し（2026-08-04 明朝・細めに確定）
   経緯: v27 でゴシック(Noto Sans JP 300)に変えていたが、ワイヤーは100%明朝であり、
   2026-08-04 に三上様が比較プレビューで「①明朝・細め」を選定。ここを書き換えて戻した。
   細め(W3)=font-weight:400。letter-spacing は三上様がご覧になったプレビューと同じ .02em を維持。
   （上の HERO v8 ブロックにも font-family/font-weight があるが、!important の有無が違うため
     check-css.py の死に宣言判定には掛からない。効いているのは本ブロック。） */
.hero--v4 .hero__title{
  font-family:var(--font-mincho) !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
}
/* 2. 楕円ボタン (pill) */
/* 3. Point アイコン */
.section--business .point{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  position:relative;
}
.section--business .point__body{
  order:3;
}
/* 4. Equipment gallery: 自動スクロール marquee (CSS animation) */
.section--equipment .equipment__gallery{
  display:block;
  grid-template-columns:none;
  overflow:hidden;
  padding:12px 0 24px;
  margin-top:clamp(48px,6vw,80px);
  mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
/* シームレスループの作り方（2026-08-02 修正）:
   トラックの gap ではなく各カードの margin-right で間隔を作る。
   こうすると「1枚あたりの占有幅 = カード幅 + 余白」が全枚で均一になり、
   同じ4枚を2セット並べた状態で translateX(-50%) が
   ちょうど1セット分と一致する＝継ぎ目なく無限に回る。
   （gap を使うと最後の1枚の後ろに余白が無い分だけ計算が合わず、
     以前は移動量が4倍以上に膨らんで画像が流れきってしまっていた） */
.equipment__track{
  display:flex;
  width:max-content;
  /* 流す速さ（2026-08-08 三上様ご指示「もっと遅く」で 12s → 40s）。
     実測: 1周の移動量は 1440px幅で1776px / 375px幅で1744px。
     12s のときは約148px/秒で、画像を見る前に流れきっていた。
     40s で約44px/秒。値を変えるときは「移動量 ÷ 秒数 = px/秒」で
     40〜50px/秒に収まるかを見る（幅が変わっても移動量はほぼ一定）。 */
  animation:equipmentMarquee 40s linear infinite;
}
@keyframes equipmentMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .equipment__track{
    animation:none;
  }
}
.section--equipment .equipment__figure{
  /* 旧: min(84%,420px)。トラックが width:max-content なので % の基準が決まらず、
     全幅で実質420px になったうえにトラックの内在幅が4倍以上に膨らんでいた。
     実測でどの画面幅でも420pxだったので、そのまま固定値にして循環参照を断つ。 */
  flex:0 0 420px;
  margin-right:clamp(16px,2vw,24px);
  grid-column:auto !important;
  transform:none !important;
  aspect-ratio:4/3;
}
/* 5. Company 背景 (グラデ画像 company-bg) */
.dark-band{
  background:
    linear-gradient(135deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.32) 100%),
    url('../images/company-bg.webp') center center / cover no-repeat;
}
/* 6. Company 上線削除 */
.section--company .company__body::before{
  display:none !important;
}
/* 7. Company CTA 右下 + JACKSTELLA 薄い大英字装飾 */
.section--company .company__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
  min-height:100%;
}
.section--company .company__body .section__body{
  margin-bottom:clamp(32px,4vw,52px);
}
.section--company .company__body .link-arrow{
  align-self:flex-end;
  margin-top:auto;
  position:relative;
  z-index:2;
}
/* 会社案内はこちら の裏に薄い巨大 JACKSTELLA */
.section--company .company__body::after{
  content:"JACKSTELLA";
  position:absolute;
  right:-8%;
  bottom:8%;
  font-family:var(--font-mincho);
  font-weight:200;
  font-size:clamp(84px, 13vw, 200px);
  letter-spacing:-0.045em;
  line-height:.9;
  color:rgba(255,255,255,.08);
  z-index:0;
  pointer-events:none;
  white-space:nowrap;
}
/* 8. Contact__panel: 他section と同じ head 構造で自動対応 */
.contact__panel .section__head--center{
  margin-bottom:clamp(32px,4vw,52px);
}
.contact__panel .section__display{
  color:var(--color-ink) !important;
}
.contact__panel .section__title{
  color:var(--color-sub) !important;
}
/* Contact 3つの四角: border 太く */
.contact-cta__item{
  border-width:2px !important;
  border-color:var(--color-border-2) !important;
}
.contact-cta__item:hover{
  border-color:var(--temper-black) !important;
}
/* News カード: border 太く */
.news__panel .news__link{
  border-width:2px !important;
}
.section--news .news__link{
  border-width:2px !important;
}
/* 9. Flow に虹色ブロブ overlay (透過PNG・左上大胆に) */
.section--flow{
  position:relative;
  overflow:hidden;
}
.section--flow::after{
  content:"";
  position:absolute;
  left:-15%;
  top:-20%;
  right:auto;
  bottom:auto;
  width:80%;
  height:130%;
  background:url('../images/message-bloom-t.webp') left top / contain no-repeat;
  opacity:.9;
  pointer-events:none;
  z-index:0;
  transform:none;
}
.section--flow>.container{
  position:relative;
  z-index:2;
}


/* =========================================================
   ★ 修正 2026-08-04（三上様 電話指示・設計書 ../2026-08-04-fix-design.md）
   後勝ちで上書きする追記ブロック。既存行は書き換えない。
   SP指定は本ブロック内の @media に置く（BF-107 再発防止）。

   ⚠️ 本ブロックに「ヘッダー視認性（J-1）」と「追従CTAの吹き出し（C-1）」は
      入れていない。2026-08-04 前田社長判断で両方とも保留になり、
      比較プレビューでデザインを決めてから本体へ入れる。
      → preview/header-visibility-20260804/ ・ preview/float-label-20260804/
   ========================================================= */

/* --- J-3 FVアニメーションの停止 -------------------------- */
/* ① 左側テンパー画像の回転（heroPanelSpin 300s infinite）を停止 */
.hero--v4 .hero__panel-img{
  animation:none !important;
}
/* ② 大見出しの出現アニメ（heroTitleReveal）を停止。
      初期状態が transform:translateY(110%)＝画面外のため、
      animation を切るだけだと見出しが消える。transform:none が必須。 */
.hero--v4 .hero__title-inner{
  animation:none !important;
  transform:none !important;
}
/* ③ 見出しを横切る光の帯（heroTitleSweep）も止める（②と一体の演出） */
.hero--v4 .hero__title-line::before{
  animation:none !important;
  display:none;
}

/* --- J-4 ロゴ背後の白プレート（2026-08-04 三上様ご指示で方式変更） ----
   旧方式＝白版ロゴを作って出し分け。
   新方式＝【ロゴの色は一切変えない】。原本1枚だけを使い、ファーストビューでは
           画面の左端からロゴの少し右までを白で埋めて、そこに原本を載せる。
   三上様のご要望＝「ロゴのカラー変更はしない形で進めたい。一部ロゴ付近のみ白背景か
   ヘッダー全体を白背景で」→ 前田社長判断で【ロゴ付近のみ】を採用（ヘッダー全体は白にしない）。

   ⚠️ 実装上の注意
   ・プレートは `.header::before`（`.header` は position:sticky ＝ 位置基準が取れている）に置く。
     `.header__inner{position:relative}` は**足さない**こと。姉妹案件 ALPHA LASER では
     これを足したせいでメガメニューの位置基準がズレた（本案件のメガは
     `.nav__item--has-mega` 基準なので直接は影響しないが、同じ轍を踏まない）。
   ・`z-index:-1` で `.header__inner` の中身より背面に置く。`.header` は z-index:50 で
     スタッキングコンテキストを作っているため、-1 にしてもFV写真より前面のまま。
   ・幅＝「画面左端 → ロゴ右端 + 余白」。`.header__inner` が中央寄せ（max-width + gutter）
     なので、画面が広がるとロゴも右へ動く。その分を max() で追従させる。 */
.header::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:calc(
    max((100vw - var(--maxw)) / 2, 0px)  /* 中央寄せコンテナの左オフセット */
    + var(--gutter)                      /* コンテナ内の左パディング */
    + 212px                              /* ロゴの描画幅 */
    + 28px                               /* ロゴ右の余白 */
  );
  background:var(--color-white);
  z-index:-1;
  opacity:1;
  transition:opacity .3s ease;           /* ヘッダー背景の .3s に合わせる */
  pointer-events:none;
}
/* スクロール後はヘッダー全体が白なのでプレートは不要（滑らかに消す） */
.header.is-scrolled::before{
  opacity:0;
}
/* SPはロゴ以外の要素が少なく、プレートが画面の大半を占めて見えるため少しだけ詰める */
@media (max-width:640px){
  .header::before{
    width:calc(var(--gutter) + 212px + 12px);
  }
}

/* --- J-1 ヘッダー視認性（案B くっきり影・2026-08-04 前田社長選定） ----
   JACKSTELLAのナビは白文字。文字のすぐ下に濃い影、その外側に広いぼかし影の
   二段構えにして、FV写真の明るい部分（白い溶接手袋）に重なっても読めるようにする。
   ⚠️ 文字の影だけで完結させること。背後にスクリムを敷く方式（`.header::before` ＋
      `.header__inner{position:relative}`）は `.mega` の包含ブロックを動かすため使わない。
   ⚠️ `.is-scrolled`（白背景ヘッダー）では影を出さない。 */
.header:not(.is-scrolled) .nav__link{
  text-shadow:0 1px 2px rgba(0,0,0,.92), 0 2px 10px rgba(0,0,0,.55);
}
/* SPのハンバーガーも白い3本線で同じ条件なので、同等の影を回す（線には text-shadow が
   効かないため drop-shadow を使う）。プレビューの案Bには含めていない追加分。 */
.header:not(.is-scrolled) .header__toggle{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}

/* --- C-1 / C-2 追従CTAのラベル（案B しっぽ付き・2026-08-04 前田社長選定） ----
   ボタン(60×60)は一切変えず、左隣にしっぽ付きの白カードを出す。
   アイコンのサイズ・位置は1pxも動かない（三上様のご指定）。 */
.floating-contact__btn{
  position:relative;
}
.floating-contact__label{
  position:absolute;
  top:50%;
  right:calc(100% + 12px);
  padding:10px 15px;
  border-radius:10px;
  background:var(--color-white);
  border:1px solid var(--color-border);
  color:var(--color-ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%) translateX(6px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
/* しっぽ＝枠線用の三角(::before)の上に、背景色の三角(::after)を1.5pxずらして重ねる */
.floating-contact__label::before,
.floating-contact__label::after{
  content:"";
  position:absolute;
  top:50%;
  left:100%;
  width:0;
  height:0;
  border:7px solid transparent;
  border-left-color:var(--color-border);
  transform:translateY(-50%);
}
.floating-contact__label::after{
  border-left-color:var(--color-white);
  margin-left:-1.5px;
}
.floating-contact__btn:hover .floating-contact__label,
.floating-contact__btn:focus-visible .floating-contact__label{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
/* SPはホバーの概念がないので出さない（現状維持） */
@media (max-width:768px){
  .floating-contact__label{ display:none; }
}


/* =========================================================
   下層ページ共通（2026-08-07 追加・下層10ページの器）
   ここから下は下層ページ専用。TOP（index.html）には影響しない。
   下層FV・パンくずの見た目は、下層ページのデザインの一部として調整してよい。
   ※ ただし .header / .footer / .contact-cta の定義には手を入れないこと。
   ========================================================= */
.page-fv{
  position:relative;
  overflow:hidden;
  padding:clamp(96px,12vw,160px) var(--gutter) clamp(72px,9vw,120px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.55) 100%),
    url('../images/fv-welding.jpg') center 40% / cover no-repeat;
}
.page-fv__inner{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  text-align:left;
}
.page-fv__title{
  font-family:var(--font-jp);
  font-weight:400;
  font-size:clamp(28px,3.6vw,44px);
  letter-spacing:.14em;
  color:var(--color-white);
  text-shadow:var(--shadow-text);
  text-align:left;
}
/* 背景に写真が入ったので、旧・灰色プレースホルダーは非表示 */
.page-fv__media{
  display:none;
}
.breadcrumb{
  padding:14px 0 0;
  font-family:var(--font-jp);
  font-size:13px;
  color:var(--color-sub);
}
.breadcrumb .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.breadcrumb__link{
  color:var(--color-sub);
  text-decoration:none;
}
.breadcrumb__link:hover{
  text-decoration:underline;
}
.breadcrumb__current{
  color:var(--color-body);
}
/* 中身をこれから作る場所の目印。作り終えたらこのブロックごと消す */
.wip{
  padding:96px 0;
}
.wip__note{
  font-family:var(--font-jp);
  color:var(--color-sub);
  text-align:center;
}

/* =========================================================
   会社案内ページ（company.html 専用ブロック）
   ワイヤー: wireframe/02_会社案内.png
   構成: ご挨拶 / 経営理念 / 会社概要+地図 / 沿革 / GALAXYグループ / パートナー企業
   表現: TOPの語彙を再構成。
        · 見出しの帯 = 溶接写真 + 黒マスク + 白文字（下層10ページ共通）
        · Greeting + Philosophy = radial灰色円 + message-bloom を wrapper で共有
          Philosophy 中身は news-bg を敷いた暗めグラデ角丸パネル、MVVカードは光画像入り
        · Overview + History = 白 wrapper。左上に光、左下に灰色radial円+光
        · Group = 白背景で単独
        · Partners + Contact = TOPの .dark-band に格納（company-bg.webp 継承）
   ========================================================= */

/* ---------- Phase wrapper（複数セクションを1つの背景で地続きに） ---------- */
.page-phase{
  position:relative;
  overflow:hidden;
}
.page-phase > .section{
  background:transparent !important;
}
.page-phase > .section{
  position:relative;
  z-index:2;
}

/* Soft phase: TOP .section--message と同じ radial 光 + 虹色ブロブ（右上・反転） */
.page-phase--soft{
  background:
    radial-gradient(ellipse 65% 55% at 92% 8%,
      rgba(135,150,165,.8) 0%,
      rgba(135,150,165,.4) 28%,
      rgba(135,150,165,.15) 55%,
      transparent 78%),
    var(--color-white);
}
.page-phase--soft::before{
  content:"";
  position:absolute;
  right:-14%;
  top:-10%;
  width:70%;
  height:70%;
  background:url('../images/message-bloom-t.webp') right top / contain no-repeat;
  opacity:.7;
  transform:scaleX(-1);
  pointer-events:none;
  z-index:1;
}

/* White phase: 上半分の左に Overview向け光、下半分の左に History向け灰色radial+光
   セクションの切れ目に被らないよう、各光は自セクションの中央に収める */
.page-phase--white{
  background:var(--color-white);
}
.page-phase--white::before{
  content:"";
  position:absolute;
  left:-16%;
  top:18%;
  width:52%;
  height:32%;
  background:url('../images/message-bloom-t.webp') left center / contain no-repeat;
  opacity:.4;
  pointer-events:none;
  z-index:1;
}
.page-phase--white::after{
  content:"";
  position:absolute;
  left:-14%;
  bottom:14%;
  width:58%;
  height:38%;
  background:
    radial-gradient(ellipse 60% 55% at 22% 55%,
      rgba(135,150,165,.55) 0%,
      rgba(135,150,165,.25) 40%,
      transparent 72%),
    url('../images/message-bloom-t.webp') left center / contain no-repeat;
  opacity:.7;
  pointer-events:none;
  z-index:1;
}

/* ---------- 共通：画像プレースホルダー ---------- */
.ph-media{
  background:var(--color-ph);
  color:var(--color-ph-icon);
  border-radius:4px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.ph-media::before{
  content:"";
  width:34%;
  aspect-ratio:1/1;
  border:2px solid currentColor;
  border-radius:4px;
}

/* ---------- ① Greeting（ご挨拶） ---------- */
/* 2026-08-25 Zoom（19:00）で「ご挨拶は ALPHA LASER と同じ構成＝写真を上・テキストを下に統一」と確定。
   2026-08-26 実装。旧＝写真を左・本文を右の2カラム（2026-08-25 版。さらにその前はワイヤー準拠の本文左・写真右）。
   🔴 HTMLは変えていない。.greeting__grid を1カラムにすると、写真列（.greeting__media）が先に来るので自然に写真が上に乗る。
   参照＝alphalaser-jp の .greeting__body(840px) / .greeting__figure(760px) / .greeting__text(760px)。 */
.section--greeting .greeting__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px,3.6vw,46px);
  justify-items:center;
  max-width:840px;
  margin:0 auto;
}
.greeting__media{
  display:flex;
  flex-direction:column;
  gap:14px;
  /* 幅は AL の .greeting__figure と同じ指定に揃えてある（下の1行が実体）。
     🔴 代表写真の原本は 468×312 しかないので PC では約1.62倍に引き伸ばしている（AL は 1600×1067 で等倍以下）。
        粗くなることを承知のうえで【AL と同じ形】に揃える判断（2026-08-26 前田社長・目視で最終確認する前提）。
        高解像度版をご支給いただければ、この指定のまま粗さだけ解消する。 */
  width:min(760px,100%);
}
.greeting__body{
  max-width:760px;
}
.greeting__body p{
  font-size:15px;
  line-height:2.05;
  color:var(--color-body);
}
.greeting__body p+p{
  margin-top:1em;
}
/* 2026-08-25：署名は写真の直下に移した（旧＝本文の下・右揃え）。写真幅に対して中央に置く。
   2026-08-26 に写真が上へ移ったが、署名は引き続き写真の直下・中央のままでよい（AL も写真下に置いている）。 */
/* 2026-09-08：ALPHA LASER と同じ2行組みへ（前田社長指示）。
   値は alphalaser-jp の .greeting__cap / __cap-role / __cap-name をそのまま写している。
   ⚠️ margin-top は 0 のまま。AL は figcaption に 14px を持たせているが、
      本サイトは .greeting__media の gap:14px で同じ間隔が既に出ているため（足すと28pxになる）。 */
.greeting__sign{
  margin-top:0;
  text-align:center;
  line-height:1.7;
}
.greeting__sign-role{
  display:block;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--color-sub);
}
.greeting__sign-name{
  display:block;
  font-size:clamp(15px,1.6vw,17px);
  font-weight:500;
  color:var(--color-ink);
}
/* 語のまとまりを保つための折り返し単位（2026-08-26 追加）。
   日本語は文字単位でどこでも折り返るので、長い名称が「金属製品再／生事業」のように語の途中で割れる。
   inline-block にすると要素の中では折り返らないので、行末はこの単位の切れ目に来る。
   🔴 使うのは「途中で割れると読めなくなる長い固有名」だけ。むやみに全見出しへ付けない。 */
.nowrap-unit{
  display:inline-block;
}
.greeting__photo{
  /* 原本 ichikawa-president.jpg が 468×312＝3:2。同じ比率にしておけば object-fit:cover でも切り取られない
     （2026-08-25 までは 3/4 の縦枠に収めていたので上下が切れていた）。 */
  aspect-ratio:3/2;
  width:100%;
}

/* ---------- ② Philosophy（経営理念）: 暗めグラデ角丸パネル ---------- */
.section--philosophy{
  padding-top:0 !important;
}
.philosophy__panel{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  padding:clamp(56px,7vw,96px) clamp(28px,4vw,64px);
  background:
    linear-gradient(180deg, rgba(10,12,20,.55) 0%, rgba(10,12,20,.75) 100%),
    url('../images/news-bg.webp') center center / cover no-repeat;
  color:var(--color-white);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.philosophy__panel > *{
  position:relative;
  z-index:1;
}
.philosophy__panel .section__display{
  color:rgba(255,255,255,.78);
}
.philosophy__panel .section__display::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.9),
    rgba(255,255,255,.55) 52%,
    rgba(255,255,255,.25));
}
.philosophy__panel .section__title{
  color:var(--color-white);
}
/* .philosophy__lead は 2026-08-17 に削除。
   見出しと MVV の間のリード2段落がワイヤー 20260807.xd から消えたため、HTML と一緒に落としている。 */
/* 2026-08-17：3列 → Mission／Vision の2列 ＋ Value を全幅（ワイヤーの配置） */
.philosophy__mvv{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);
  max-width:1120px;
  margin:0 auto;
  padding:0;
  list-style:none;
}
.mvv-card--wide{
  grid-column:1 / -1;
}
.mvv-values{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);
  margin:0;
  padding:0;
  list-style:none;
}
.mvv-value{
  list-style:none;
}
.mvv-value__title{
  font-family:var(--font-jp);
  font-size:15px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--color-ink);
  margin:0 0 10px;
}
.mvv-card{
  position:relative;
  overflow:hidden;
  padding:clamp(36px,4vw,56px) clamp(24px,2.6vw,40px);
  border:1px solid var(--color-border);
  background:var(--color-white);
  text-align:center;
  border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.mvv-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../images/message-bloom-t.webp') center center / 200% no-repeat;
  opacity:.55;
  pointer-events:none;
  mix-blend-mode:soft-light;
  z-index:0;
}
.mvv-card > *{
  position:relative;
  z-index:1;
}
.mvv-card__eyebrow{
  font-family:var(--font-en);
  font-size:clamp(22px,2.4vw,30px);
  letter-spacing:.1em;
  color:var(--color-ink);
  font-weight:400;
  margin:0;
}
.mvv-card__eyebrow::after{
  content:"";
  display:block;
  width:36px;
  height:1px;
  background:var(--grad-temper);
  margin:18px auto 22px;
}
.mvv-card__body{
  font-size:14px;
  line-height:2;
  color:var(--color-body);
  margin:0;
}

/* ---------- ③ Overview（会社概要）: 見出し左寄せ + Map ---------- */
.section--overview .section__head{
  text-align:left;
  max-width:var(--maxw);
  margin:0 auto clamp(40px,5vw,64px);
}
.section--overview .section__display{
  text-align:left;
}
.section--overview .section__display::after{
  margin-left:0;
  margin-right:auto;
}
.section--overview .section__title{
  text-align:left;
}
.section--overview .overview__grid{
  display:grid;
  grid-template-columns:minmax(240px,360px) 1fr;
  gap:clamp(32px,4.5vw,72px);
  align-items:start;
  max-width:1160px;
  margin:0 auto;
}
.overview__photo{
  aspect-ratio:4/5;
  width:100%;
}
.overview__table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
  line-height:1.9;
}
.overview__table th,
.overview__table td{
  padding:18px 8px 18px 20px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--color-border);
}
.overview__table tr:first-child th,
.overview__table tr:first-child td{
  border-top:1px solid var(--color-border);
}
.overview__table th{
  width:180px;
  color:var(--color-ink);
  font-weight:500;
  letter-spacing:.06em;
  background:transparent;
  white-space:nowrap;
}
.overview__table td{
  color:var(--color-body);
}
/* 2026-08-17、プレースホルダ文字「Google MAP」から実地図（iframe）に差し替え。
   中身が文字でなくなったので、文字用の指定（color / font-family / font-size / letter-spacing /
   place-items）は削除している。枠のサイズ・角丸・影は従来のまま。 */
.overview__map{
  margin:clamp(56px,7vw,96px) auto 0;
  max-width:var(--maxw);
  aspect-ratio:16/6;
  background:var(--color-ph);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 20px 46px rgba(0,0,0,.08);
}
.overview__map-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* ---------- ④ History（沿革） ---------- */
.section--history{
  padding-top:0 !important;
}
.history__list{
  max-width:960px;
  margin:0 auto;
  padding:clamp(28px,3.6vw,52px) clamp(24px,3.2vw,52px);
  list-style:none;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:20px;
  box-shadow:0 24px 56px rgba(0,0,0,.08);
}
.history__item{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:clamp(24px,3.4vw,64px);
  padding:22px 4px;
  border-bottom:1px solid var(--color-border);
  align-items:baseline;
}
.history__item:first-child{
  padding-top:6px;
}
.history__item:last-child{
  border-bottom:none;
  padding-bottom:6px;
}
.history__date{
  font-family:var(--font-en);
  color:var(--color-ink);
  font-size:14px;
  letter-spacing:.06em;
}
.history__body{
  color:var(--color-body);
  font-size:14.5px;
  line-height:1.95;
}

/* ---------- ⑤ Group（GALAXY相関図） ----------
   2026-08-09、CSS作図（リング＋ノード配置）から1枚画像に差し替え。
   素材は ALPHA LASER と共通（assets/images/galaxy-group-chart.webp・透過）。 */
.group__chart{
  max-width:760px;
  margin:0 auto clamp(34px,4.5vw,56px);
}
.group__chart-img{
  display:block;
  width:100%;
  height:auto;
}
/* ⑤-2 5社の役割と強み（親カード → 5枚のカード）。2026-08-09 ALPHA LASER から移植。
   ハイライト（--self）は JACKSTELLA に付ける（ALは自社=ALPHA LASER JAPAN に付けている）。 */
.orgchart{
  max-width:1180px;
  margin:0 auto;
}
.orgchart__parent{
  max-width:420px;
  margin:0 auto;
  padding:16px 20px;
  background:var(--color-galaxy-hd);
  color:var(--color-white);
  text-align:center;
  border-radius:4px;
}
.orgchart__parent-name{
  font-size:clamp(15px,1.6vw,18px);
  font-weight:600;
  letter-spacing:.06em;
}
.orgchart__parent-note{
  margin-top:6px;
  font-size:clamp(11px,1.15vw,12.5px);
  color:rgba(255,255,255,.86);
}
.orgchart__stem{
  display:block;
  width:1px;
  height:26px;
  margin:0 auto;
  background:var(--temper-mid);
}
.orgchart__children{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.2vw,16px);
  margin:0;
  padding:0;
  list-style:none;
}
.orgchart__card{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-top:6px solid var(--band,var(--color-ink));
  padding:18px 14px 20px;
  text-align:center;
}
.orgchart__card--aichi     { --band:var(--band-aichi); }
.orgchart__card--jackstella{ --band:var(--band-jackstella); }
.orgchart__card--alj       { --band:var(--band-alj); }
.orgchart__card--ale       { --band:var(--band-ale); }
.orgchart__card--suntec    { --band:var(--band-suntec); }
.orgchart__card--self{
  background:var(--color-self-bg);
  border-color:var(--band-jackstella);
}
.orgchart__name{
  margin-bottom:10px;
  color:var(--color-ink);
  font-size:clamp(12.5px,1.35vw,15px);
  font-weight:600;
  line-height:1.5;
}
.orgchart__tag{
  display:inline-block;
  margin-bottom:12px;
  padding:4px 12px;
  background:var(--color-mega-bg);
  border-radius:999px;
  font-size:clamp(10.5px,1.1vw,12px);
  color:var(--color-sub);
}
.orgchart__desc{
  text-align:left;
  color:var(--color-sub);
  font-size:clamp(11.5px,1.15vw,13px);
  line-height:1.85;
}
.group__desc{
  max-width:760px;
  margin:clamp(34px,4.5vw,56px) auto 0;
  font-size:14.5px;
  line-height:2;
  color:var(--color-body);
  text-align:center;
}

/* ---------- ⑥ Partners（パートナー企業）: dark-band 内・見出し左寄せ ---------- */
.dark-band .section--partners{
  padding-bottom:clamp(24px,3vw,40px) !important;
}
.dark-band .section--partners .section__head{
  text-align:left;
  max-width:1160px;
  margin:0 auto clamp(40px,5vw,64px);
}
.dark-band .section--partners .section__display{
  color:rgba(255,255,255,.85);
  text-align:left;
}
.dark-band .section--partners .section__display::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.9),
    rgba(255,255,255,.6) 52%,
    rgba(255,255,255,.3));
  margin-left:0;
  margin-right:auto;
}
.dark-band .section--partners .section__title{
  color:var(--color-white);
  text-align:left;
}
.partners__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);
  max-width:1160px;
  margin:0 auto;
  padding:0;
  list-style:none;
}
.partner-card{
  padding:clamp(28px,3.4vw,44px);
  background:var(--color-white);
  border:1px solid var(--color-border);
  display:flex;
  flex-direction:column;
  border-radius:8px;
  box-shadow:0 20px 46px rgba(0,0,0,.22);
}
.partner-card__head{
  text-align:center;
  padding-bottom:22px;
  border-bottom:1px solid var(--color-border);
}
.partner-card__name{
  font-size:clamp(18px,1.9vw,22px);
  font-weight:500;
  color:var(--color-ink);
  letter-spacing:.08em;
  line-height:1.5;
  margin:0;
}
.partner-card__lead{
  margin:12px 0 0;
  font-size:13px;
  color:var(--color-sub);
  letter-spacing:.04em;
}
.partner-card__catch{
  margin:22px 0 0;
  padding:0 6px;
  font-size:14px;
  color:var(--color-body);
  text-align:center;
  line-height:1.85;
}
.partner-card__media{
  margin-top:22px;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:14px;
  align-items:stretch;
}
.partner-card__logos{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0;
  list-style:none;
}
.partner-card__logo{
  aspect-ratio:1/1;
  background:var(--color-ph);
  color:var(--color-sub);
  font-family:var(--font-en);
  font-size:11px;
  letter-spacing:.06em;
  display:grid;
  place-items:center;
  border-radius:2px;
}
.partner-card__photo{
  aspect-ratio:16/9;
  width:100%;
}
.partner-card__points{
  margin:26px 0 0;
  display:grid;
  gap:16px;
  padding:0;
  list-style:none;
}
.partner-card__point-label{
  display:block;
  font-size:12px;
  color:var(--color-ink);
  border-bottom:1px solid var(--color-border);
  padding-bottom:6px;
  margin-bottom:8px;
  letter-spacing:.14em;
  font-weight:500;
}
.partner-card__point-body{
  font-size:13px;
  color:var(--color-body);
  line-height:1.85;
  margin:0;
}
/* 2026-08-17 新設。MEISEI カードの「サイトはこちら」ボタン（ワイヤー 20260807.xd）。
   ボタン自体は共通の .pill-link を使う。ここは置き位置だけ。 */
.partner-card__more{
  margin:26px 0 0;
  text-align:center;
}

/* ---------- 会社案内・レスポンシブ ---------- */
@media (max-width:900px){
  .orgchart__children{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }
  /* 2026-08-26：ご挨拶は1カラム＋写真幅 min(468px,100%)＋署名中央が基本指定になったので、
     ここでの上書き（1カラム化・写真 280px・署名中央）は不要になった。削除済み。 */
  .philosophy__mvv,
  .mvv-values,
  .partners__grid{
    grid-template-columns:1fr;
  }
  .section--overview .overview__grid{
    grid-template-columns:1fr;
  }
  .overview__photo{
    max-width:320px;
    margin:0 auto;
  }
  .overview__table th{
    width:34%;
    padding:14px 8px;
    white-space:normal;
  }
  .overview__table td{
    padding:14px 8px;
  }
  .overview__map{
    aspect-ratio:4/3;
  }
  .history__item{
    grid-template-columns:110px 1fr;
    gap:16px;
    padding:18px 4px;
  }
  .partner-card__media{
    grid-template-columns:56px 1fr;
  }
}

/* =========================================================
   お知らせ一覧ページ（news.html 専用ブロック）
   ワイヤー: wireframe/03_お知らせ一覧.png
   構成: 見出し左寄せ / 3列×4行の記事カード / ページネーション
   ========================================================= */
.section--news-list .section__head{
  text-align:left;
  max-width:var(--maxw);
  margin:0 auto clamp(32px,4vw,52px);
}
.section--news-list .section__display{
  text-align:left;
}
.section--news-list .section__display::after{
  margin-left:0;
  margin-right:auto;
}
.section--news-list .section__title{
  text-align:left;
}
.news-list__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
  max-width:var(--maxw);
  margin:0 auto;
  padding:0;
  list-style:none;
}
.news-card{
  list-style:none;
  min-width:0;
}
.news-card__link{
  display:block;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:4px;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.news-card__link:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 44px rgba(0,0,0,.14);
}
.news-card__link:focus-visible{
  outline:2px solid var(--temper-black);
  outline-offset:2px;
}
.news-card__thumb{
  aspect-ratio:1/1;
  width:100%;
  border-radius:0;
}
.news-card__body{
  padding:20px 22px 24px;
}
.news-card__title{
  font-size:15px;
  font-weight:500;
  color:var(--color-ink);
  line-height:1.75;
  overflow-wrap:anywhere;
  min-width:0;
  margin:0;
}
.news-card__date{
  display:block;
  margin-top:10px;
  font-family:var(--font-en);
  font-size:12.5px;
  color:var(--color-sub);
  letter-spacing:.06em;
}

/* ページネーション（1 2 3 … 10） */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(14px,2vw,28px);
  margin-top:clamp(48px,6vw,80px);
  font-family:var(--font-en);
  font-size:clamp(16px,1.6vw,20px);
  letter-spacing:.08em;
  color:var(--color-body);
}
.pagination__link,
.pagination__current,
.pagination__dots{
  padding:6px 10px;
  line-height:1;
}
.pagination__link{
  color:var(--color-body);
  transition:color .25s;
}
.pagination__link:hover{
  color:var(--temper-black);
}
.pagination__current{
  color:var(--temper-black);
  border-bottom:1px solid var(--temper-black);
}
.pagination__dots{
  color:var(--color-sub);
  letter-spacing:.24em;
  padding:6px 4px;
}

@media (max-width:900px){
  .news-list__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
}
@media (max-width:520px){
  .news-list__grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   お知らせ詳細ページ（news-detail.html 専用ブロック）
   ワイヤー: wireframe/04_お知らせ詳細.png
   構成: 記事タイトル / ヒーロー画像 / 本文 / 「お知らせ一覧に戻る」
   本番では WordPress の投稿テンプレートになる。
   ========================================================= */
.section--article .article{
  max-width:960px;
  margin:0 auto;
}
.article__head{
  padding-bottom:22px;
  border-bottom:1px solid var(--color-border);
  margin-bottom:clamp(40px,5vw,64px);
}
.article__title{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(20px,2.2vw,26px);
  color:var(--color-ink);
  line-height:1.6;
  letter-spacing:.06em;
  margin:0;
}
.article__hero{
  aspect-ratio:16/7;
  width:100%;
  margin:0 0 clamp(40px,5vw,64px);
}
.article__body{
  font-size:15px;
  line-height:2.05;
  color:var(--color-body);
}
.article__body p+p{
  margin-top:1.6em;
}
.article__nav{
  margin-top:clamp(56px,7vw,96px);
  display:flex;
  justify-content:center;
}

/* link-arrow の戻る版：矢印を左に、順序を反転 */
.link-arrow--back{
  flex-direction:row-reverse;
}
.link-arrow--back .link-arrow__circle svg{
  transform:scaleX(-1);
}
.link-arrow--back:hover .link-arrow__circle{
  transform:translateX(-4px);
}

/* =========================================================
   設備紹介ページ（equipment.html 専用ブロック）
   ワイヤー: wireframe/05_設備紹介.png
   構成: カテゴリごとに 3列×N の設備カード（画像+設備名+説明）
   ========================================================= */
.section--equipment-list .section__head{
  text-align:left;
  max-width:var(--maxw);
  margin:0 auto clamp(32px,4vw,52px);
}
.section--equipment-list .section__display{ text-align:left; }
.section--equipment-list .section__display::after{ margin-left:0; margin-right:auto; }
.section--equipment-list .section__title{ text-align:left; }

.equip-group{
  max-width:var(--maxw);
  margin:0 auto;
}
/* 2026-08-25：説明文を無くしたぶん、カテゴリ間の余白も詰めた（旧 clamp(56px,7vw,88px)）。
   カテゴリ数が5→12に増えてページが伸びるため（前田社長ご指示「消したテキスト分の余白を少し詰めたり」）。 */
.equip-group + .equip-group{
  margin-top:clamp(40px,4.6vw,60px);
}
.equip-group__head{
  display:flex;
  align-items:center;
  gap:clamp(20px,3vw,40px);
  margin-bottom:clamp(28px,3.4vw,44px);
}
.equip-group__title{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(15px,1.4vw,18px);
  letter-spacing:.12em;
  color:var(--color-ink);
  white-space:nowrap;
  margin:0;
}
.equip-group__rule{
  flex:1 1 auto;
  height:1px;
  background:var(--color-border);
}
/* 2026-08-25 レイアウト刷新：
   旧＝カテゴリの中に設備カード（サムネ＋設備名＋説明文）を3列グリッドで並べる
   新＝カテゴリに代表画像1枚（大きく）＋その下に設備名だけを並べる
   根拠＝2026-08-25 通話（三上様）。詳細は equipment.html の実装コメント。
   旧クラス（.equip-group__grid / .equip-card / .equip-card__thumb / __name / __desc）は
   HTML から消えたのでCSSも削除した。 */
.equip-group__photo{
  width:100%;
  max-width:720px;
  aspect-ratio:16/9;
  margin:0 auto;
}
.equip-names{
  max-width:720px;
  margin:clamp(16px,1.8vw,22px) auto 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.equip-name{
  list-style:none;
  font-size:14.5px;
  font-weight:500;
  color:var(--color-ink);
  letter-spacing:.06em;
  line-height:1.8;
  text-align:center;
}
/* 📌 2026-08-25 まで、docx に載っていないカテゴリに確認中の目印クラスを付けて残していた（CSSの指定は持たせていない）。
   2026-08-26、Zoom で「docx が正」と確定 → 該当2カテゴリを削除したので、その目印クラスも実体ごと消えている。 */

/* =========================================================
   事業ページ 共通ブロック（business-welding / -recycle / -mold / -plant）
   ワイヤー: wireframe/06〜09_事業_*.png
   構成: リード / Features / Point / Achievements
   ここで決めた形を事業4枚に共通展開する（_技術メモ.md §4）
   ========================================================= */

/* ---------- ① リード（灰色radial + 光ブロブを右に）---------- */
.section--biz-lead{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 65% 60% at 92% 50%,
      rgba(135,150,165,.7) 0%,
      rgba(135,150,165,.35) 30%,
      rgba(135,150,165,.15) 55%,
      transparent 78%),
    var(--color-white);
}
.section--biz-lead::before{
  content:"";
  position:absolute;
  right:-14%;
  top:-10%;
  width:65%;
  height:130%;
  background:url('../images/message-bloom-t.webp') right center / contain no-repeat;
  opacity:.72;
  transform:scaleX(-1);
  pointer-events:none;
  z-index:0;
}
.section--biz-lead > .container{
  position:relative;
  z-index:1;
}
.section--biz-lead .biz-lead-head{
  text-align:center;
  margin:0 auto clamp(40px,5vw,64px);
}
.section--biz-lead .biz-lead-head__eyebrow{
  font-family:var(--font-en);
  font-size:12.5px;
  letter-spacing:.4em;
  color:var(--color-sub);
  margin:0 0 clamp(16px,2vw,24px);
}
.section--biz-lead .biz-lead-head__title{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(28px,4vw,52px);
  letter-spacing:.1em;
  color:var(--color-ink);
  line-height:1.4;
  margin:0;
}
.section--biz-lead .biz-lead-head__title::after{
  content:"";
  display:block;
  width:52px;
  height:2px;
  background:var(--grad-temper);
  margin:28px auto 0;
}
.section--biz-lead .biz-lead{
  max-width:820px;
  margin:0 auto;
  text-align:center;
  font-size:15px;
  line-height:2.1;
  color:var(--color-body);
}
.section--biz-lead .biz-lead p+p{
  margin-top:1em;
}

/* ---------- ② Features（news-bg 背景・見出し左・中身は白い大角丸カード１つ）---------- */
.section--biz-features{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,12,20,.55) 0%, rgba(10,12,20,.65) 100%),
    url('../images/news-bg.webp') center center / cover no-repeat;
}
.section--biz-features .section__head{
  text-align:left;
  max-width:var(--maxw);
  margin:0 auto clamp(48px,6vw,80px);
}
.section--biz-features .section__display{
  color:var(--color-white);
  text-align:left;
}
.section--biz-features .section__display::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.95),
    rgba(255,255,255,.65) 52%,
    rgba(255,255,255,.35));
  margin-left:0;
  margin-right:auto;
}
.section--biz-features .section__title{
  color:var(--color-white);
  text-align:left;
}

/* 大きい白角丸カード（3件を1枚に収める） */
.biz-features{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(24px,3vw,44px) clamp(28px,3.4vw,56px);
  background:var(--color-white);
  border-radius:24px;
  box-shadow:0 24px 56px rgba(0,0,0,.24);
}
.biz-feature-list{
  padding:0;
  margin:0;
  list-style:none;
}
.biz-feature{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(24px,3vw,44px);
  padding:clamp(32px,4vw,52px) 0;
  list-style:none;
}
.biz-feature:not(:first-child){
  border-top:1px solid var(--color-border);
}
/* 交互配置: 写真とテキストを左右入れ替え（ident は右端に） */
.biz-feature--reverse{
  flex-direction:row-reverse;
}

.biz-feature__ident{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:0 6px;
  flex:0 0 auto;
}
.biz-feature__eyebrow{
  writing-mode:vertical-rl;
  font-family:var(--font-en);
  font-size:12px;
  letter-spacing:.36em;
  color:var(--color-ink);
  line-height:1;
}
.biz-feature__ident-rule{
  width:1px;
  height:48px;
  background:var(--color-ink);
  opacity:.6;
}

.biz-feature__body{
  min-width:0;
  flex:0 1 380px;
  max-width:400px;
}
.biz-feature__no{
  font-family:var(--font-en);
  font-size:clamp(38px,4.4vw,60px);
  color:var(--color-sub);
  line-height:1;
  font-weight:400;
  letter-spacing:0;
  margin:0;
  opacity:.55;
}
.biz-feature__title{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(19px,2.2vw,26px);
  color:var(--color-ink);
  line-height:1.55;
  letter-spacing:.06em;
  margin:clamp(10px,1.4vw,18px) 0 0;
}
.biz-feature__desc{
  font-size:14.5px;
  line-height:1.95;
  color:var(--color-body);
  margin:clamp(12px,1.6vw,20px) 0 0;
}

.biz-feature__media{
  position:relative;
  aspect-ratio:4/3;
  width:min(340px, 40vw);
  flex:0 0 auto;
}
.biz-feature__photo{
  width:100%;
  height:100%;
  margin:0;
}

/* ---------- ③ Point（灰色radial + 光ブロブを右上に1個だけ）---------- */
.section--biz-point{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 45% 40% at 88% 12%,
      rgba(135,150,165,.55) 0%,
      rgba(135,150,165,.22) 42%,
      transparent 72%),
    var(--color-white);
}
.section--biz-point::before{
  content:"";
  position:absolute;
  right:-10%;
  top:-10%;
  width:55%;
  height:60%;
  background:url('../images/message-bloom-t.webp') right top / contain no-repeat;
  opacity:.6;
  transform:scaleX(-1);
  pointer-events:none;
  z-index:0;
}
.section--biz-point > .container{
  position:relative;
  z-index:1;
}
.section--biz-point .biz-point-head{
  text-align:center;
  max-width:var(--maxw);
  margin:0 auto clamp(40px,5vw,64px);
}
.section--biz-point .biz-point-head__title{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(28px,4vw,56px);
  letter-spacing:.14em;
  color:var(--color-ink);
  text-align:center;
  line-height:1.5;
  margin:0;
}
.section--biz-point .biz-point-head__title::after{
  content:"";
  display:block;
  width:44px;
  height:2px;
  background:var(--grad-temper);
  margin:24px auto 0;
}
/* 2026-08-18：三上様・前田社長から「産業機械整備・プラント保全ページの写真が左にずれている」
   とご指摘。当方の Chromium / WebKit では 1280〜3200px の7サイズすべてで左右の余白が一致し
   （例：1440px で左右とも200px）、4ページとも同じ座標だったため再現できていない。
   再現できない以上「直った」と言い切れないので、どの経路で崩れても中央に来るように固めた。
   ・width:100% を明示（枠が想定より狭くならないように）
   ・margin-left/right:auto を個別指定（一括指定の解釈差を避ける）
   ・overflow:hidden と object-position:center（写真が枠より広くなっても左に寄らせない）
   ・img 側にも margin-inline:auto（width が効かない経路に落ちても中央に置く）
   HTML側は <img> に width/height 属性を入れて、CSS適用前から比率が確定するようにした。 */
.biz-point__photo{
  width:100%;
  max-width:960px;
  aspect-ratio:16/9;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:clamp(32px,4vw,56px);
  overflow:hidden;
}
.biz-point__photo > img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  margin-inline:auto;
}
.biz-point__body{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  font-size:15px;
  line-height:2;
  color:var(--color-body);
}

/* ---------- 丸角アウトラインボタン（2026-08-17 新設・ワイヤー 20260807.xd）----------
   使う場所は2つ。①事業内容4ページの「設備紹介」リンク3本 ②会社案内の「株式会社MEISEIのサイトはこちら」。
   ワイヤー実測＝①400×65px・角丸20px ②285×73px・角丸10px。どちらも 1px 枠線（#707070）＋明朝。
   同じ部品なので1つのクラスにまとめ、1920幅の実測を本サイト（1440基準）の寸法に落としてある。
   枠線は本サイトの階調に合わせて --color-border-2 を使う（生hexは書かない）。 */
.pill-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(14px,1.6vw,24px);
  max-width:var(--maxw);
  margin:clamp(32px,4vw,52px) auto 0;
  padding:0;
  list-style:none;
}
.pill-links > li{
  list-style:none;
}
.pill-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:300px;
  min-height:52px;
  padding:14px 26px;
  border:1px solid var(--color-border-2);
  border-radius:var(--radius-btn);
  background:var(--color-white);
  color:var(--color-ink);
  font-family:var(--font-jp);
  font-size:14.5px;
  letter-spacing:.06em;
  line-height:1.5;
  text-align:center;
  text-decoration:none;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.pill-link[href]:hover{
  border-color:var(--color-ink);
  background:var(--color-hover-bg);
}
.pill-link:focus-visible{
  outline:2px solid var(--color-ink);
  outline-offset:3px;
}
/* href を持たないボタン＝リンク未確定（JACKSTELLA の設備紹介）。
   本番デプロイ後に自社リンクへ差し替える（2026-08-17 前田社長指示）。
   見た目は3本そろえたいので、カーソルだけ通常に戻す。 */
.pill-link:not([href]){
  cursor:default;
}

/* ============================================================
   ④ Achievements（実績）の体裁 ①通常時
   🔴 2026-09-08、三上様ご指示で実績を非表示にしたぶん。将来戻す可能性があるとのお話（同日お電話）
      なので削除せずコメントで保全している。**この枠を外すだけで元に戻る。**
      🔴 保全は3箇所に分かれている（①ここ ②max-width:900px の中 ③max-width:640px のブロック）。
         **3つとも外すこと。**①だけ外すと PC でも2列になる（予行演習で実測）。
      事業4ページ（business-*.html）側の ④ Achievements も同様にコメントなので、必ず一緒に外す。
      注記つきの原本＝_removed-css-20260908.txt ／ 手を入れる前の全文＝_backup_html_20260908/
   ------------------------------------------------------------

.dark-band .section--biz-achv{
  padding-bottom:clamp(48px,6vw,80px) !important;
}
.dark-band .section--biz-achv .section__head{
  text-align:right;
  max-width:var(--maxw);
  margin:0 auto clamp(40px,5vw,64px);
}
.dark-band .section--biz-achv .section__display{
  text-align:right;
  color:rgba(255,255,255,.85);
}
.dark-band .section--biz-achv .section__display::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.9),
    rgba(255,255,255,.6) 52%,
    rgba(255,255,255,.3));
  margin-left:auto;
  margin-right:0;
}
.dark-band .section--biz-achv .section__title{
  text-align:right;
  color:var(--color-white);
}

.biz-achv-list{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px);
  padding:0;
  list-style:none;
}
.biz-achv{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,1.8vw,22px);
  padding:clamp(20px,2.2vw,28px);
  background:var(--color-white);
  border-radius:20px;
  box-shadow:0 20px 46px rgba(0,0,0,.2);
  list-style:none;
}
.biz-achv__photo{
  aspect-ratio:16/9;
  width:100%;
  margin:0;
}
.biz-achv__title{
  font-size:14.5px;
  font-weight:500;
  color:var(--color-ink);
  letter-spacing:.06em;
  margin:0;
}

   ============================================================ */

/* ---------- ⑤ 紹介動画（2026-08-17 新設・ワイヤー 20260807.xd／2026-08-18 見出し追加）----------
   動画は未支給。支給されたら中身を iframe に差し替える（枠のサイズはそのまま使える）。
   ワイヤーの箱は 1060×348px だが動画比率と合わないためプレースホルダと判断し、16:9 で組む。

   2026-08-18：三上様ご指示で Achievements から切り離した。見出しは Achievements（右揃え）の
   左右反転＝左揃え。dark-band 内で左揃えにする書き方は .section--partners に前例があるので
   同じ組み方に合わせている（新しい書き方を増やさない）。 */
.dark-band .section--biz-movie .section__head{
  text-align:left;
  max-width:var(--maxw);
  margin:0 auto clamp(40px,5vw,64px);
}
.dark-band .section--biz-movie .section__display{
  text-align:left;
  color:rgba(255,255,255,.85);
}
.dark-band .section--biz-movie .section__display::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.9),
    rgba(255,255,255,.6) 52%,
    rgba(255,255,255,.3));
  margin-left:0;
  margin-right:auto;
}
.dark-band .section--biz-movie .section__title{
  text-align:left;
  color:var(--color-white);
}
.biz-movie__frame{
  max-width:960px;
  margin:0 auto;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  background:var(--color-ph);
  color:var(--color-ph-icon);
  border-radius:4px;
  font-family:var(--font-jp);
  font-size:15px;
  letter-spacing:.1em;
}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .biz-feature{
    /* 🔴 2026-08-25 修正：ここは元々 grid-template-columns / grid-column を当てていたが、
       .biz-feature の既定が display:flex のため、グリッド指定が1つも効いていなかった。
       結果 900px 以下でも「縦ラベル｜本文｜写真」の3列flexのまま潰れ、SP390 では本文幅が 66px（1行4文字）になっていた。
       display:grid を明示して、意図どおり「1段目＝縦ラベル＋本文／2段目＝写真を全幅」に組み直す。
       ⚠️ grid では .biz-feature--reverse の flex-direction:row-reverse が効かないが、
          狭幅では左右交互配置をやめて全ブロック同じ向きに揃えるのが正しいので、これでよい。 */
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:start;
    gap:20px;
  }
  .biz-feature__media{
    grid-column:1 / -1;
    order:3;
    /* 2026-08-25：既定の width:min(340px,40vw) は「本文と横並び」の前提で決めた幅。
       上の display:grid 修正で写真が自分の行に移ったので、40vw だと SP390 で 156px しかなく行の半分が空く。
       行幅いっぱい（上限は PC と同じ 340px）に揃える。 */
    width:min(340px, 100%);
  }
  .biz-feature__no{
    font-size:38px;
  }
  /* ④ Achievements ②900px以下で3列→2列（2026-09-08 コメントで保全。①③と一緒に外す）
  ------------------------------------------------------------
  
  .biz-achv-list{
    grid-template-columns:repeat(2,1fr);
  }
  .biz-achv{
    gap:14px;
    padding:20px;
  }
  ------------------------------------------------------------ */
  .pill-link{
    min-width:0;
    width:100%;
  }
  .pill-links > li{
    width:100%;
    max-width:420px;
  }
}
/* ④ Achievements ③640px以下で1列（2026-09-08 コメントで保全。①②と一緒に外す）
------------------------------------------------------------
@media (max-width:640px){
  .biz-achv-list{
    grid-template-columns:1fr;
  }
}
------------------------------------------------------------ */
/* =========================================================
   お問い合わせフォームページ（contact.html 専用ブロック）
   ワイヤー: wireframe/10_お問い合わせフォーム.png
   見た目のみ・送信処理や検証は行わない（本番で WordPress 側に載せる）
   ========================================================= */
.section--contact-form .contact-form__lead{
  max-width:820px;
  margin:0 auto clamp(48px,6vw,80px);
  text-align:center;
  font-size:14.5px;
  line-height:2;
  color:var(--color-body);
}
.section--contact-form .contact-form__lead p+p{
  margin-top:1em;
}
.contact-form{
  max-width:820px;
  margin:0 auto;
  padding:clamp(36px,4vw,64px) clamp(28px,3.4vw,56px);
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-white);
}
.contact-form__field{
  margin:0 0 clamp(24px,2.6vw,32px);
}
.contact-form__label{
  display:block;
  font-size:14px;
  color:var(--color-ink);
  letter-spacing:.06em;
  margin:0 0 10px;
}
.contact-form__req{
  color:var(--color-sub);
  margin-left:2px;
}
/* 2026-09-08：三上様ご指示で ご住所・お問い合わせ内容 を任意に変更。
   必須の印（※）は据え置き、任意はこの文字で示す。 */
.contact-form__opt{
  color:var(--color-sub);
  font-size:12px;
  margin-left:6px;
}
.contact-form__input,
.contact-form__textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--color-border);
  border-radius:2px;
  background:var(--color-white);
  font-family:inherit;
  font-size:15px;
  color:var(--color-body);
  line-height:1.6;
  box-sizing:border-box;
}
.contact-form__input:focus,
.contact-form__textarea:focus{
  outline:2px solid var(--temper-black);
  outline-offset:2px;
  border-color:var(--temper-black);
}
.contact-form__textarea{
  min-height:200px;
  resize:vertical;
}
.contact-form__policy{
  margin:clamp(32px,3.6vw,48px) 0 20px;
  padding:clamp(40px,5vw,56px) clamp(24px,3vw,40px);
  border:1px solid var(--color-border);
  border-radius:2px;
  background:var(--color-white);
  text-align:center;
  font-family:var(--font-jp);
  font-size:clamp(18px,1.9vw,22px);
  font-weight:500;
  color:var(--color-ink);
  letter-spacing:.12em;
}
.contact-form__agree{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:0 0 clamp(24px,3vw,36px);
  font-size:14px;
  color:var(--color-body);
  letter-spacing:.06em;
}
.contact-form__checkbox{
  width:18px;
  height:18px;
  accent-color:var(--temper-black);
}
.contact-form__submit{
  display:block;
  width:min(320px, 100%);
  margin:0 auto;
  padding:18px 24px;
  background:var(--color-white);
  border:1px solid var(--color-ink);
  border-radius:2px;
  color:var(--color-ink);
  font-family:var(--font-jp);
  font-size:16px;
  font-weight:500;
  letter-spacing:.16em;
  cursor:pointer;
  transition:background .3s, color .3s;
}
.contact-form__submit:hover{
  background:var(--temper-black);
  color:var(--color-white);
  border-color:var(--temper-black);
}

@media (max-width:600px){
  .contact-form{
    padding:24px 20px;
  }
  .contact-form__policy{
    padding:28px 20px;
    font-size:16px;
  }
}

/* =========================================================
   送信できました画面（contact-thanks.html 専用ブロック）
   ワイヤー: wireframe/11_お問い合わせ完了.png
   ========================================================= */
.section--thanks{
  text-align:center;
}
.section--thanks .thanks-head{
  margin:0 auto clamp(40px,5vw,64px);
}
.section--thanks .thanks-head__title{
  font-family:var(--font-jp);
  font-weight:500;
  font-size:clamp(24px,3vw,38px);
  letter-spacing:.14em;
  color:var(--color-ink);
  line-height:1.6;
  margin:0;
}
.thanks-body{
  max-width:820px;
  margin:0 auto;
  font-size:15px;
  line-height:2.05;
  color:var(--color-body);
}
.thanks-body p+p{
  margin-top:1em;
}
.thanks-body__group+.thanks-body__group{
  margin-top:2em;
}
.thanks__back{
  display:flex;
  justify-content:center;
  margin-top:clamp(48px,6vw,80px);
}
.thanks__back-link{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:16px 44px;
  border:1px solid var(--color-ink);
  border-radius:999px;
  background:var(--color-white);
  color:var(--color-ink);
  font-family:var(--font-jp);
  font-size:15px;
  letter-spacing:.16em;
  transition:background .3s, color .3s;
}
.thanks__back-link:hover{
  background:var(--temper-black);
  color:var(--color-white);
  border-color:var(--temper-black);
}
.thanks__back-link svg{
  width:12px;
  height:12px;
}

/* ============================================================
   仮素材の写真（2026-08-08 追加・本番写真の支給待ち）
   ------------------------------------------------------------
   .ph-media（灰色プレースホルダ）は残したまま .tmp-photo を重ねている。
   本番写真がエンド様から支給されたら、HTML 側の .tmp-photo と <img> を外すだけで
   灰色プレースホルダに戻る。全61枠に「仮素材」コメントを入れてあるので
   `grep -c tmp-photo html/*.html` で残数を数えられる。
   ⚠️ 代表写真・社屋写真・協業イメージ・設備写真は意味的に代替が効かないので、
   　 支給されたら必ず差し替える（ストック写真のままでは公開しない）。
   ============================================================ */
.tmp-photo{
  display:block;          /* .ph-media の grid + place-items:center を打ち消す */
  background:none;
}
.tmp-photo::before{
  display:none;           /* 枠マークを消す */
}
.tmp-photo > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 本番支給の写真（2026-08-25 追加）。
   見た目は .tmp-photo と同じだが、こちらは「支給済み＝外さない」ことを示す。
   仮素材の残数を `grep -c tmp-photo html/*.html` で数える運用を壊さないためにクラスを分けている。 */
.real-photo{
  display:block;
  background:none;
}
.real-photo::before{
  display:none;
}
.real-photo > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ============================================================
   2026-08-29 組織図ツリーの共通調整（前田社長指示・AL／JS／サンテックの3サイト共通）
   ・親から下りる線を1本→5本にし、自社へ伸びる線だけ黒くする（他4本はグレー）
   ・グレーの角丸タグの高さを5枚で揃える
   ============================================================ */
.orgchart__stems{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.2vw,16px);
  height:26px;
  margin:0;
  padding:0;
  list-style:none;
}
.orgchart__stems .orgchart__stem{
  display:block;
  width:1px;
  height:100%;
  margin:0 auto;
  background:#c7cbd1;          /* 他社へ伸びる線＝グレー */
}
.orgchart__stems .orgchart__stem--self{
  width:2px;
  background:#191e2e;          /* 自社へ伸びる線＝黒 */
}
/* 角丸タグ＝2行ぶんの高さで固定し、5枚で高さを揃える */
.orgchart__tag{
  display:flex;                 /* inline-flex だと中身が1行か2行かでベースラインがずれ、
                                   2行のカードだけ4px下がる。ブロックにして高さを揃える */
  width:fit-content;
  margin-inline:auto;
  align-items:center;
  justify-content:center;
  min-height:calc(2 * 1.5em + 8px);
  line-height:1.5;
  text-align:center;
  box-sizing:border-box;
}
@media (max-width:900px){
  .orgchart__stems{grid-template-columns:repeat(2,1fr)}
  .orgchart__stems .orgchart__stem:nth-child(n+3){display:none}
}
@media (max-width:560px){
  .orgchart__stems{grid-template-columns:1fr}
  .orgchart__stems .orgchart__stem:nth-child(n+2){display:none}
}


/* ============================================================
   2026-08-29 組織図ツリーの追い込み（前田社長指示・3サイト共通）
   ・親から横に渡す線を1本足して、5本の枝と繋げる
   ・社名の枠を3行ぶんで固定し、5枚のタグの縦位置を揃える
     （いちばん長い「ALPHA LASER／ENGINEERING／株式会社」に合わせる）
   ・カード上辺から社名までの余白を狭くする
   ============================================================ */

/* 横に渡す線＋親から下りる幹。5列・間隔 --g のグリッドなので、
   1列目と5列目の中心＝(100% - 4*--g)/10 の位置。そこを両端にして横線を引く。 */
.orgchart__stems{
  --g:clamp(10px,1.2vw,16px);
  position:relative;
  height:46px;
  padding-top:18px;
  box-sizing:border-box;
  gap:var(--g);
}
.orgchart__stems::after{            /* 親から下りる幹 */
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:1px;
  height:18px;
  background:#c7cbd1;
  transform:translateX(-50%);
}
.orgchart__stems::before{           /* 横に渡す線 */
  content:"";
  position:absolute;
  top:18px;
  left:calc((100% - 4 * var(--g)) / 10);
  right:calc((100% - 4 * var(--g)) / 10);
  height:1px;
  background:#c7cbd1;
}
.orgchart__stems .orgchart__stem{height:100%}

/* 社名＝3行ぶんの高さで固定して、下のタグの位置を5枚で揃える
   🔴 セレクタを2階層にしてあるのは、サンテック側に `.sec h3`（詳細度が上・font-size:18px /
      margin-top:32px）があり、1階層だと負けて3サイトで値がずれるため。 */
.orgchart .orgchart__name{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 10px;
  min-height:calc(1.5em * 3);
  font-size:clamp(12.5px,1.35vw,15px);
  font-weight:600;
  line-height:1.5;
}
.orgchart .orgchart__tag{margin:0 0 12px}
.orgchart .orgchart__desc{margin:0}

/* カードの上辺から社名までの余白を狭く */
.orgchart .orgchart__card{padding-top:8px}

@media (max-width:900px){
  .orgchart__stems::before{
    left:calc((100% - 1 * var(--g)) / 4);
    right:calc((100% - 1 * var(--g)) / 4);
  }
}
@media (max-width:560px){
  .orgchart__stems::before{display:none}
}


/* ============================================================
   2026-08-29 ご挨拶の代表写真をサンテックと同じ大きさ・同じ角丸にする（前田社長指示）
   ・原本 ichikawa-president.jpg は 468×312 しかなく、760px 表示は約1.62倍の引き伸ばしだった
     （2026-08-26 に「AL と同じ形に揃える」判断で承知のうえ引き伸ばしていたもの）。
     468px にすることで等倍表示になり、粗さも同時に解消する
   ・角丸はサンテックの --radius-lg と同じ 18px
   🔴 この変更で ALPHA LASER（760px・角丸なし・原本1600×1067）とは形が変わる
   ============================================================ */
.section--greeting .greeting__media{
  /* 2026-09-08：三上様ご指示（大きいサイズの原本を受領）＋前田社長指示「ALと同じに」で 468px → 760px。
     原本が 1600×1067 になったので、760px 表示でも等倍以下＝粗くならない。
     2026-08-29 に 468px へ縮めたのは、原本が 468×312 しかなく引き伸ばしになっていたための処置だった。 */
  width:min(760px,100%);
}
.section--greeting .greeting__photo{
  /* ALPHA LASER の .greeting__photo と同じ 12px（実ファイルで確認）。
     ⚠️ 2026-08-29 の実装コメントにある「ALは角丸なし」は誤り。 */
  border-radius:12px;
  overflow:hidden;
}


/* ============================================================
   2026-08-29 親から自社ブロックまでの経路を黒くする（前田社長指示・3サイト共通）
   GALAXYホールディングス株式会社 → 横線 → 自社のブロック まで一続きの黒い線にする。
   他社へ向かう区間はグレーのまま。

   5列グリッドなので、列幅 --colw = (100% - 4×間隔)/5、
   i列目の中心は左から (i-1)×(--colw + --g) + --colw/2。
   幹は中央（50%）から下りるので、黒い横線は 50% と 自社列の中心 の間を結ぶ。
   ============================================================ */
.orgchart__stems{--colw:calc((100% - 4 * var(--g)) / 5)}
/* 幹は幅2px（中心±1px）。経路を中心ちょうどで止めると幹の半分がグレーのまま残るので、1px 重ねる。 */

/* 幹＝親から横線まで。経路の一部なので黒 */
.orgchart__stems::after{background:#191e2e;width:2px}

/* 横線のうち、親から自社へ向かう区間だけを黒で上書きする */
.orgchart__path{
  position:absolute;
  /* 17.5px のような半端な位置だと端がアンチエイリアスでグレーに混ざり、
     交点で線が途切れて見える（DPR3で実測）。整数の 18px に揃え、
     グレーの横線（18〜19px）を確実に覆う。 */
  top:18px;
  height:2px;
  margin:0;
  background:#191e2e;
  list-style:none;
}
.orgchart__stems--self1 .orgchart__path{left:calc(var(--colw) / 2);right:calc(50% - 1px)}
.orgchart__stems--self2 .orgchart__path{left:calc(var(--colw) * 1.5 + var(--g));right:calc(50% - 1px)}
/* 🔴 自社がまん中の列のとき（＝ALPHA LASER）だけ、作りを変えている。
   幹（上）＋枝（下）の2本を継ぎ足す作りだと、grid の列幅が小数になる関係で
   両者の中心が 0.016px ずれる。座標としては一致していても、拡大率によっては
   継ぎ目で1画素ぶんの段差として見えてしまう（前田社長のご指摘・2026-08-29）。
   → **継ぎ目を無くし、中央に1本の縦線を通しで引く**。
      横線・枝は使わないので消す。これならどの拡大率でもずれない。 */
.orgchart__stems--self3::after{top:0;height:100%}
.orgchart__stems--self3 .orgchart__path{display:none}
.orgchart__stems--self3 .orgchart__stem--self{visibility:hidden}
.orgchart__stems--self4 .orgchart__path{left:calc(50% - 1px);right:calc(var(--colw) * 1.5 + var(--g))}
.orgchart__stems--self5 .orgchart__path{left:calc(50% - 1px);right:calc(var(--colw) / 2)}

@media (max-width:900px){
  /* 2列・1列に折り返すと5列前提の座標が合わなくなるので、黒い経路は出さない
     （自社は地色と枠の色で分かる） */
  .orgchart__path{display:none}
  .orgchart__stems::after{background:#c7cbd1;width:1px}
}