/* =========================================================
   株式会社ユニオンダイキャスティング 新デザイン（和・明朝）
   目的: 新PDFを完全再現するための共通スタイル基盤
   実測トークン: 配色=クリーム#f5f4f1/ニア黒#111/罫線#e8e5e0、
   見出し=明朝(Noto Serif JP)、本文=ゴシック(Noto Sans JP)、アクセント色なし
   ========================================================= */

:root{
  /* 配色（PDF実測） */
  --bg:        #f5f4f1;   /* ベースのクリーム地 */
  --bg-soft:   #faf9f7;   /* やや明るいセクション地 */
  --card:      #ffffff;   /* カード地 */
  --ink:       #1a1a1a;   /* 主要テキスト（ほぼ黒） */
  --ink-soft:  #3c3a37;   /* 副次テキスト */
  --ink-mute:  #8c8a86;   /* 淡色ラベル・補足 */
  --line:      #e6e2dc;   /* 温かみのある罫線 */
  --line-soft: #efece7;
  --dark:      #111111;   /* ダーク帯・ヘッダー・フッター */
  --dark-2:    #1c1c1b;
  --on-dark:        #f3f2ee;          /* ダーク上の文字 */
  --on-dark-mute:   rgba(243,242,238,.52);
  --on-dark-line:   rgba(243,242,238,.16);

  /* タイポ */
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* レイアウト */
  --maxw: 1140px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300; line-height:1.9;
  font-feature-settings:"palt"; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* セクション共通の英字ラベル（— LABEL の形） */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:.34em; color:var(--ink-mute); text-transform:uppercase;
  margin:0 0 18px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:currentColor; opacity:.6; }
.on-dark .eyebrow{ color:var(--on-dark-mute); }

/* 小さな囲みラベル（見出し上の「事業内容」など） */
.tag-pill{
  display:inline-block; font-size:12px; letter-spacing:.14em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:7px 20px; background:var(--card);
}
.on-dark .tag-pill{ color:var(--on-dark); border-color:var(--on-dark-line); background:transparent; }

/* セクション見出し（明朝。一部だけ太字で強調する構成） */
.sec-title{
  font-family:var(--serif); font-weight:300; color:var(--ink);
  font-size:clamp(26px, 3.4vw, 38px); line-height:1.5; letter-spacing:.04em;
  margin:0;
}
.sec-title b{ font-weight:900; }

/* =========================================================
   ヘッダー（浮遊する角丸ピル）
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:18px var(--gutter) 0;
  display:flex; justify-content:center;
}
.site-header__inner{
  width:100%; max-width:var(--maxw);
  background:var(--dark); color:var(--on-dark);
  border-radius:999px;
  padding:14px 18px 14px 30px;
  display:flex; align-items:center; gap:24px;
  box-shadow:0 14px 40px -22px rgba(0,0,0,.55);
}
.brand{ display:flex; flex-direction:column; gap:3px; line-height:1; }
.brand__name{ font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:.06em; }
.brand__sub{
  font-family:var(--sans); font-weight:400; font-size:9.5px; letter-spacing:.28em;
  color:var(--on-dark-mute); text-transform:uppercase;
}
.gnav{ margin-left:auto; display:flex; align-items:center; gap:30px; }
.gnav a{
  font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--on-dark);
  opacity:.82; transition:opacity .2s;
}
.gnav a:hover{ opacity:1; }
/* ドロップダウン（会社情報・事業内容） */
.gnav__group{ position:relative; }
.gnav__group > .gnav__top::after{ content:"▾"; font-size:9px; margin-left:6px; opacity:.55; }
.gnav__sub{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  opacity:0; visibility:hidden; pointer-events:none;
  background:var(--dark); border:1px solid var(--on-dark-line); border-radius:14px;
  padding:8px; min-width:206px; display:flex; flex-direction:column; gap:1px;
  box-shadow:0 22px 50px -24px rgba(0,0,0,.7); transition:opacity .2s, transform .2s; z-index:10;
}
.gnav__sub::before{ content:""; position:absolute; top:-18px; left:-12px; right:-12px; height:18px; }
.gnav__group:hover .gnav__sub{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(15px); }
.gnav__sub a{ white-space:nowrap; padding:11px 14px; border-radius:9px; opacity:.82; }
.gnav__sub a:hover{ background:rgba(255,255,255,.08); opacity:1; }
.header-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--on-dark); color:var(--dark);
  font-size:13px; font-weight:600; letter-spacing:.06em;
  padding:11px 22px; border-radius:999px; white-space:nowrap;
  transition:transform .2s, background .2s;
}
.header-cta:hover{ transform:translateY(-1px); }

