/* ============================================================
   構成確認用（デザインなし・白黒）— body.bw
   色・装飾・背景を外し「配置（構成）」だけを見せる。
   ・フォント／レイアウト（grid等）は維持
   ・写真箇所は枠＋「写真」、動画箇所は枠＋「動画」
   ============================================================ */
body.bw { background: #fff !important; color: #1a1a1a !important; }
body.bw *, body.bw *::before, body.bw *::after {
  background: transparent !important;
  background-image: none !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  border-color: #cfcfcf !important;
}
body.bw a { text-decoration: none; }
body.bw .text-link, body.bw a.tlink, body.bw .news-item, body.bw .news-row { text-decoration: none; }

/* ヘッダー／フッターの帯は枠線だけに */
body.bw .site-header { position: static !important; background: #fff !important; border-bottom: 1px solid #cfcfcf !important; }
body.bw .site-header__util { border-bottom: 1px solid #e2e2e2 !important; }

/* 下層ページ：ヘッダーの動きをTOPに合わせる（固定・スクロール追従／下スクロールで隠れ、上で戻る）。
   ※ :not(.is-home) でスコープ＝TOP(index.html)は一切変更なし */
body.bw:not(.is-home) .site-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  background: transparent !important;
  border-bottom: none !important;
}
body.bw:not(.is-home) .site-header.is-scrolled {
  background: rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: none !important;
}
/* 固定ヘッダー分、本文を下げる（静的時にヘッダーが占めていた高さと同じ＝レイアウトは不変） */
body.bw:not(.is-home) .site-main { padding-top: calc(44px + clamp(34px, 3.9vw, 48px)); }
body.bw .site-footer, body.bw .footer-cta, body.bw .site-footer__main, body.bw .contact-hero__inner { border-top: 1px solid #cfcfcf !important; }
body.bw .mobilebar { display: none !important; }
/* ローディングはTOPだけ。下層では出さない */
body.bw:not(.is-home) .page-loader { display: none !important; }
/* bw の一括指定（背景透明）に勝たせて、白の目隠しとして成立させる */
body.bw.is-home .page-loader { background: #ffffff !important; }
body.bw.is-home .page-loader__mark { color: #1a1a1a !important; }
body.bw.is-home .page-loader__bar { background: rgba(26, 26, 26, .13) !important; }
body.bw.is-home .page-loader__bar i { background: #1a1a1a !important; }

/* セクション区切りの点線は排除（2026-07 指示） */
body.bw .section, body.bw .phero, body.bw .area-finder, body.bw .switch,
body.bw .products-sec, body.bw .home-news, body.bw .intro, body.bw .vision, body.bw .pdp__body { border-top: none !important; }

/* ボタン・チップ・バッジ → 白地＋枠線 */
body.bw .btn, body.bw .filter-chip, body.bw .chip,
body.bw .ptag, body.bw .req, body.bw .badge, body.bw .catcard__ic,
body.bw .news-item__cat, body.bw .news-row__cat, body.bw .article__cat {
  background: #fff !important; border: 1px solid #9a9a9a !important; color: #1a1a1a !important;
}
/* 絞り込みチップ：枠線は検索窓と同じ色。選択中は色反転 */
body.bw .filter-chip { border-color: #dcdad5 !important; }
body.bw .filter-chip:hover { border-color: #1a1a1a !important; }
body.bw .filter-chip.is-active {
  background: #1a1a1a !important; border-color: #1a1a1a !important; color: #ffffff !important;
}
/* 選ぶと0件になる項目：押せないことが分かるようグレーアウト */
body.bw .filter-chip.is-disabled {
  background: #fff !important; border-color: #ededea !important; color: #c5c3be !important;
}

/* --- ヘッダーの English / Contact を洗練（枠ボックスをやめてクリーンに） --- */
/* English：枠なし・ホバーで下線がスッと伸びる */
body.bw .lang-toggle {
  background: transparent !important; border: none !important;
  font-family: var(--serif-en) !important; letter-spacing: .16em; font-size: .8rem;
  position: relative; padding: 5px 2px;
}
body.bw .lang-toggle::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 1px; height: 1px;
  background: currentColor !important;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease, ease);
}
body.bw .lang-toggle:hover::after { transform: scaleX(1); transform-origin: left; }
/* カレント：グロナビはスライドインジケーター（下記）で表示。Englishは10pxの短い下線を中央に常時表示 */
body.bw .gnav__indicator { background: currentColor !important; }
body.bw .lang-toggle.is-current::after {
  left: 50%; right: auto; width: 10px; margin-left: -5px;
  transform: scaleX(1); transform-origin: center;
}
/* 第二階層FV：ブレット（塗り）とリードの灰色を bw の一括指定に負けないよう復活 */
body.bw .fv-hero__bullet { background: currentColor !important; }
body.bw .fv-hero__lead { color: #6b6b6b !important; }
body.bw .crumbs--fv,
body.bw .crumbs--fv a,
body.bw .crumbs--fv .crumbs__current { color: #b5b5b5 !important; }
body.bw .crumbs--fv a:hover { color: #8a8a8a !important; }
/* FVメインビジュアルは実写真を表示（ワイヤーの画像非表示を打ち消す） */
body.bw .fv-hero__img { opacity: 1 !important; }
/* Pick Up カルーセルの左右ボタン：白塗り（ホバーで反転） */
body.bw .carousel__btn { background: #ffffff !important; }
body.bw .carousel__btn:hover { background: #1a1a1a !important; color: #ffffff !important; border-color: #1a1a1a !important; }
/* Contact：細めのピル・ホバーで塗りつぶし */
body.bw .btn--header {
  background: transparent !important; border: 1px solid #1a1a1a !important; color: #1a1a1a !important;
  border-radius: 999px; padding: 11px 26px; gap: 1px;
  transition: background-color .35s var(--ease, ease), color .35s var(--ease, ease), border-color .35s var(--ease, ease);
}
body.bw .btn--header .btn__ja { font-size: .62rem; opacity: .78; }
body.bw .btn--header:hover { background: #1a1a1a !important; border-color: #1a1a1a !important; }
body.bw .btn--header, body.bw .btn--header span { color: #1a1a1a !important; }
body.bw .btn--header:hover, body.bw .btn--header:hover span { color: #fff !important; }

/* ヒーロー（KV）：WebGL/動画を消し、写真枠＋ラベルに */
body.bw .hero { min-height: 340px !important; border: 1px solid #bdbdbd !important; }
body.bw .hero__canvas, body.bw .hero__video, body.bw .hero__veil { display: none !important; }
body.bw .hero__scroll { display: none !important; }
body.bw .hero::before {
  content: "キービジュアル（写真／動画）"; position: absolute; top: 12px; left: 16px;
  font-size: 12px; color: #8a8a8a !important; z-index: 2;
}

/* 写真プレースホルダ：ビジュアル枠を「写真」に */
body.bw img { opacity: 0 !important; }
body.bw .prod-tile__visual, body.bw .pcard__visual, body.bw .pdp__visual,
body.bw .rel-card__visual, body.bw .map-embed {
  position: relative !important; border: 1px solid #bdbdbd !important; min-height: 96px;
}
body.bw .prod-tile__visual > *, body.bw .pcard__visual > *, body.bw .pdp__visual > *,
body.bw .rel-card__visual > *, body.bw .map-embed > * { visibility: hidden !important; }
body.bw .prod-tile__visual::after, body.bw .pcard__visual::after, body.bw .pdp__visual::after,
body.bw .rel-card__visual::after, body.bw .map-embed::after {
  content: "写真"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; color: #8a8a8a !important;
}

/* Pick Up カード：body.bw の一括透明化で背景が透けるため、
   カード全体・写真枠・テキスト部を白地に戻す（後ろのセクション背景を透かさない） */
body.bw .pcard, body.bw .pcard__visual, body.bw .pcard__body { background: #fff !important; }

/* カタログの縦長サムネイル：表紙は実画像を表示し、影も残す
   （bw は box-shadow を一括で none にするため、ここで戻す） */
body.bw .catcard__visual {
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10) !important;
}
body.bw .catcard:hover .catcard__visual { box-shadow: 0 12px 30px rgba(0, 0, 0, .16) !important; }
body.bw .catcard__visual img { opacity: 1 !important; }
body.bw .catcard__sub { color: #8a8a8a !important; }
body.bw .catcard { border-bottom: 1px solid #dcdad5 !important; }
/* NEW：黒地に白文字（チップの白地指定に勝たせる） */
body.bw .catcard__new { background: #1a1a1a !important; color: #ffffff !important; border: 0 !important; }
/* 追従する Download の円：すりガラス。bw の一括指定（背景透明・影なし）に勝たせる
   （backdrop-filter は bw の filter リセット対象外なのでそのまま効く） */
body.bw .hover-cursor__in {
  background:
    radial-gradient(130% 130% at 30% 24%, rgba(255,255,255,.72), rgba(255,255,255,.34) 52%, rgba(255,255,255,.16) 80%) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.75) !important;
  color: #1a1a1a !important;
}

/* 動画プレースホルダ */
body.bw .video-card { position: relative !important; border: 1px solid #bdbdbd !important; }
body.bw .video-card > * { visibility: hidden !important; }
body.bw .video-card::after {
  content: "動画"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; color: #8a8a8a !important;
}

/* 上部の構成確認用バナーは撤去（2026-07 指示） */

/* ============================================================
   v4 ブラッシュアップ追記（03のUI調整を02ベースへ取り込み）
   ・グローバルナビ：最初から日本語表示（ホバー切替なし）
   ・FAQ：カテゴリ見出し
   ・仮テキスト注記
   ※デザイン確定時に style.css へ移植する
   ============================================================ */

/* グローバルナビ：初期は英字、マウスオーバーでくるっと反転して日本語 */
.gnav__link {
  height: auto !important; overflow: visible !important;
  display: inline-grid !important;
  perspective: 520px;
  line-height: 1.5;
}
.gnav__en, .gnav__ja {
  display: block !important;
  grid-area: 1 / 1;                 /* 英字と日本語を同じマスに重ねる（幅は広い方に合わせる） */
  text-align: center;
  backface-visibility: hidden;
  transition: transform .5s var(--ease, ease), opacity .5s var(--ease, ease);
}
.gnav__en {
  font-family: var(--serif-en) !important; letter-spacing: .1em;
  transform: rotateX(0deg); transform-origin: center;
}
.gnav__ja {
  position: static !important; left: auto; top: auto;
  font-size: .82rem; white-space: nowrap;
  transform: rotateX(-90deg); transform-origin: center; opacity: 0;
}
.gnav__link:hover .gnav__en { transform: rotateX(90deg); opacity: 0; }
.gnav__link:hover .gnav__ja { transform: rotateX(0deg); opacity: 1; }
/* カレントは日本語で固定表示（下層ページのみ。TOP は英字のまま） */
body:not(.is-home) .gnav__link.is-current .gnav__en { transform: rotateX(90deg); opacity: 0; }
body:not(.is-home) .gnav__link.is-current .gnav__ja { transform: rotateX(0deg); opacity: 1; }

/* FAQ：カテゴリ見出し */
.faq-cat {
  margin: 44px 0 14px;
  font-family: var(--serif-ja, serif);
  font-size: 1.05rem; letter-spacing: .06em;
  padding-left: 14px; border-left: 3px solid currentColor;
}
.faq-wrap .faq-cat:first-child { margin-top: 0; }

/* 仮テキスト注記 */
.draft-note {
  margin-top: 12px;
  font-size: .76rem; letter-spacing: .04em; color: #9a9a9a;
}

/* ============================================================
   フォント確定（全ページ共通）
   ・日本語：Noto Sans JP（ゴシック）
   ・英字　：Marcellus（セリフ）
   ============================================================ */
:root {
  --serif-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --sans-ja:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --serif-en: "Marcellus", "Cormorant Garamond", "Shippori Mincho", serif;
}

/* ============================================================
   日本語は太字をやめる（2026-07 指示）：全ページ共通で通常ウェイトに
   ※英字（--serif-en）は単一ウェイトのフォントのため影響なし
   ============================================================ */
.sec-head__ja, .page-hero__ja, .intro__cap, .intro__lead, .intro__text,
.switch-item__title, .pcard__ja, .strength-card__title, .quote-block__text,
.prod-tile__name, .series-meta__v, .pdp__name, .pdp-block__title, .pdp-side-card__name,
.cat-feature__title, .cat-card__title, .vision__lead, .link-banner__ja, .recruit-msg__lead,
.article__title, .footer-cta__copy, .fax-order__title, .contact-hero__lead, .area-tile__ja,
.prod-areas__h, .phero__h, .catcard__t, .stack-card__title, .stack-card__body,
.finder-col__head b, .finder-acc summary b, .finder-tile__ja,
.filters__row--primary .filters__label, .pdp-order__k, .fv-banner__title,
.news-row__title, .footer-brand__tag, .mobilebar__item, .ptag,
.util__tel, .util__tel b, .util__fax b {
  font-weight: 400 !important;
}
/* 本文中の強調（em）も太字・色をやめ、地の文になじませる */
.intro__text em { font-weight: 400 !important; font-style: normal; }

/* ============================================================
   仕上げ調整（2026-07 指示）
   ・斜体はすべて通常に戻す
   ・ボタンの日本語が明朝になるため、ボタン類はゴシックに
   ============================================================ */
body.bw, body.bw * { font-style: normal !important; }

.btn, .btn span, .btn__ja, .text-link, .stack-card__btn, .footer-cta__ja,
.gnav__ja, .drawer__link em, .filters__label {
  font-family: var(--sans-ja) !important;
}

/* ============================================================
   ロゴ画像（テキストロゴ→画像に置換）
   ・映像の上（ホーム・未スクロール）は白ロゴ、それ以外は黒ロゴ
   ============================================================ */
.brand { gap: 0 !important; }
.brand__logo { display: block; height: clamp(34px, 3.9vw, 48px); width: auto; }
.brand--footer .brand__logo { height: clamp(32px, 3.8vw, 46px); }
.brand__logo--white { display: none; }
body.bw .brand__logo { opacity: 1 !important; }           /* bwの画像非表示を無効化 */
body.is-home .site-header:not(.is-scrolled) .brand__logo--black { display: none; }
body.is-home .site-header:not(.is-scrolled) .brand__logo--white { display: block; }
/* ホーム・映像の上（未スクロール）はメニューを白抜きに。スクロール後（白背景）は元の黒に戻る */
body.is-home .site-header:not(.is-scrolled) .gnav__link,
body.is-home .site-header:not(.is-scrolled) .gnav__ja,
body.is-home .site-header:not(.is-scrolled) .gnav__en,
body.is-home .site-header:not(.is-scrolled) .gnav__indicator,
body.is-home .site-header:not(.is-scrolled) .lang-toggle,
body.is-home .site-header:not(.is-scrolled) .btn--header,
body.is-home .site-header:not(.is-scrolled) .btn--header span {
  color: #fff !important;
}
body.is-home .site-header:not(.is-scrolled) .lang-toggle,
body.is-home .site-header:not(.is-scrolled) .btn--header {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .8) !important;
}
body.is-home .site-header:not(.is-scrolled) .burger span { background: #fff !important; }
/* 映像の上：Contactホバーは白で塗り、文字は黒に */
body.is-home .site-header:not(.is-scrolled) .btn--header:hover { background: #fff !important; border-color: #fff !important; }
body.is-home .site-header:not(.is-scrolled) .btn--header:hover,
body.is-home .site-header:not(.is-scrolled) .btn--header:hover span { color: #1a1a1a !important; }

/* ============================================================
   仮の写真表示：body.bw でも画像を表示できるようにする共通クラス
   （デザイン確定までの仮画像。placeholderの枠線・ラベルは消す）
   ============================================================ */
.wf-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
body.bw img.wf-photo { opacity: 1 !important; }
/* 写真が入ったプレースホルダは枠線を消す（全コンテナ共通） */
body.bw .stack-card__photo-inner:has(.wf-photo),
body.bw .flow__item:has(.wf-photo),
body.bw .support__thumb:has(.wf-photo),
body.bw .pcard__visual:has(.wf-photo),
body.bw .prod-tile__visual:has(.wf-photo),
body.bw .pdp__visual:has(.wf-photo),
body.bw .rel-card__visual:has(.wf-photo),
body.bw .map-embed:has(.wf-photo),
body.bw .video-card:has(.wf-photo) { border: 0 !important; overflow: hidden; }
/* 絶対配置の画像を受けるコンテナだけ position:relative にする。
   ※ .stack-card__photo-inner は元々 absolute inset:0 なので触らない（触ると高さ計算が壊れる） */
body.bw .pcard__visual:has(.wf-photo),
body.bw .prod-tile__visual:has(.wf-photo),
body.bw .pdp__visual:has(.wf-photo),
body.bw .rel-card__visual:has(.wf-photo),
body.bw .map-embed:has(.wf-photo),
body.bw .video-card:has(.wf-photo) { position: relative; }
/* テキストラベルspanを隠す */
.stack-card__photo-inner:has(.wf-photo) > span,
.flow__item:has(.wf-photo) > span,
.support__thumb:has(.wf-photo) > span { display: none !important; }
/* 画像は枠いっぱいに敷く */
.flow__item { position: relative; }
.flow__item .wf-photo, .pcard__visual .wf-photo,
.prod-tile__visual .wf-photo, .pdp__visual .wf-photo, .rel-card__visual .wf-photo,
.map-embed .wf-photo, .video-card .wf-photo { position: absolute; inset: 0; }
/* bwの「写真／動画」ラベル(::after)と子要素の非表示を解除して画像を見せる */
body.bw .pcard__visual:has(.wf-photo)::after,
body.bw .prod-tile__visual:has(.wf-photo)::after,
body.bw .pdp__visual:has(.wf-photo)::after,
body.bw .rel-card__visual:has(.wf-photo)::after,
body.bw .map-embed:has(.wf-photo)::after,
body.bw .video-card:has(.wf-photo)::after { content: none !important; }
body.bw .pcard__visual .wf-photo, body.bw .prod-tile__visual .wf-photo,
body.bw .pdp__visual .wf-photo, body.bw .rel-card__visual .wf-photo,
body.bw .map-embed .wf-photo, body.bw .video-card .wf-photo { visibility: visible !important; }
/* FVバナー：画像を背面に敷き、「バナー（画像）」ラベルを消す（cat/titleはホバーで表示のまま） */
.fv-banner .wf-photo { position: absolute; inset: 0; z-index: 0; }
body.bw .fv-banner:has(.wf-photo) .fv-banner__tag { display: none !important; }
/* イントロ背景（動画想定）に敷いた仮画像は控えめに（文字は上に載る） */
.intro__bg .wf-photo--intro { position: absolute; inset: 0; }
body.bw .intro__bg .wf-photo--intro { opacity: .3 !important; }
body.bw .intro__bg:has(.wf-photo) { background: transparent !important; }
body.bw .intro__bg:has(.wf-photo) .intro__bg-note { display: none !important; }
/* Pick Up 背景タイルの仮画像（親 .products-bg の opacity .5 で自然に薄くなる） */
.products-bg__tile .wf-photo { position: absolute; inset: 0; }
body.bw .products-bg__tile:has(.wf-photo) { border: 0 !important; }
.products-bg__tile:has(.wf-photo)::after { content: none !important; }
/* Our Strengths：原稿下の英訳は薄い灰色を維持 */
body.bw .stack-card__body-en { color: #a7a7a7 !important; }
body.bw .strength-card__body-en { color: #a7a7a7 !important; }
/* Contactバナーの背景動画：暗幕と白文字を bw の一括指定に負けないよう !important で効かせる */
body.bw .footer-cta__veil { background: rgba(10, 20, 26, .42) !important; }
body.bw .footer-cta--banner:has(.footer-cta__vimeo) .footer-cta__en,
body.bw .footer-cta--banner:has(.footer-cta__vimeo) .footer-cta__ja,
body.bw .footer-cta--banner:has(.footer-cta__vimeo) .footer-cta__arrow { color: #fff !important; }

/* フッター背面リビール：本体は不透明な白で背面のFVを隠す（bwの一括透明化を打ち消す） */
body.bw .site-main,
body.bw .site-footer { background: #ffffff !important; }
/* すりガラス風レンズ：グラデーションと白文字を !important で効かせる（backdrop-filterはbw非対象） */
body.bw .footer-fv__lens {
  background:
    radial-gradient(130% 130% at 30% 24%, rgba(255,255,255,.80), rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 78%),
    radial-gradient(90% 90% at 74% 84%, rgba(206,210,216,.22), transparent 66%) !important;
}
body.bw .footer-fv__cta,
body.bw .footer-fv__cta * { color: #1e1e1e !important; }
/* 製品を探す（一覧表示）：行ホバーの色反転を bw の一括指定に負けないよう効かせる */
body.bw .finder-col__list a:hover,
body.bw .finder-col__list a:focus-visible { background: #1a1a1a !important; color: #ffffff !important; }
body.bw .finder-col__list a:hover i,
body.bw .finder-col__list a:focus-visible i { color: #ffffff !important; }

/* ---- 検索窓（ピル）：bw の一括指定（背景透明・文字#1a1a1a）に勝たせる ---- */
body.bw .psearch__box { border: 1px solid #dcdad5 !important; }
body.bw .psearch__box:focus-within { border-color: #1a1a1a !important; }
body.bw .psearch__box input { color: #1a1a1a !important; }
body.bw .psearch__box input::placeholder { color: #b5b3ae !important; }
/* 背景は親だけに塗る。子にも塗ると、ホバーで親だけ色が変わったとき
   文字の背後に元の色が残って箱状に浮き出る */
body.bw .psearch__btn { background: #1a1a1a !important; border: 0 !important; }
body.bw .psearch__btn * { background: none !important; border: 0 !important; color: #ffffff !important; stroke: #ffffff !important; }
body.bw .psearch__btn:hover { background: #444 !important; }
/* 右下の検索ボタン：黒地に白文字＋白アイコン */
body.bw .psearch-fab { background: #1a1a1a !important; border: 0 !important; }
body.bw .psearch-fab * { background: none !important; border: 0 !important; color: #ffffff !important; stroke: #ffffff !important; }
body.bw .psearch-fab:hover { background: #444 !important; }