/* ハンバーガー（スマホ用・既定は非表示） */
.nav-toggle{ display:none; }
.nav-burger{ display:none; }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{
  position:relative; min-height:100svh; color:var(--on-dark);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:140px var(--gutter) 0; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; background:#2a2a28; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
/* 目的: 先方支給の工場・ドローン動画をヒーロー背景で自動再生する(PCのみ) */
.hero__bg video{ width:100%; height:100%; object-fit:cover; }
/* 動きを控える設定のユーザーには静止画を見せる */
@media (prefers-reduced-motion: reduce){
  .hero__video{ display:none; }
  .hero__bg--video{ background:url("../assets/img/hero-poster.jpg") center/cover no-repeat #2a2a28; }
}
/* 目的: TOP初回表示のプリローダー(社名フェード+ラインアニメ)。index.html内のJSが解除する */
.preloader{ position:fixed; inset:0; z-index:9999; background:#111;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transition:opacity .6s ease, visibility .6s ease; }
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__name{ font-family:var(--serif); font-weight:300; color:#fff;
  font-size:clamp(17px, 4vw, 26px); letter-spacing:.14em; text-align:center; padding:0 24px;
  opacity:0; animation:pl-fade 1s ease .15s forwards; }
.preloader__sub{ font-size:10px; letter-spacing:.3em; color:rgba(255,255,255,.5);
  opacity:0; animation:pl-fade 1s ease .4s forwards; }
.preloader__line{ width:min(220px, 56vw); height:1px; background:rgba(255,255,255,.22);
  position:relative; overflow:hidden; margin-top:8px; }
.preloader__line::after{ content:""; position:absolute; left:0; top:0; height:100%; width:40%;
  background:#fff; animation:pl-slide 1.1s ease-in-out infinite; }
@keyframes pl-fade{ to{ opacity:1; } }
@keyframes pl-slide{ from{ transform:translateX(-110%); } to{ transform:translateX(360%); } }
@media (prefers-reduced-motion: reduce){
  .preloader__name, .preloader__sub{ animation:none; opacity:1; }
  .preloader__line::after{ animation:none; width:100%; }
}
.hero::after{ /* 写真を落ち着かせるオーバーレイ */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(17,17,17,.42), rgba(17,17,17,.30) 45%, rgba(17,17,17,.55));
}
/* 見出し群を縦中央に寄せる（数値バーは下部固定のまま） */
.hero__main{ margin:auto 0; display:flex; flex-direction:column; align-items:center; width:100%; }
.hero__tag{
  display:inline-block; font-size:12px; letter-spacing:.28em; color:var(--on-dark);
  border:1px solid var(--on-dark-line); border-radius:999px;
  padding:9px 22px; margin-bottom:38px; background:rgba(255,255,255,.04);
}
.hero__title{
  font-family:var(--serif); font-weight:300; color:#fff;
  font-size:clamp(36px, 6.4vw, 76px); line-height:1.34; letter-spacing:.06em;
  margin:0; text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.hero__title .strong{ font-weight:900; }
.hero__lead{
  max-width:640px; margin:34px auto 0; font-size:15px; line-height:2.1;
  color:rgba(255,255,255,.86); letter-spacing:.05em;
}
.hero__actions{ display:flex; gap:16px; justify-content:center; margin-top:46px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:14px; font-weight:600; letter-spacing:.08em;
  padding:16px 38px; border-radius:999px; transition:transform .2s, background .2s, color .2s;
}
.btn--light{ background:#fff; color:var(--dark); }
.btn--light:hover{ transform:translateY(-2px); }
.btn--ghost{ border:1px solid rgba(255,255,255,.5); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }

/* ヒーロー下部の数値バー */
.hero__stats{
  margin-top:0; width:100%; max-width:760px;
  display:grid; grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.05); border:1px solid var(--on-dark-line);
  border-radius:var(--radius); padding:26px 10px; margin-bottom:48px;
  backdrop-filter:blur(2px);
}
.stat{ text-align:center; position:relative; }
.stat + .stat::before{
  content:""; position:absolute; left:0; top:18%; height:64%; width:1px; background:var(--on-dark-line);
}
.stat__num{ font-family:var(--serif); font-weight:700; font-size:34px; color:#fff; line-height:1; }
.stat__num span{ font-size:15px; margin-left:3px; }
.stat__label{ font-size:11px; letter-spacing:.16em; color:var(--on-dark-mute); margin-top:10px; }

/* =========================================================
   事業内容（提供する製品・技術）
   ========================================================= */
.services{ padding:clamp(80px,11vw,140px) 0; }
.services__head{ text-align:center; margin-bottom:clamp(44px,6vw,72px); }
.services__head .eyebrow{ justify-content:center; }
.cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.card{
  position:relative; background:var(--card); padding:48px clamp(28px,3.4vw,46px) 42px;
  min-height:300px; display:flex; flex-direction:column;
  transition:background .25s;
}
.card:hover{ background:var(--bg-soft); }
.card__kanji{
  position:absolute; top:26px; right:34px;
  font-family:var(--serif); font-weight:900; font-size:96px; line-height:1;
  color:var(--ink); opacity:.07; pointer-events:none;
}
.card__num{ font-size:11px; letter-spacing:.3em; color:var(--ink-mute); margin-bottom:18px; }
.card__title{ font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:.04em; margin:0 0 16px; }
.card__text{ font-size:14px; color:var(--ink-soft); line-height:2.05; margin:0; }
.card__more{
  margin-top:auto; padding-top:26px; font-size:13px; font-weight:500;
  letter-spacing:.06em; color:var(--ink); display:inline-flex; align-items:center; gap:10px;
}
.card__more::after{ content:"→"; transition:transform .2s; }
.card:hover .card__more::after{ transform:translateX(5px); }

/* =========================================================
   ISO 認証セクション（ダーク）
   ========================================================= */
.iso{ position:relative; background:var(--dark); color:var(--on-dark); overflow:hidden;
  padding:clamp(86px,12vw,150px) 0; }
.iso__watermark{
  position:absolute; right:-2%; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-weight:700; font-size:clamp(220px,34vw,440px);
  color:#fff; opacity:.03; line-height:.8; pointer-events:none; letter-spacing:-.02em;
}
.iso__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,80px); align-items:center; }
.iso__badge{
  aspect-ratio:1; max-width:330px; margin-inline:auto; width:100%;
  border:1px solid var(--on-dark-line); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.iso__badge small{ font-size:12px; letter-spacing:.34em; color:var(--on-dark-mute); }
.iso__badge .big{ font-family:var(--serif); font-weight:700; font-size:72px; line-height:1; margin:10px 0 6px; color:#fff; }
.iso__title{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.5; margin:0 0 26px; letter-spacing:.04em; }
.iso__text{ font-size:14.5px; line-height:2.1; color:var(--on-dark-mute); max-width:540px; margin:0 0 32px; }
.iso__tags{ display:flex; flex-wrap:wrap; gap:12px; }
.iso__tags span{
  font-size:12.5px; letter-spacing:.08em; color:var(--on-dark);
  border:1px solid var(--on-dark-line); border-radius:999px; padding:9px 20px;
}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{ background:var(--dark); color:var(--on-dark); border-radius:36px 36px 0 0; margin-top:0;
  padding:clamp(60px,8vw,92px) 0 36px; }
.foot__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.foot__brand .n{ font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:.05em; line-height:1.6; }
.foot__brand .e{ font-size:10px; letter-spacing:.26em; color:var(--on-dark-mute); margin:8px 0 22px; text-transform:uppercase; }
.foot__brand p{ font-size:12.5px; line-height:2; color:var(--on-dark-mute); margin:0; }
.foot__col h4{ font-size:11px; letter-spacing:.2em; color:var(--on-dark-mute); font-weight:500; margin:6px 0 20px; text-transform:uppercase; }
.foot__col a{ display:block; font-size:13.5px; color:var(--on-dark); opacity:.82; margin-bottom:14px; transition:opacity .2s; }
.foot__col a:hover{ opacity:1; }
.foot__bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  border-top:1px solid var(--on-dark-line); margin-top:clamp(46px,6vw,70px); padding-top:28px;
}
.foot__bottom small{ font-size:11.5px; letter-spacing:.06em; color:var(--on-dark-mute); }
.foot__bottom a{ font-size:11.5px; letter-spacing:.06em; color:var(--on-dark-mute); }

/* =========================================================
   下層ページ共通
   ========================================================= */
/* 下層ヒーロー（写真地＋英字大見出し） */
.lower-hero{
  position:relative; color:var(--on-dark); overflow:hidden;
  padding:200px var(--gutter) 96px; text-align:left;
}
.lower-hero__bg{ position:absolute; inset:0; z-index:-2; background:#2a2a28; }
.lower-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.lower-hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(17,17,17,.5), rgba(17,17,17,.42)); }
.lower-hero .inner{ max-width:var(--maxw); margin-inline:auto; }
.lower-hero__title{ font-family:var(--serif); font-weight:700; color:#fff;
  font-size:clamp(44px,8vw,92px); line-height:1.04; letter-spacing:.02em; margin:14px 0 0; }
.lower-hero__sub{ font-size:14.5px; line-height:2.05; color:rgba(255,255,255,.82);
  max-width:640px; margin:24px 0 0; }
/* パンくず */
.crumbs{ background:var(--bg-soft); border-bottom:1px solid var(--line); }
.crumbs .inner{ max-width:var(--maxw); margin-inline:auto; padding:18px var(--gutter);
  font-size:12.5px; letter-spacing:.06em; color:var(--ink-mute); display:flex; gap:12px; }
.crumbs a:hover{ color:var(--ink); }
.crumbs span{ color:var(--line); }

.page{ padding:clamp(64px,9vw,110px) 0; }
/* WPはbodyに"page"クラスを自動付与するため衝突を無効化(静的版では無影響) */
body.page{ padding:0; }
.page--soft{ background:var(--bg-soft); }

/* 先方支給の確認用背景写真。既存レイアウトは変えず、指定セクションの背面だけに追加する */
.sample-photo-section{ position:relative; overflow:hidden; isolation:isolate; }
.sample-photo-section::before,
.sample-photo-section::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.sample-photo-section::before{ z-index:0; background-image:var(--sample-photo); background-size:cover;
  background-position:var(--sample-photo-position, center); }
.sample-photo-section::after{ z-index:0; background:var(--sample-photo-overlay, rgba(246,245,241,.82)); }
.sample-photo-section > .container{ position:relative; z-index:1; }

/* 会社概要 定義テーブル */
.profile{ max-width:920px; margin-inline:auto; }
.profile dl{ margin:0; }
.profile .row{ display:grid; grid-template-columns:200px 1fr; gap:24px;
  padding:26px 6px; border-bottom:1px solid var(--line); }
.profile dt{ font-weight:500; color:var(--ink-mute); letter-spacing:.1em; font-size:14px; }
.profile dd{ margin:0; font-size:14.5px; color:var(--ink); line-height:2; }
.profile dd .blk{ display:block; }
.profile dd .blk + .blk{ margin-top:14px; }
.profile dd small{ color:var(--ink-mute); }

/* 拠点カード */
.locations{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.loc{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:36px 30px; }
.loc__en{ font-size:11px; letter-spacing:.24em; color:var(--ink-mute); }
.loc__name{ font-family:var(--serif); font-weight:700; font-size:22px; margin:10px 0 22px; }
.loc__info{ font-size:13.5px; line-height:2; color:var(--ink-soft); }
.loc__info .div{ height:1px; background:var(--line); margin:20px 0; }
.loc__access{ display:flex; gap:10px; }
.loc__access b{ flex:0 0 auto; font-weight:500; color:var(--ink-mute); font-size:12px; padding-top:1px; }
.loc__map{ margin-top:18px; font-size:13px; color:var(--ink); display:inline-flex; gap:8px; }
.loc__map::after{ content:"→"; }

/* ダークな問い合わせ帯 */
.contact-band{ background:var(--dark); color:var(--on-dark); border-radius:var(--radius);
  padding:clamp(34px,5vw,52px); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.contact-band p{ margin:0; }
.contact-band .t{ font-family:var(--serif); font-size:19px; line-height:1.7; }
.contact-band .tel{ font-size:13px; color:var(--on-dark-mute); margin-top:8px; letter-spacing:.04em; }

/* 製品ラインナップ（フルブリードの縦帯） */
/* 4セル化(2026-07-16 ロボットパーツ削除)。セル幅は承認済み5セル時代と同一に保つ(1380*4/5=1104) */
.product-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  width:min(1104px, calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.product-strip--shared{ position:relative; isolation:isolate; overflow:hidden;
  aspect-ratio:3000 / 1809; }
.product-strip__bg{ position:absolute; inset:0; z-index:0; }
.product-strip__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-strip--shared::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(17,17,17,.10), rgba(17,17,17,.76)); }
.pcell{ position:relative; overflow:hidden; background:#2a2a28; color:#fff;
  aspect-ratio:0.18;            /* 縦長写真をほぼノートリミングで全部見せる */
  display:flex; flex-direction:column; justify-content:flex-end; padding:24px 16px; }
.product-strip--shared .pcell{ z-index:2; height:100%; aspect-ratio:auto; background:transparent; }
.product-strip--shared .pcell::after{ display:none; }
.product-strip--shared .pcell > img[hidden]{ display:none !important; }
.pcell__bg{ position:absolute; inset:0; z-index:0; }
.pcell__bg img{ width:100%; height:100%; object-fit:cover; }
.pcell::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(17,17,17,.15), rgba(17,17,17,.78)); }
.pcell > *:not(.pcell__bg){ position:relative; z-index:2; }
.pcell__num{ font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.7); }
.pcell__name{ font-family:var(--serif); font-weight:700; font-size:19px; margin:8px 0 14px; line-height:1.4; }
.pcell__count{ align-self:flex-start; font-size:12px; letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:7px 16px; }
.pcell__count b{ font-family:var(--serif); font-size:17px; margin-right:3px; }
.pcell{ cursor:default; }
.pcell--gallery{ cursor:pointer; }
.pcell > .pcell__photos{ position:absolute; top:14px; right:12px; z-index:2;
  font-size:9px; letter-spacing:.12em; color:#fff; background:rgba(17,17,17,.62);
  border:1px solid rgba(255,255,255,.38); border-radius:999px; padding:6px 9px; }
/* 2026-08-06 先方要望対応: ①4項目の区切りを点線で明示 ②クリックできると分かる見た目に */
.product-strip.product-strip--shared{ gap:0; }
.product-strip--shared .pcell + .pcell{ border-left:1px dashed rgba(255,255,255,.5); }
.pcell--gallery > .pcell__photos{ background:rgba(255,255,255,.94); color:#1a1a1a;
  border-color:transparent; font-weight:600; }
/* 2026-08-07 ユーザー案採用(C案): 種数ピルも白ボタン化して「押せそう」に見せる(写真ありセルのみ) */
.pcell--gallery .pcell__count{ background:rgba(255,255,255,.94); color:#1a1a1a;
  border-color:transparent; font-weight:600; }
.pcell--gallery > .pcell__photos::before{ content:"＋ "; }
/* PCホバー: セルが反応し中央に「写真を見る」ヒントが浮かぶ(タッチ端末は白ボタン型バッジが常時見えている) */
.pcell > .pcell__hint{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; opacity:0; transition:opacity .25s ease;
  background:rgba(17,17,17,.34); pointer-events:none; }
.pcell__hint::before{ content:"＋"; width:58px; height:58px; border:1px solid rgba(255,255,255,.85);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:300; color:#fff; }
.pcell__hint::after{ content:"写真を見る"; font-size:12px; letter-spacing:.22em; color:#fff; }
@media (hover:hover){
  .pcell--gallery:hover .pcell__hint{ opacity:1; }
}
/* 目的: 製品写真のクリック拡大表示(ライトボックス)。products.html内のJSが開閉する */
.lightbox{ display:none; position:fixed; inset:0; z-index:9998;
  background:rgba(17,17,17,.93); align-items:center; justify-content:center;
  flex-direction:column; gap:16px; padding:28px; cursor:zoom-out; }
.lightbox.is-open{ display:flex; }
.lightbox__img{ max-width:92vw; max-height:80vh; object-fit:contain; display:block;
  box-shadow:0 10px 60px rgba(0,0,0,.5); }
.lightbox__cap{ color:rgba(255,255,255,.85); font-family:var(--serif); font-size:15px; letter-spacing:.1em; }
.lightbox__close{ position:absolute; top:18px; right:22px; background:none; border:none;
  color:#fff; font-size:34px; line-height:1; cursor:pointer; padding:8px; }
.lightbox__prev,.lightbox__next{ position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border:1px solid rgba(255,255,255,.4); border-radius:50%;
  background:rgba(17,17,17,.58); color:#fff; font-size:25px; cursor:pointer; }
.lightbox__prev{ left:clamp(12px,3vw,42px); }
.lightbox__next{ right:clamp(12px,3vw,42px); }
.lightbox__prev[hidden],.lightbox__next[hidden]{ display:none; }

/* 事業詳細：番号付きリスト・設備テーブル等は各ページ流用 */
.lead-serif{ font-family:var(--serif); font-weight:300; font-size:clamp(24px,3.2vw,36px);
  line-height:1.7; letter-spacing:.04em; margin:0 0 30px; }
.numbered{ display:grid; gap:34px; }
.numbered .item{ display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:start; }
.numbered .no{ font-family:var(--serif); font-weight:700; font-size:30px; color:var(--ink-mute); line-height:1; }
.numbered h3{ font-family:var(--serif); font-weight:700; font-size:18px; margin:0 0 10px; }
.numbered p{ margin:0; font-size:14px; color:var(--ink-soft); line-height:2; }
.spec-table{ width:100%; border-collapse:collapse; font-size:14px; }
.spec-table th, .spec-table td{ text-align:left; padding:18px 14px; border-bottom:1px solid var(--line); }
.spec-table th{ color:var(--ink-mute); font-weight:500; letter-spacing:.08em; }
.spec-table thead th{ border-bottom:1.5px solid var(--ink); color:var(--ink); }

/* 3カラムのカード派生（事業詳細の製品グリッド等） */
.cards.cards--3{ grid-template-columns:repeat(3,1fr); }
/* 奇数枚構成の最終カードを2列分に伸ばし、空きタイル(コンテナ地色)が見えるのを防ぐ */
.card--wide{ grid-column:span 2; }

/* 2カラムのテキストブロック（生産管理／適正生産 等） */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); }
.duo h3{ font-family:var(--serif); font-weight:700; font-size:20px; margin:0 0 16px; }
.duo p{ margin:0; font-size:14.5px; color:var(--ink-soft); line-height:2.05; }
.on-dark .duo p{ color:var(--on-dark-mute); }

/* ダーク上の小カード群（精密測定・試験機器 等） */
.dgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--on-dark-line);
  border:1px solid var(--on-dark-line); border-radius:var(--radius); overflow:hidden; }
.dcard{ background:var(--dark); padding:34px 28px; }
.dcard h4{ font-family:var(--serif); font-weight:700; font-size:18px; margin:0 0 12px; color:var(--on-dark); }
.dcard p{ margin:0; font-size:13.5px; line-height:2; color:var(--on-dark-mute); }

/* ボタン：クリーム地で使う濃色／線色 */
.btn--dark{ background:var(--dark); color:#fff; }
.btn--dark:hover{ transform:translateY(-2px); }
.btn--line{ border:1px solid var(--ink); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:#fff; }

/* =========================================================
   お問い合わせフォーム（新デザイン・モノクロ）
   ========================================================= */
.cform{ max-width:760px; margin-inline:auto; }
.cform__lead{ font-size:14.5px; color:var(--ink-soft); line-height:2; margin:0 0 32px; }
.cform__lead a{ text-decoration:underline; text-underline-offset:3px; }
.citem{ display:grid; grid-template-columns:230px 1fr; gap:22px; padding:24px 0; border-bottom:1px solid var(--line); align-items:start; }
.citem__label{ display:flex; gap:10px; align-items:center; font-size:14px; color:var(--ink); padding-top:12px; }
.req{ background:var(--dark); color:#fff; font-size:10.5px; letter-spacing:.08em; padding:3px 10px; border-radius:999px; }
.opt{ border:1px solid var(--line); color:var(--ink-mute); font-size:10.5px; letter-spacing:.08em; padding:3px 10px; border-radius:999px; }
.citem__field input, .citem__field textarea, .citem__field select{
  width:100%; font:inherit; font-size:15px; padding:13px 16px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); transition:border-color .2s;
}
.citem__field input:focus, .citem__field textarea:focus, .citem__field select:focus{ outline:none; border-color:var(--ink); }
.citem__field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c8a86' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; }

/* 採用のご案内(簡易ブロック・会社情報ページ) */
.recruit-band{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:clamp(30px,4.5vw,46px); }
.recruit-band h2{ font-family:var(--serif); font-weight:700; font-size:22px; margin:0 0 12px; }
.recruit-band p{ margin:0; font-size:14px; color:var(--ink-soft); line-height:2; max-width:600px; }
.citem__field textarea{ min-height:150px; resize:vertical; }
.consent-note{ font-size:13px; color:var(--ink-mute); line-height:1.95; margin:0 0 14px; max-width:640px; }
.consent-note a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.consent{ display:inline-flex; gap:10px; align-items:center; font-size:14px; cursor:pointer; white-space:nowrap; }
.field-error{ display:block; color:#a83a2a; font-size:12.5px; margin-top:7px; }
.is-hidden{ display:none !important; }
.cform__actions{ display:flex; gap:16px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.cbtn{ display:inline-flex; align-items:center; justify-content:center; font:inherit; font-size:14px; font-weight:600;
  letter-spacing:.08em; padding:16px 44px; border-radius:999px; border:none; cursor:pointer;
  background:var(--dark); color:#fff; transition:transform .2s, opacity .2s; }
.cbtn:hover{ transform:translateY(-2px); }
.cbtn--ghost{ background:transparent; border:1px solid var(--ink); color:var(--ink); }
.cbtn--ghost:hover{ background:var(--ink); color:#fff; }
.confirm-head{ font-size:14px; color:var(--ink-soft); margin:0 0 24px; }
.crow{ display:grid; grid-template-columns:230px 1fr; gap:22px; padding:18px 4px; border-bottom:1px solid var(--line); }
.crow__k{ font-size:13px; color:var(--ink-mute); letter-spacing:.06em; }
.crow__v{ font-size:14.5px; color:var(--ink); line-height:1.9; }
.done{ text-align:center; padding:40px 0; }
.done__mark{ width:64px; height:64px; border-radius:50%; border:1.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 22px; }
.done__title{ font-family:var(--serif); font-weight:700; font-size:24px; margin:0 0 12px; }
.done__text{ font-size:14.5px; color:var(--ink-soft); line-height:2; margin:0 0 28px; }

/* 文章ページ（プライバシーポリシー等） */
.prose{ max-width:840px; margin-inline:auto; }
.prose p{ font-size:15px; line-height:2.05; margin:0 0 1.3em; color:var(--ink-soft); }
.prose h2{ font-family:var(--serif); font-weight:700; font-size:21px; color:var(--ink);
  margin:2em 0 .7em; padding-left:14px; border-left:3px solid var(--ink); }
.prose ul{ padding-left:1.4em; margin:0 0 1.3em; }
.prose li{ list-style:disc; margin-top:.5em; line-height:1.95; color:var(--ink-soft); }
.prose .note{ color:var(--ink-mute); font-size:13.5px; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:880px){
  .site-header__inner{ flex-wrap:wrap; row-gap:2px; border-radius:26px; }
  .brand{ order:1; }
  .gnav{ display:none; order:3; }
  .header-cta{ display:none; order:4; }
  .nav-burger{
    display:flex; order:2; align-self:flex-start; flex-direction:column; gap:5px;
    margin-left:auto; margin-top:3px; padding:6px; cursor:pointer;
  }
  .nav-burger span{ width:24px; height:2px; background:var(--on-dark); border-radius:2px;
    transition:transform .25s, opacity .2s; }
  /* 開いた時：メニューをヘッダー内に縦展開 */
  .nav-toggle:checked ~ .gnav{
    display:flex; flex-direction:column; align-items:stretch; width:100%;
    margin-top:8px; padding-top:8px; border-top:1px solid var(--on-dark-line);
  }
  .nav-toggle:checked ~ .gnav a{ width:100%; padding:13px 4px; opacity:.92; }
  .gnav__group > .gnav__top::after{ display:none; }
  .nav-toggle:checked ~ .gnav .gnav__group{ width:100%; }
  .nav-toggle:checked ~ .gnav .gnav__sub{ position:static; opacity:1; visibility:visible;
    pointer-events:auto; transform:none; background:transparent; border:none; box-shadow:none;
    padding:0 0 8px 16px; min-width:0; }
  .nav-toggle:checked ~ .gnav .gnav__sub::before{ display:none; }
  .nav-toggle:checked ~ .gnav .gnav__sub a{ padding:9px 4px; font-size:12.5px; opacity:.66; }
  .nav-toggle:checked ~ .header-cta{ display:inline-flex; width:100%; justify-content:center; margin-top:10px; }
  /* バーガー→×アニメ */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .iso__grid{ grid-template-columns:1fr; gap:48px; }
  .iso__badge{ max-width:240px; }
  .foot__top{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot__brand{ grid-column:1 / -1; }
  .locations{ grid-template-columns:1fr; }
  .product-strip{ grid-template-columns:repeat(2,1fr); }
  .product-strip.product-strip--shared{ grid-template-columns:repeat(4,1fr); }
  /* B案検証中(2026-07-16): スマホも軽量動画を再生。A案に戻す場合はここに
     .hero__video{ display:none; } と .hero__bg--video{ background:url("../assets/img/hero-poster.jpg") center/cover no-repeat #2a2a28; } を復元 */
  .contact-band{ justify-content:flex-start; }
  .lower-hero{ padding:140px var(--gutter) 64px; }
  .lower-hero__title{ font-size:clamp(40px,9vw,66px); }
  .cards.cards--3{ grid-template-columns:repeat(2,1fr); }
  .duo{ grid-template-columns:1fr; }
  .dgrid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .cards{ grid-template-columns:1fr; }
  .site-header__inner{ padding-left:20px; gap:14px; }
  .brand__name{ font-size:14px; letter-spacing:.02em; }
  .brand__sub{ font-size:8px; letter-spacing:.16em; }
  .hero__stats{ max-width:none; }
  .stat__num{ font-size:28px; }
  .foot__top{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; gap:12px; }
  .lower-hero{ padding:108px var(--gutter) 52px; }
  /* スマホ: 全セルを横に詰め込む(画像は小さくてOK／画像間の隙間ゼロ／左右端の余白はOK)。4セル化に追随 */
  .product-strip{ grid-template-columns:repeat(4,1fr); gap:0; margin-top:18px; }
  .pcell{ padding:9px 4px; }
  .pcell__num{ display:none; }
  .pcell__name{ font-size:9.5px; margin:5px 0 5px; line-height:1.25; letter-spacing:0; }
  .pcell__count{ font-size:8px; padding:3px 5px; letter-spacing:0; }
  .pcell__count b{ font-size:10px; margin-right:2px; }
  .pcell > .pcell__photos{ top:5px; right:4px; font-size:6.5px; letter-spacing:0; padding:3px 4px; }
  .lightbox__prev,.lightbox__next{ width:40px; height:40px; font-size:21px; }
  .profile .row{ grid-template-columns:1fr; gap:6px; }
  .numbered .item{ grid-template-columns:1fr; gap:6px; }
  .cards.cards--3{ grid-template-columns:1fr; }
  .card--wide{ grid-column:auto; } /* 1カラム時はspanを解除(暗黙カラム発生防止) */
  .citem{ grid-template-columns:1fr; gap:10px; }
  .crow{ grid-template-columns:1fr; gap:6px; }
}


/* WordPress編集対応: 任意QCDセクション。OFF時はDOM自体を出さないため既存表示に影響しない。 */
.qcd-section{background:var(--bg);}
.qcd-section__head{text-align:center;max-width:780px;margin:0 auto clamp(38px,5vw,58px);}
.qcd-section__head .eyebrow{justify-content:center;}
.qcd-section__head>p{margin:20px 0 0;color:var(--ink-soft);font-size:14.5px;line-height:2;}
.qcd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.qcd-card{position:relative;border:1px solid var(--line);background:rgba(255,255,255,.76);padding:clamp(28px,4vw,46px);overflow:hidden;}
.qcd-card__letter{position:absolute;right:18px;top:4px;font-family:var(--serif);font-size:82px;font-weight:900;color:rgba(166,119,42,.10);line-height:1;}
.qcd-card__en{display:block;font-size:10px;letter-spacing:.22em;color:var(--amber);margin-bottom:15px;}
.qcd-card h3{font-family:var(--serif);font-size:23px;margin:0 0 16px;}
.qcd-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.9;margin:0;}
.product-strip--count-3{grid-template-columns:repeat(3,1fr)!important;}
.product-strip--count-2{grid-template-columns:repeat(2,1fr)!important;}
.product-strip--count-1{grid-template-columns:1fr!important;}
.cards--editable.cards--count-4,.cards--editable.cards--count-2{grid-template-columns:repeat(2,1fr);}
.cards--editable.cards--count-3{grid-template-columns:repeat(3,1fr);}
.cards--editable.cards--count-1{grid-template-columns:1fr;}
.cards--editable:not(.cards--count-5) .card--wide{grid-column:auto;}
.mach-grid--3{grid-template-columns:repeat(3,1fr)!important;}
.mach-grid--2{grid-template-columns:repeat(2,1fr)!important;}
.mach-grid--1{grid-template-columns:1fr!important;}
.menu-grid--editable.menu-grid--count-4,.menu-grid--editable.menu-grid--count-2{grid-template-columns:repeat(2,1fr)!important;}
.menu-grid--editable.menu-grid--count-3{grid-template-columns:repeat(3,1fr)!important;}
.menu-grid--editable.menu-grid--count-1{grid-template-columns:1fr!important;}
.cform-phone-notice{text-align:center;margin-top:22px;}
.cform-phone-notice p{margin:0 0 5px;color:var(--ink-soft);font-size:14px;}
.cform-phone-notice a{font-family:var(--serif);font-size:21px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;}
@media(max-width:880px){
  .cards--editable.cards--count-3{grid-template-columns:repeat(2,1fr);}
  .mach-grid--3,.mach-grid--2{grid-template-columns:1fr!important;}
  .menu-grid--editable.menu-grid--count-4,.menu-grid--editable.menu-grid--count-3,.menu-grid--editable.menu-grid--count-2{grid-template-columns:1fr!important;}
}
@media(max-width:760px){.qcd-grid{grid-template-columns:1fr;}}
@media(max-width:620px){
  .cards--editable.cards--count-4,.cards--editable.cards--count-3,.cards--editable.cards--count-2{grid-template-columns:1fr;}
}
