/* ===================================================================
   ケーアイ工業 Webサイト ワイヤーフレーム共通スタイル
   グレースケール + アクセントブルー(#1E40AF)
   PC・SP両対応
   =================================================================== */

:root {
  --wf-bg: #fafafa;
  --wf-bg-section: #ffffff;
  --wf-bg-gray: #f1f3f5;
  --wf-border: #d1d5db;
  --wf-text: #1f2937;
  --wf-text-muted: #6b7280;
  --wf-placeholder: #d1d5db;
  --wf-placeholder-text: #6b7280;
  --wf-accent: #1E40AF;
  --wf-accent-hover: #1E3A8A;
  --wf-note-bg: #fff8e1;
  --wf-note-border: #f59e0b;

  --wf-radius: 4px;
  --wf-container: 1200px;
  --wf-section-pad: 80px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--wf-text);
  background: var(--wf-bg);
  padding-top: 64px; /* ヘッダー固定分 */
  padding-bottom: 0; /* SP固定フッター分はSPのmedia query側で確保（PCはバー非表示なので余白不要） */
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ===================================================================
   レイアウトユーティリティ
   =================================================================== */

.wf-container {
  max-width: var(--wf-container);
  margin: 0 auto;
  padding: 0 24px;
}

.wf-section {
  padding: var(--wf-section-pad) 0;
  background: var(--wf-bg-section);
}

.wf-section--gray {
  background: var(--wf-bg-gray);
}

.wf-section--narrow {
  padding: 56px 0;
}

.wf-section--no-pad-top {
  padding-top: 0;
}

/* トップのピラー3カード：メインビジュアルとの間に余白を確保 */
.wf-section--pillars {
  padding-top: 56px;
}

.wf-mt-l { margin-top: 56px; }
.wf-mb-l { margin-bottom: 56px; }

.wf-grid {
  display: grid;
  gap: 24px;
}

.wf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wf-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* 2枚のカードを3カラム時と同じ幅で中央に並べる（gap 24px 前提） */
.wf-grid--2of3 {
  grid-template-columns: repeat(2, calc((100% - 48px) / 3));
  justify-content: center;
}

/* ===================================================================
   注釈バナー・注釈ノート
   =================================================================== */

/* [WF注釈削除によりコメントアウト]
.wf-banner {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  background: var(--wf-accent);
  color: white;
  padding: 8px 16px;
  font-size: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom-left-radius: 8px;
}

.wf-banner__toggle {
  background: white;
  color: var(--wf-accent);
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}

.wf-note {
  max-width: var(--wf-container);
  margin: 0 auto;
  padding: 12px 24px;
  background: var(--wf-note-bg);
  border-left: 3px solid var(--wf-note-border);
  font-size: 13px;
  color: #92400e;
  margin-bottom: 0;
}

body.wf-hide-notes .wf-note {
  display: none;
}
*/

/* ===================================================================
   ヘッダー
   =================================================================== */

.wf-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--wf-bg-section);
  border-bottom: 1px solid var(--wf-border);
  z-index: 100;
}

.wf-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 32px;
}

.wf-header__logo {
  display: inline-flex;
  align-items: center;
}

.wf-header__logo img {
  height: 30px;
  width: auto;
  display: block;
}

.wf-header__nav {
  display: flex;
  gap: 24px;
  flex: 1;
  font-size: 14px;
}

.wf-header__nav a {
  color: var(--wf-text);
  position: relative;
}

.wf-header__nav a:hover {
  color: var(--wf-accent);
}

.wf-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wf-header__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 12px;
  line-height: 1.2;
  gap: 1px;
}

.wf-header__tel-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--wf-text-muted);
}

.wf-header__tel-label .wf-icon {
  font-size: 13px;
  opacity: 0.8;
}

.wf-header__tel-number {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--wf-text);
}

.wf-header__hamburger {
  display: none;
  background: none;
  border: 1px solid var(--wf-border);
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  border-radius: var(--wf-radius);
}

/* ===================================================================
   ボタン
   =================================================================== */

.wf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--wf-radius);
  font-weight: 600;
  font-size: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.wf-btn--primary {
  background: var(--wf-accent);
  color: white;
  border-color: var(--wf-accent);
}

.wf-btn--primary:hover {
  background: var(--wf-accent-hover);
  border-color: var(--wf-accent-hover);
}

.wf-btn--outline {
  background: transparent;
  color: var(--wf-text);
  border-color: var(--wf-text);
}

.wf-btn--ghost {
  background: rgba(255,255,255,0.1);
  color: white;
  border-color: white;
}

.wf-btn--large {
  padding: 16px 32px;
  font-size: 15px;
}

.wf-btn--small {
  padding: 8px 16px;
  font-size: 13px;
}

/* ===================================================================
   プレースホルダー
   =================================================================== */

.wf-placeholder {
  background: var(--wf-placeholder);
  color: var(--wf-placeholder-text);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wf-radius);
  text-align: center;
  font-size: 13px;
  padding: 16px;
  line-height: 1.5;
}

.wf-placeholder--hero {
  aspect-ratio: 16 / 7;
  font-size: 16px;
}

.wf-placeholder--hero-dark {
  background: #0f1419;
  color: rgba(255, 255, 255, 0.6);
}

/* 暗背景ヒーロープレースホルダー（本素材揃うまで暫定） */
.wf-placeholder--photo {
  background: #0f1419;
  color: transparent;
  border: none;
}

.wf-placeholder--square {
  aspect-ratio: 1;
}

.wf-placeholder--landscape {
  aspect-ratio: 16 / 10;
}

.wf-placeholder--portrait {
  aspect-ratio: 4 / 5;
}

.wf-placeholder--client {
  aspect-ratio: 3 / 1;
  font-weight: 600;
}

.wf-placeholder--related {
  aspect-ratio: 16 / 9;
}

/* ===================================================================
   実画像（プレースホルダー差し替え）
   =================================================================== */
.wf-img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--wf-radius);
}

.wf-img--square { aspect-ratio: 1; }
.wf-img--portrait { aspect-ratio: 4 / 5; }
.wf-img--landscape { aspect-ratio: 16 / 10; }
.wf-img--hero { aspect-ratio: 16 / 6; }
/* ショートハンド別名（実画像の実寸 ls=1000x625, pt=760x950, sq=760x760 に一致）。
   素材なしプレースホルダ(.wf-photo-ph)が「写真の枠」を正しく取れるように定義 */
.wf-img--ls { aspect-ratio: 16 / 10; }
.wf-img--pt { aspect-ratio: 4 / 5; }
.wf-img--sq { aspect-ratio: 1; }
.wf-img--building { aspect-ratio: 4 / 3; } /* 社屋写真(4:3)を無クロップで全景表示 */
/* ステンレス素材ページ：グリッド下の締め文（中央寄せ） */
.wf-stx-closing { max-width: 840px; margin: 36px auto 0; text-align: center; }
.wf-stx-closing p { line-height: 2; color: var(--wf-text-muted); }

/* 詳細ページのヒーロー（画像＋白文字オーバーレイ用スクリム） */
.wf-detail-hero__media {
  position: relative;
}

.wf-detail-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,18,22,0.82) 0%, rgba(15,18,22,0.5) 45%, rgba(15,18,22,0.15) 100%);
}

/* カード上部に密着する画像はフラット（カード側で角丸クリップ） */
.wf-product-card > .wf-img,
.wf-flagship-card > .wf-img,
.wf-work-card > .wf-img,
.wf-feature-card__media .wf-img,
.wf-gallery__item .wf-img,
.wf-detail-hero__media .wf-img {
  border-radius: 0;
}

.wf-pillar .wf-img {
  aspect-ratio: 16 / 10;
  margin-bottom: 20px;
}

/* 採用ページ：高さ固定コンテナを埋める画像 */
.wf-r-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wf-r-photo-grid .wf-img {
  height: 100%;
  aspect-ratio: auto;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

/* ===================================================================
   FV
   =================================================================== */

.wf-fv {
  position: relative;
  margin-bottom: 0;
}

.wf-fv__media {
  position: relative;
  height: min(82vh, 800px);
  min-height: 520px;
  overflow: hidden;
  background: #0f1419;
}

.wf-fv__media .wf-placeholder {
  border-radius: 0;
}

/* ヒーローのスライドショー（クロスフェード＋ゆっくりズーム） */
.wf-fv__slides {
  position: absolute;
  inset: 0;
}

.wf-fv__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: wf-fv-cf 64s ease-in-out infinite;
}

/* FVが画面下に流れたら（カード閲覧中など）常時アニメを停止し描画負荷を抑える＝カクつき/ちらつき防止 */
.wf-fv__media.is-fv-quiet .wf-fv__slide,
.wf-fv__media.is-fv-quiet .wf-fv__scroll-line::after { animation-play-state: paused; }

/* 8枚を8秒間隔でずらす＝写真の合間に必ず黒が入る。「人→物→人→物…」で作業者を合間に挿入。
   ディレイは「3-8n を64で正規化」＝表示順を 1→2→…→8 にしつつ、先頭(mv)を読込時に表示 */
.wf-fv__slide--1 { background-image: url(images/hero-1.jpg);         animation-delay: -3s;  opacity: 1; } /* 人：mv 溶接の火花 */
.wf-fv__slide--2 { background-image: url(images/about-handrail.jpg); animation-delay: -59s; } /* 物：ステンレス手摺の接合部 */
.wf-fv__slide--3 { background-image: url(images/work-stainless.jpg); animation-delay: -51s; } /* 人：ステンレス管を仕上げる職人 */
.wf-fv__slide--4 { background-image: url(images/hero-3.jpg);         animation-delay: -43s; } /* 物：金色の歯車（機械加工品）*/
.wf-fv__slide--5 { background-image: url(images/work-frame.jpg);     animation-delay: -35s; } /* 人：大型フレームの組立 */
.wf-fv__slide--6 { background-image: url(images/hero-4.jpg);         animation-delay: -27s; } /* 物：デザイン門扉 */
.wf-fv__slide--7 { background-image: url(images/work-grind.jpg);     animation-delay: -19s; } /* 人：2人で研磨作業 */
.wf-fv__slide--8 { background-image: url(images/about-laser.jpg);    animation-delay: -11s; } /* 物：AMADAレーザー加工機 */

/* フェード・スルー・ブラック：黒→じんわり写真→キープ→じんわり黒、を1枚あたり8秒で繰り返す
   （全8枚＝64秒周期。写真の表示=約6.2秒／写真の間に約1.8秒の黒。前回より速いテンポ。ease-in-outでなめらか） */
@keyframes wf-fv-cf {
  0%     { opacity: 0; transform: scale(1.00); } /* 黒 */
  2.81%  { opacity: 1; transform: scale(1.02); } /* じんわり出現（約1.8秒） */
  6.88%  { opacity: 1; transform: scale(1.04); } /* 表示キープ＋ゆっくりズーム */
  9.69%  { opacity: 0; transform: scale(1.06); } /* じんわり黒へ（約1.8秒） */
  100%   { opacity: 0; transform: scale(1.00); } /* 次の写真まで黒のまま（約1.8秒） */
}

/* 動きを抑える設定のユーザーには1枚目を静止表示 */
@media (prefers-reduced-motion: reduce) {
  .wf-fv__slide { animation: none; }
  .wf-fv__slide--1 { opacity: 1; }
  .wf-fv__slide:not(.wf-fv__slide--1) { opacity: 0; }
}

/* 白文字を読みやすくする暗グラデーション（左を濃く） */
.wf-fv__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 85% at 6% 92%, rgba(231,138,45,0.22) 0%, rgba(231,138,45,0) 46%),
    linear-gradient(90deg, rgba(8,10,14,0.86) 0%, rgba(8,10,14,0.6) 38%, rgba(8,10,14,0.2) 70%, rgba(8,10,14,0.06) 100%),
    linear-gradient(0deg, rgba(8,10,14,0.55) 0%, rgba(8,10,14,0) 48%),
    radial-gradient(140% 130% at 50% 42%, rgba(0,0,0,0) 54%, rgba(0,0,0,0.5) 100%);
}

.wf-fv__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 80px;
  max-width: 800px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.wf-fv__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  color: white;
}

.wf-fv__title-main {
  font-size: 42px;
  line-height: 1.3;
  font-weight: 700;
}

.wf-fv__title-sub {
  font-size: 22px;
  font-weight: 500;
  opacity: 0.95;
}

.wf-fv__lead {
  font-size: 16px;
  color: white;
  margin-bottom: 32px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  line-height: 1.8;
}

.wf-fv__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===================================================================
   FV リッチ演出（エンバー粒子・シネマ調グレード・見出しリビール）
   =================================================================== */
.wf-fv__sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wf-fv__overlay { z-index: 3; }

/* 見出しを大きく＋キーワードをゴールドのグラデ文字に */
.wf-fv__title-main { font-size: clamp(34px, 4.6vw, 60px); }
.wf-fv__accent {
  background: linear-gradient(92deg, #ffe1a3 0%, #ffb84d 55%, #e89227 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ゴールドのアイブロウ＆罫線 */
.wf-fv__eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.34em;
  color: var(--wf-gold); margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 12px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.wf-fv__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--wf-gold); }
.wf-fv__rule {
  display: block; width: 72px; height: 3px; margin: 2px 0 26px; border-radius: 2px;
  background: linear-gradient(90deg, var(--wf-gold) 0%, rgba(255,184,77,0) 100%);
}

/* スクロール誘導 */
.wf-fv__scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.wf-fv__scroll-text { font-size: 10px; letter-spacing: 0.32em; font-weight: 700; color: rgba(255,255,255,0.8); }
.wf-fv__scroll-line { position: relative; width: 1px; height: 44px; background: rgba(255,255,255,0.28); overflow: hidden; }
.wf-fv__scroll-line::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 45%;
  background: var(--wf-gold); animation: wf-fv-scroll 1.9s ease-in-out infinite;
}
@keyframes wf-fv-scroll { 0% { transform: translateY(-100%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(240%); opacity: 0; } }

/* 読み込み時の見出しリビール（CSSのみで発火＝チラつき防止） */
.wf-fv__eyebrow, .wf-fv__title-main, .wf-fv__title-sub, .wf-fv__cta, .wf-fv__trust-link {
  animation: wf-fv-in 0.85s var(--wf-ease) both;
}
.wf-fv__eyebrow    { animation-delay: 0.15s; }
.wf-fv__title-main { animation-delay: 0.30s; }
.wf-fv__title-sub  { animation-delay: 0.46s; }
.wf-fv__cta        { animation-delay: 0.64s; }
.wf-fv__trust-link { animation-delay: 0.76s; }
.wf-fv__rule { animation: wf-fv-rule 0.7s var(--wf-ease) 0.58s both; }
@keyframes wf-fv-in   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wf-fv-rule { from { width: 0; } to { width: 72px; } }

@media (prefers-reduced-motion: reduce) {
  .wf-fv__sparks { display: none; }
  .wf-fv__eyebrow, .wf-fv__title-main, .wf-fv__title-sub, .wf-fv__cta, .wf-fv__trust-link {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .wf-fv__rule { width: 72px !important; animation: none !important; }
  .wf-fv__scroll-line::after { animation: none !important; }
}

/* ===================================================================
   セクションヘッダー
   =================================================================== */

.wf-section-header {
  text-align: center;
  margin-bottom: 56px;
}

.wf-section-header__eyebrow {
  color: var(--wf-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}

.wf-section-header__title {
  font-size: 32px;
  margin-bottom: 12px;
}

.wf-section-header__lead {
  color: var(--wf-text-muted);
  font-size: 15px;
}

.wf-section-footer {
  text-align: center;
  margin-top: 40px;
}

/* ===================================================================
   3本柱（FV直下）
   =================================================================== */

.wf-pillar {
  display: block;
  background: var(--wf-bg-section);
  padding: 32px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  position: relative;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.wf-pillar:hover {
  border-color: var(--wf-accent);
  transform: translateY(-4px);
}

.wf-pillar .wf-placeholder {
  margin-bottom: 20px;
}

.wf-pillar__title {
  font-size: 20px;
  margin-bottom: 8px;
}

.wf-pillar__desc {
  font-size: 14px;
  color: var(--wf-text-muted);
  margin-bottom: 16px;
}

.wf-pillar__arrow {
  color: var(--wf-accent);
  font-weight: 700;
}

/* ===================================================================
   About
   =================================================================== */

.wf-about {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 48px;
  align-items: stretch;
}

/* 左の画像を右カラム（テキスト）の高さに合わせてフィット */
.wf-about__media {
  position: relative;
  min-height: 0;
}

.wf-about__media .wf-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
}

/* レビュー注記は画像内の左下にオーバーレイ（高さに影響させない） */
.wf-about__media .wf-photo-note {
  position: absolute;
  left: 8px;
  bottom: 8px;
  margin-top: 0;
  z-index: 2;
}

.wf-about__text > p {
  margin-bottom: 16px;
}

.wf-about__stats {
  display: flex;
  gap: 32px;
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--wf-border);
  border-bottom: 1px solid var(--wf-border);
}

.wf-stat {
  display: flex;
  flex-direction: column;
}

.wf-stat__number {
  font-size: 36px;
  font-weight: 700;
  color: var(--wf-accent);
  line-height: 1;
}

.wf-stat__number small {
  font-size: 16px;
  margin-left: 4px;
  color: var(--wf-text);
}

.wf-stat__label {
  font-size: 12px;
  color: var(--wf-text-muted);
  margin-top: 4px;
}

/* ===================================================================
   ★NEW FV内 取引先アンカーリンク
   =================================================================== */

.wf-fv__trust-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  color: white;
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: all 0.2s;
}

.wf-fv__trust-link:hover {
  opacity: 0.8;
  transform: translateY(2px);
}

.wf-fv__trust-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
}

.wf-fv__trust-arrow {
  font-size: 14px;
  opacity: 0.7;
}

/* スクロールアンカー：固定ヘッダー分のオフセット */
#clients {
  scroll-margin-top: 80px;
}

/* ===================================================================
   特徴カード（4つ）写真メイン
   =================================================================== */

.wf-feature-card {
  display: block;
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  overflow: hidden;
  transition: all 0.2s;
}

.wf-feature-card:hover {
  border-color: var(--wf-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.wf-feature-card__media {
  position: relative;
}

.wf-feature-card__media .wf-placeholder {
  border-radius: 0;
}

.wf-feature-card__number {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--wf-accent);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 2px;
}

.wf-feature-card__body {
  padding: 24px;
}

.wf-feature-card h4 {
  font-size: 17px;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.wf-feature-card p {
  font-size: 13px;
  color: var(--wf-text-muted);
  line-height: 1.6;
}

/* ===================================================================
   製品カード（オーダーメイド・自社製品）
   =================================================================== */

.wf-product-card,
.wf-flagship-card,
.wf-work-card {
  display: block;
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  overflow: hidden;
  transition: all 0.2s;
}

.wf-product-card:hover,
.wf-flagship-card:hover,
.wf-work-card:hover {
  border-color: var(--wf-accent);
  transform: translateY(-2px);
}

.wf-product-card__body,
.wf-flagship-card__body,
.wf-work-card__body {
  padding: 20px;
}

.wf-product-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.wf-product-card p {
  font-size: 13px;
  color: var(--wf-text-muted);
  margin-bottom: 12px;
}

.wf-flagship-card__body {
  padding: 28px;
}

.wf-flagship-card h3 {
  font-size: 22px;
  margin: 8px 0 12px;
}

.wf-flagship-card p {
  font-size: 14px;
  color: var(--wf-text-muted);
  margin-bottom: 16px;
}

.wf-badge {
  display: inline-block;
  background: var(--wf-accent);
  color: white;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ===================================================================
   施工事例カード
   =================================================================== */

.wf-work-card h4 {
  font-size: 15px;
  margin: 8px 0 6px;
  line-height: 1.5;
}

.wf-work-card__meta {
  font-size: 12px;
  color: var(--wf-text-muted);
}

.wf-tag {
  display: inline-block;
  background: var(--wf-bg-gray);
  color: var(--wf-text);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.wf-link-arrow {
  color: var(--wf-accent);
  font-size: 13px;
  font-weight: 600;
}

/* ===================================================================
   取引先グリッド
   =================================================================== */

.wf-clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.wf-clients-note {
  text-align: center;
  font-size: 12px;
  color: var(--wf-text-muted);
}

/* ===================================================================
   CTA帯
   =================================================================== */

.wf-cta-band {
  background: var(--wf-text);
  color: white;
  padding: 64px 0;
}

.wf-cta-band__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}

.wf-cta-band h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.wf-cta-band p {
  color: rgba(255,255,255,0.8);
  font-size: 15px;
}

.wf-cta-band__actions {
  display: flex;
  gap: 24px;
  align-items: center;
}

.wf-tel-block {
  display: flex;
  flex-direction: column;
}

.wf-tel-block__label {
  font-size: 12px;
  opacity: 0.8;
}

.wf-tel-block__number {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.wf-tel-block__hours {
  font-size: 11px;
  opacity: 0.7;
}

/* ===================================================================
   FAQ
   =================================================================== */

.wf-faq {
  max-width: 800px;
  margin: 0 auto;
}

.wf-faq__item {
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  margin-bottom: 12px;
  padding: 20px 24px;
}

.wf-faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wf-faq__item summary::after {
  content: "+";
  font-size: 24px;
  color: var(--wf-accent);
  font-weight: 300;
}

.wf-faq__item[open] summary::after {
  content: "−";
}

.wf-faq__item p {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--wf-border);
  font-size: 14px;
  color: var(--wf-text-muted);
}

/* ===================================================================
   関連事業
   =================================================================== */

.wf-related-card {
  display: block;
  background: var(--wf-bg-section);
  padding: 24px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  transition: all 0.2s;
}

.wf-related-card:hover {
  border-color: var(--wf-accent);
}

.wf-related-card .wf-placeholder {
  margin-bottom: 16px;
}

.wf-related-card h4 {
  font-size: 18px;
  margin-bottom: 8px;
}

.wf-related-card p {
  font-size: 13px;
  color: var(--wf-text-muted);
  margin-bottom: 12px;
}

/* ===================================================================
   採用CTA
   =================================================================== */

.wf-recruit {
  background: var(--wf-bg-section);
  padding: var(--wf-section-pad) 0;
}

.wf-recruit__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.wf-recruit__eyebrow {
  color: var(--wf-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}

.wf-recruit h2 {
  font-size: 32px;
  margin-bottom: 16px;
}

.wf-recruit p:not(.wf-recruit__eyebrow) {
  color: var(--wf-text-muted);
  margin-bottom: 24px;
}

/* ===================================================================
   フッター
   =================================================================== */

.wf-footer {
  background: #111418;
  color: rgba(255,255,255,0.9);
  padding: 64px 0 24px;
}

.wf-footer a {
  color: rgba(255,255,255,0.7);
}

.wf-footer a:hover {
  color: white;
}

.wf-footer__top {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 48px;
  margin-bottom: 48px;
}

.wf-footer__logo {
  display: inline-block;
  margin-bottom: 12px;
}

.wf-footer__logo img {
  height: 32px;
  width: auto;
  display: block;
}

.wf-footer__tagline {
  font-size: 13px;
  margin-top: 12px;
  color: rgba(255,255,255,0.5);
}

.wf-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.wf-footer__nav h5 {
  font-size: 13px;
  margin-bottom: 16px;
  color: white;
}

.wf-footer__nav ul {
  list-style: none;
}

.wf-footer__nav li {
  font-size: 13px;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.6);
}

/* 連絡先情報（リンクではない）はリンク群から少し離して区別 */
.wf-footer__nav li.wf-footer__contact {
  margin-top: 16px;
  color: rgba(255,255,255,0.45);
}

.wf-footer__locations {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 32px;
  margin-bottom: 32px;
}

.wf-footer__locations h5 {
  font-size: 13px;
  margin-bottom: 16px;
  color: white;
}

.wf-footer__locations strong {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: white;
}

.wf-footer__locations p {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.wf-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
}

.wf-footer__sns {
  display: flex;
  gap: 16px;
}

/* ===================================================================
   SP固定フッター
   =================================================================== */

.wf-mobile-footer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--wf-bg-section);
  border-top: 1px solid var(--wf-border);
  z-index: 100;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
}

.wf-mobile-footer__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
}

.wf-mobile-footer__btn--tel {
  background: var(--wf-bg-section);
  color: var(--wf-text);
  border-right: 1px solid var(--wf-border);
}

.wf-mobile-footer__btn--form {
  background: var(--wf-accent);
  color: white;
}

/* ===================================================================
   PC採用固定リンク
   =================================================================== */

.wf-floating-recruit {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(0deg);
  background: var(--wf-text);
  color: white;
  padding: 14px 18px;
  writing-mode: vertical-rl;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  z-index: 90;
  border-top-left-radius: var(--wf-radius);
  border-bottom-left-radius: var(--wf-radius);
}

.wf-floating-recruit:hover {
  background: var(--wf-accent);
}

/* ===================================================================
   レスポンシブ：SP
   =================================================================== */

@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding-bottom: 56px;
  }

  .wf-container {
    padding: 0 16px;
  }

  .wf-section {
    padding: 48px 0;
  }

  .wf-section--narrow {
    padding: 32px 0;
  }

  /* ヘッダー：ナビとPC電話を隠す、ハンバーガー表示 */
  .wf-header__nav,
  .wf-header__right {
    display: none;
  }

  .wf-header__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  /* ハンバーガー開時：ヘッダー直下にドロップダウン表示 */
  .wf-header.is-menu-open {
    height: auto;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  }
  .wf-header.is-menu-open .wf-header__inner {
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    padding-bottom: 14px;
  }
  .wf-header.is-menu-open .wf-header__nav,
  .wf-header.is-menu-open .wf-header__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 100%;
    gap: 0;
  }
  .wf-header.is-menu-open .wf-header__nav {
    order: 2;
    margin-top: 6px;
    border-top: 1px solid var(--wf-border);
  }
  .wf-header.is-menu-open .wf-header__nav a {
    padding: 15px 4px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid var(--wf-border);
  }
  .wf-header.is-menu-open .wf-header__right {
    order: 3;
    gap: 14px;
    padding-top: 16px;
  }
  .wf-header.is-menu-open .wf-header__tel {
    align-items: flex-start;
  }
  .wf-header.is-menu-open .wf-header__right .wf-btn {
    width: 100%;
  }

  /* FV */
  .wf-fv__overlay {
    padding: 0 24px;
  }

  .wf-fv__title-main {
    font-size: 24px;
  }

  .wf-fv__title-sub {
    font-size: 15px;
  }

  .wf-fv__lead {
    font-size: 13px;
  }

  .wf-fv__cta {
    flex-direction: column;
    align-items: flex-start;
  }
  /* FVのCTAボタンはSPで大きすぎるため、内容幅＋控えめサイズに（full-width巨大化を防ぐ） */
  .wf-fv__cta .wf-btn--large {
    width: auto;
    padding: 12px 24px;
    font-size: 14px;
  }

  .wf-btn--large {
    width: 100%;
  }

  .wf-placeholder--hero {
    aspect-ratio: 4 / 5;
  }

  /* SPではヒーローを縦長にして文字を収める */
  .wf-fv__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .wf-fv__scrim {
    background:
      linear-gradient(0deg, rgba(8,10,14,0.85) 0%, rgba(8,10,14,0.4) 50%, rgba(8,10,14,0.25) 100%);
  }

  /* グリッド：全部1カラム */
  .wf-grid--2,
  .wf-grid--3,
  .wf-grid--4,
  .wf-grid--2of3 {
    grid-template-columns: 1fr;
  }

  /* 並列カードはSPで横スクロール（スワイプ）に＝縦積みにしない */
  .wf-grid.wf-grid--scroll-sp {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;           /* コンテナ余白を相殺して端まで見せる */
    padding: 4px 24px 14px;
    scroll-padding-left: 24px;
  }
  .wf-grid.wf-grid--scroll-sp > * {
    flex: 0 0 80%;             /* 1枚を大きく＋次カードをちら見せ */
    max-width: 300px;
    scroll-snap-align: start;
  }
  .wf-grid.wf-grid--scroll-sp::-webkit-scrollbar { height: 4px; }
  .wf-grid.wf-grid--scroll-sp::-webkit-scrollbar-thumb { background: rgba(15,20,25,.2); border-radius: 4px; }

  /* 採用ページの並列カード（求む創作人）も同様にSP横スクロール（独自グリッドのため別指定・端余白は維持） */
  .wf-r-want-grid.wf-grid--scroll-sp {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .wf-r-want-grid.wf-grid--scroll-sp > * {
    flex: 0 0 80%;
    max-width: 300px;
    scroll-snap-align: start;
  }
  .wf-r-want-grid.wf-grid--scroll-sp::-webkit-scrollbar { height: 4px; }
  .wf-r-want-grid.wf-grid--scroll-sp::-webkit-scrollbar-thumb { background: rgba(15,20,25,.2); border-radius: 4px; }

  /* 取引先は2カラム */
  .wf-clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* FV内の取引先リンクをSPで調整 */
  .wf-fv__trust-link {
    font-size: 11px;
    margin-top: 24px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .wf-fv__trust-label {
    font-size: 9px;
  }

  /* 3本柱：通常配置 */
  .wf-pillar {
    padding: 24px;
  }

  .wf-section--no-pad-top {
    padding-top: 48px;
  }

  /* About：縦並び */
  .wf-about {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 縦並び時は画像を通常表示（横長）に戻す */
  .wf-about__media .wf-img {
    position: static;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .wf-about__media .wf-photo-note {
    position: static;
    margin-top: 4px;
  }

  .wf-about__stats {
    flex-wrap: wrap;
    gap: 16px;
  }

  /* セクションヘッダー */
  .wf-section-header__title {
    font-size: 24px;
  }

  /* CTA帯 */
  .wf-cta-band__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wf-cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .wf-cta-band h2 {
    font-size: 22px;
  }

  /* 採用 */
  .wf-recruit__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wf-recruit h2 {
    font-size: 24px;
  }

  /* フッター */
  .wf-footer__top {
    grid-template-columns: 1fr;
  }

  .wf-footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-footer__bottom {
    flex-direction: column;
    gap: 12px;
  }

  /* SP固定フッター表示 */
  .wf-mobile-footer {
    display: flex;
  }

  /* PC採用固定リンクは非表示 */
  .wf-floating-recruit {
    display: none;
  }

  /* [WF注釈削除によりコメントアウト]
  .wf-banner {
    font-size: 11px;
    padding: 6px 10px;
  }

  .wf-banner span {
    display: none;
  }
  */
}


/* ====================================================================
   下層ページ用スタイル（追記）
   ==================================================================== */

/* ヘッダーのアクティブ状態 */
.wf-header__nav a.is-active {
  color: var(--wf-accent);
  font-weight: 700;
}

.wf-header__nav a.is-active::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--wf-accent);
}

/* ===================================================================
   パンくず
   =================================================================== */

.wf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--wf-text-muted);
  margin-bottom: 24px;
}

.wf-breadcrumb a {
  color: var(--wf-text-muted);
}

.wf-breadcrumb a:hover {
  color: var(--wf-accent);
}

.wf-breadcrumb__sep {
  color: var(--wf-border);
}

.wf-breadcrumb--on-hero {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}

.wf-breadcrumb--on-hero a {
  color: rgba(255, 255, 255, 0.85);
}

.wf-breadcrumb--on-hero .wf-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.4);
}

/* ===================================================================
   下層ページ共通ヘッダー
   =================================================================== */

.wf-page-header {
  padding: 56px 0 32px;
  background: var(--wf-bg-section);
  border-bottom: 1px solid var(--wf-border);
}

.wf-page-header__eyebrow {
  color: var(--wf-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

.wf-page-header__title {
  font-size: 40px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.wf-page-header__lead {
  font-size: 15px;
  color: var(--wf-text-muted);
  line-height: 1.9;
  max-width: 720px;
}

/* 暗背景ページヘッダー（本素材揃うまで暫定） */
.wf-page-header--with-bg {
  position: relative;
  min-height: 320px;
  padding: 80px 0 56px;
  background-color: #0f1419;
  border-bottom: none;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.wf-page-header--with-bg > .wf-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.wf-page-header--with-bg .wf-breadcrumb,
.wf-page-header--with-bg .wf-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
}

.wf-page-header--with-bg .wf-breadcrumb a:hover {
  color: #fff;
}

.wf-page-header--with-bg .wf-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.4);
}

.wf-page-header--with-bg .wf-page-header__eyebrow {
  color: #ffb84d;
}

.wf-page-header--with-bg .wf-page-header__title {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.wf-page-header--with-bg .wf-page-header__lead {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.wf-page-header--with-bg .wf-page-header__lead small {
  color: rgba(255, 255, 255, 0.7);
}

/* 背景画像レイヤー（ページ別に --hd-img を指定）＋可読性スクリム */
.wf-page-header--with-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hd-img, none);
  background-size: cover;
  background-position: center;
}

.wf-page-header--with-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(12, 16, 20, 0.94) 0%,
    rgba(12, 16, 20, 0.8) 42%,
    rgba(12, 16, 20, 0.55) 100%
  );
}

/* タイトル・リードは1行想定（折り返さない短文に） */
.wf-page-header--with-bg .wf-page-header__title,
.wf-page-header--with-bg .wf-page-header__lead {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .wf-page-header--with-bg .wf-page-header__title,
  .wf-page-header--with-bg .wf-page-header__lead {
    white-space: normal;
  }
}

/* ===================================================================
   狭めコンテナ（本文・スペック表用）
   =================================================================== */

.wf-container--narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================================================================
   選ばれる理由カード
   =================================================================== */

.wf-reason-card {
  background: var(--wf-bg-section);
  padding: 32px 28px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
}

.wf-reason-card__number {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--wf-accent);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--wf-accent);
}

.wf-reason-card h4 {
  font-size: 18px;
  margin-bottom: 12px;
}

.wf-reason-card p {
  font-size: 14px;
  color: var(--wf-text-muted);
  line-height: 1.7;
}

/* ===================================================================
   流れステップ（簡易版）
   =================================================================== */

.wf-flow-steps {
  display: flex;
  align-items: stretch;
  gap: 16px;
  justify-content: center;
}

.wf-flow-step {
  flex: 1;
  background: var(--wf-bg-section);
  padding: 24px 16px;
  border-radius: var(--wf-radius);
  text-align: center;
  border: 1px solid var(--wf-border);
  overflow: hidden;
}

/* 画像はカード両端・上端までフルブリードして大きく見せる（--5 の padding 20/12 を相殺） */
.wf-flow-step__img {
  width: calc(100% + 24px);
  margin: -20px -12px 16px;
  border-radius: 0;
  aspect-ratio: 4 / 3;
}

.wf-flow-step__num {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: var(--wf-accent);
  color: white;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: 12px;
}

.wf-flow-step h4 {
  font-size: 14px;
  margin-bottom: 4px;
}

.wf-flow-step p {
  font-size: 11px;
  color: var(--wf-text-muted);
}

.wf-flow-step__arrow {
  display: flex;
  align-items: center;
  color: var(--wf-border);
  font-size: 20px;
  font-weight: 300;
}

/* ===================================================================
   詳細ヒーロー（テンプレB）
   =================================================================== */

.wf-detail-hero {
  position: relative;
  background: var(--wf-text);
}

.wf-detail-hero__media .wf-placeholder {
  border-radius: 0;
  aspect-ratio: 16 / 6;
}

.wf-detail-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.wf-detail-hero__category {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 100px;
  display: inline-block;
  width: fit-content;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.2);
}

.wf-detail-hero__title {
  font-size: 44px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.wf-detail-hero__lead {
  font-size: 16px;
  opacity: 0.95;
  line-height: 1.8;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ===================================================================
   プロース本文
   =================================================================== */

.wf-prose {
  font-size: 15px;
  line-height: 2;
  color: var(--wf-text);
}

.wf-prose__lead {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.9;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--wf-border);
}

.wf-prose p {
  margin-bottom: 20px;
}

/* ヘッダー直下の重要リード文を強調（全ページ共通）
   ※ products/metalart の「▼ ここからは ▼」等、インラインstyle付きの区切り見出しは除外 */
.wf-container--narrow > .wf-prose > .wf-prose__lead:not([style]) {
  position: relative;
  text-align: center;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: var(--wf-text);
  padding: 64px 0 0;
  margin-bottom: 28px;
  border-bottom: none;
}

.wf-container--narrow > .wf-prose > .wf-prose__lead:not([style])::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 3px;
  background: var(--wf-accent);
}

.wf-container--narrow > .wf-prose > .wf-prose__lead:not([style]) ~ p {
  text-align: left;
  font-size: 16px;
  line-height: 2.1;
  color: var(--wf-text-muted);
}

/* スペック一覧（枠囲み） */
.wf-prose__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  background: var(--wf-bg-section);
}

.wf-prose__list li {
  font-size: 14px;
  line-height: 1.7;
  padding: 10px 0;
  border-bottom: 1px dashed var(--wf-border);
}

.wf-prose__list li:first-child {
  padding-top: 0;
}

.wf-prose__list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* ===================================================================
   ギャラリー（1+5）
   =================================================================== */

.wf-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.wf-gallery__item {
  border-radius: var(--wf-radius);
  overflow: hidden;
}

.wf-gallery__item--large {
  grid-column: span 6;
}

.wf-gallery__item:not(.wf-gallery__item--large) {
  grid-column: span 2;
}

.wf-gallery__item .wf-placeholder {
  border-radius: 0;
  margin: 0;
}

/* ===================================================================
   スペック表
   =================================================================== */

.wf-spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wf-bg-section);
  border-radius: var(--wf-radius);
  overflow: hidden;
  border: 1px solid var(--wf-border);
}

.wf-spec-table th,
.wf-spec-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--wf-border);
  font-size: 14px;
  vertical-align: top;
}

.wf-spec-table th {
  background: var(--wf-bg-gray);
  font-weight: 700;
  width: 30%;
  white-space: nowrap;
  color: var(--wf-text);
}

.wf-spec-table td {
  color: var(--wf-text-muted);
}

.wf-spec-table tr:last-child th,
.wf-spec-table tr:last-child td {
  border-bottom: none;
}

/* ===================================================================
   下層ページ SP対応
   =================================================================== */

@media (max-width: 768px) {
  .wf-page-header {
    padding: 32px 0 24px;
  }

  .wf-page-header--with-bg {
    min-height: 220px;
    padding: 48px 0 32px;
  }

  .wf-page-header__title {
    font-size: 26px;
    line-height: 1.35;
  }

  /* 詳細ヒーロー：SPは縦長 */
  .wf-detail-hero__media .wf-placeholder {
    aspect-ratio: 4 / 5;
  }

  .wf-detail-hero__inner {
    padding: 24px;
  }

  .wf-detail-hero__title {
    font-size: 26px;
  }

  .wf-detail-hero__lead {
    font-size: 13px;
  }

  /* 流れステップ：SPは縦並び */
  .wf-flow-steps {
    flex-direction: column;
  }

  .wf-flow-step__arrow {
    transform: rotate(90deg);
    justify-content: center;
  }

  /* ギャラリー：SPは2カラム */
  .wf-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-gallery__item--large {
    grid-column: span 2;
  }

  .wf-gallery__item:not(.wf-gallery__item--large) {
    grid-column: span 1;
  }

  /* スペック表：SPは縦並び（コンパクト版も含める） */
  .wf-spec-table th,
  .wf-spec-table td,
  .wf-spec-table--compact th,
  .wf-spec-table--compact td {
    display: block;
    width: 100%;
    padding: 12px 16px;
  }

  .wf-spec-table th,
  .wf-spec-table--compact th {
    padding-bottom: 4px;
    background: transparent;
    border-bottom: none;
  }

  /* プロース */
  .wf-prose__lead {
    font-size: 15px;
  }
}


/* ====================================================================
   下層ページ用スタイル（追記：既存サイト内容反映版）
   ==================================================================== */

/* リード文の small */
.wf-page-header__lead small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--wf-text-muted);
}

/* 5ステップフロー */
.wf-flow-steps--5 .wf-flow-step {
  padding: 20px 12px;
}

.wf-flow-steps--5 .wf-flow-step h4 {
  font-size: 13px;
}

.wf-flow-steps--5 .wf-flow-step p {
  font-size: 10px;
}

/* 2カラム情報ブロック */
.wf-info-block {
  background: var(--wf-bg-section);
  padding: 32px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
}

.wf-info-block__img {
  margin-bottom: 20px;
}

.wf-info-block__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--wf-accent);
  margin-bottom: 12px;
}

.wf-info-block h3 {
  font-size: 19px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.wf-info-block p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--wf-text-muted);
}

/* 左右分割（メディア+テキスト） */
.wf-feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.wf-feature-split__text h2 {
  font-size: 30px;
  margin: 12px 0 20px;
  letter-spacing: 0.02em;
}

.wf-feature-split__text p {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--wf-text-muted);
}

.wf-feature-split__text .wf-btn {
  margin-top: 16px;
}

/* 5タイプ目次ナビ */
.wf-type-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.wf-type-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  text-align: center;
  font-size: 13px;
  transition: all 0.2s;
}

.wf-type-nav__item:hover {
  border-color: var(--wf-accent);
  transform: translateY(-2px);
}

.wf-type-nav__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--wf-accent);
}

/* タイプ別セクション */
.wf-type-section {
  scroll-margin-top: 80px;
}

.wf-type-section__header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--wf-text);
}

.wf-type-section__num {
  font-size: 36px;
  font-weight: 700;
  color: var(--wf-accent);
  line-height: 1;
  letter-spacing: 0.05em;
  font-family: 'Helvetica Neue', sans-serif;
}

.wf-type-section__header h2 {
  font-size: 26px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.wf-type-section__header > div > p {
  font-size: 13px;
  color: var(--wf-text-muted);
}

.wf-type-section__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 左（タイトル＋テキスト）・右スライダーの2カラム */
.wf-type-section__body--split {
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
}
.wf-type-section__body--split > .wf-type-section__main,
.wf-type-section__body--split > .wf-prose,
.wf-type-section__body--split > .wf-slider,
.wf-type-section__body--split > .wf-figure {
  flex: 1 1 0;
  min-width: 0;
}

/* 左カラム：タイトル＋テキストをまとめる */
.wf-type-section__main {
  display: flex;
  flex-direction: column;
}
.wf-type-section__main > .wf-type-section__header {
  margin-bottom: 24px;
}

/* 補助制度などの注釈（要素の下にシンプルに記載） */
.wf-notice-box {
  margin-top: 12px;
}

.wf-notice-box p {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 6px;
  color: var(--wf-text-muted);
}

.wf-notice-box p:last-child {
  margin-bottom: 0;
}

.wf-notice-box strong {
  font-weight: 700;
  color: var(--wf-text);
}

.wf-notice-box small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--wf-text-muted);
  line-height: 1.7;
}

/* 写真キャプション付き figure */
.wf-figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-figure figcaption {
  font-size: 12px;
  color: var(--wf-text-muted);
  text-align: center;
  line-height: 1.5;
}

.wf-figure figcaption small {
  font-size: 10px;
  display: block;
}

/* 締めの文 */
.wf-closing-message {
  text-align: center;
}

.wf-closing-message__lead {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
  line-height: 1.8;
}

.wf-closing-message p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--wf-text-muted);
  margin-bottom: 12px;
}

/* aimaオンラインショップ誘導バナー（MOATO等） */
.wf-shop-banner {
  display: block;
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
}
.wf-shop-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wf-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  transition: transform 0.2s, box-shadow 0.2s;
}
.wf-shop-banner:hover img {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}
.wf-shop-banner__cap {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wf-accent);
}

/* 注文時の注記 */
.wf-order-note {
  font-size: 13px !important;
  color: var(--wf-text-muted);
  margin-bottom: 24px !important;
}

/* ご注文案内バンド（直下のCTAバンドと隙間なく連結し1セットに見せる） */
.wf-order-band {
  padding: 48px 0;
  text-align: center;
  background: var(--wf-bg-gray);
  border-top: 3px solid var(--wf-accent);
}

.wf-order-band__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  color: var(--wf-text);
}

.wf-order-band__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: 800px;
  margin: 0 auto;
}

.wf-order-band__tags li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--wf-text);
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: 999px;
  padding: 5px 14px;
}

.wf-order-band__tags-etc {
  background: transparent !important;
  border: none !important;
  color: var(--wf-text-muted) !important;
  align-self: center;
  padding: 5px 4px !important;
}

/* SP対応 */
@media (max-width: 768px) {
  .wf-flow-steps--5 {
    flex-direction: column;
  }

  .wf-feature-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wf-feature-split__text h2 {
    font-size: 22px;
  }

  .wf-type-nav {
    grid-template-columns: 1fr;
  }

  .wf-type-nav__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 14px 18px;
  }

  .wf-type-section__header {
    flex-direction: column;
    gap: 8px;
  }

  .wf-type-section__body--split {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .wf-type-section__num {
    font-size: 28px;
  }

  .wf-type-section__header h2 {
    font-size: 20px;
  }

  .wf-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-closing-message__lead {
    font-size: 15px;
  }

  .wf-order-band {
    padding: 32px 0;
  }

  .wf-order-band__title {
    font-size: 16px;
  }

  .wf-container--narrow > .wf-prose > .wf-prose__lead:not([style]) {
    font-size: 20px;
    line-height: 1.8;
    letter-spacing: 0.03em;
    padding-top: 52px;
  }

  .wf-container--narrow > .wf-prose > .wf-prose__lead:not([style]) ~ p {
    font-size: 15px;
    text-align: left;
  }
}


/* ====================================================================
   施工事例ページ用スタイル
   ==================================================================== */

/* カテゴリフィルター */
.wf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.wf-filter__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}

.wf-filter__item:hover {
  border-color: var(--wf-accent);
  color: var(--wf-accent);
}

.wf-filter__item.is-active {
  background: var(--wf-text);
  color: white;
  border-color: var(--wf-text);
}

.wf-filter__item small {
  font-size: 11px;
  opacity: 0.7;
  font-weight: 500;
}

/* ページネーション */
.wf-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 56px;
}

.wf-pagination__btn,
.wf-pagination__num {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  font-size: 13px;
  font-weight: 600;
  background: var(--wf-bg-section);
  transition: all 0.2s;
}

.wf-pagination__btn:hover:not(.is-disabled),
.wf-pagination__num:hover:not(.is-active) {
  border-color: var(--wf-accent);
  color: var(--wf-accent);
}

.wf-pagination__num.is-active {
  background: var(--wf-accent);
  color: white;
  border-color: var(--wf-accent);
}

.wf-pagination__btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.wf-pagination__ellipsis {
  padding: 0 4px;
  color: var(--wf-text-muted);
}

/* 物件メタテーブル（dl/dt/dd） */
.wf-meta-table {
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  overflow: hidden;
}

.wf-meta-table__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  border-bottom: 1px solid var(--wf-border);
}

.wf-meta-table__row:last-child {
  border-bottom: none;
}

.wf-meta-table__row dt {
  padding: 14px 20px;
  background: var(--wf-bg-gray);
  font-size: 13px;
  font-weight: 700;
  color: var(--wf-text);
}

.wf-meta-table__row dd {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--wf-text-muted);
  line-height: 1.7;
}

/* 関連リンクブロック */
.wf-related-link {
  background: var(--wf-bg-section);
  padding: 40px 48px;
  border-radius: var(--wf-radius);
  text-align: center;
  border: 1px solid var(--wf-border);
}

.wf-related-link__img {
  margin-bottom: 28px;
}

/* 画像＋文章の2列レイアウト（文章左・画像右） */
.wf-related-link--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}

.wf-related-link--split .wf-related-link__body {
  order: 0;
}

.wf-related-link--split .wf-related-link__img {
  order: 1;
  margin-bottom: 0;
}

.wf-related-link h3 {
  font-size: 22px;
  margin: 8px 0 16px;
}

.wf-related-link p {
  font-size: 14px;
  color: var(--wf-text-muted);
  margin-bottom: 24px;
  line-height: 1.8;
}

/* SP対応 */
@media (max-width: 768px) {
  .wf-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    margin: 0 -16px;
    padding: 0 16px 8px;
    justify-content: flex-start;
  }

  .wf-filter__item {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .wf-meta-table__row {
    grid-template-columns: 1fr;
  }

  .wf-meta-table__row dt {
    padding: 10px 16px 6px;
    background: var(--wf-bg-gray);
  }

  .wf-meta-table__row dd {
    padding: 6px 16px 14px;
  }

  .wf-pagination__btn,
  .wf-pagination__num {
    min-width: 36px;
    height: 36px;
    font-size: 12px;
    padding: 0 10px;
  }

  .wf-related-link {
    padding: 28px 24px;
  }

  .wf-related-link--split {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .wf-related-link--split .wf-related-link__img {
    order: -1;
    margin-bottom: 4px;
  }

  .wf-related-link h3 {
    font-size: 18px;
  }
}


/* ====================================================================
   流れページ用スタイル
   ==================================================================== */

/* 6ステップリスト */
.wf-step-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wf-step-item {
  display: grid;
  grid-template-columns: 100px 1fr 320px;
  gap: 32px;
  background: var(--wf-bg-section);
  padding: 32px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  position: relative;
}

.wf-step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 48px;
  bottom: -32px;
  width: 2px;
  height: 32px;
  background: var(--wf-accent);
  opacity: 0.3;
}

.wf-step-item__num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 8px;
}

.wf-step-item__num-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-accent);
}

.wf-step-item__num-value {
  font-size: 48px;
  font-weight: 700;
  color: var(--wf-accent);
  line-height: 1;
  letter-spacing: 0.02em;
}

.wf-step-item__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wf-step-item__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.wf-step-item__head h2 {
  font-size: 24px;
  letter-spacing: 0.02em;
}

.wf-step-item__duration {
  font-size: 12px;
  font-weight: 600;
  color: var(--wf-text-muted);
  background: var(--wf-bg-gray);
  padding: 4px 10px;
  border-radius: 100px;
}

.wf-step-item__desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--wf-text);
}

.wf-step-item__detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--wf-border);
}

.wf-step-item__detail-col h4 {
  font-size: 13px;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.wf-step-item__detail-col ul {
  list-style: none;
}

.wf-step-item__detail-col li {
  font-size: 13px;
  line-height: 1.7;
  color: var(--wf-text-muted);
  padding-left: 16px;
  position: relative;
  margin-bottom: 4px;
}

.wf-step-item__detail-col li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--wf-accent);
}

.wf-step-item__media {
  align-self: start;
}

/* チェックリスト */
.wf-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wf-checklist__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 20px 24px;
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
}

.wf-checklist__check {
  width: 32px;
  height: 32px;
  background: var(--wf-accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.wf-checklist__item h4 {
  font-size: 16px;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.wf-checklist__item p {
  font-size: 13px;
  color: var(--wf-text-muted);
  line-height: 1.7;
}

/* SP対応 */
@media (max-width: 768px) {
  .wf-step-item {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 16px;
  }

  .wf-step-item:not(:last-child)::after {
    left: 50%;
    bottom: -32px;
    transform: translateX(-50%);
  }

  .wf-step-item__num {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }

  .wf-step-item__num-value {
    font-size: 36px;
  }

  .wf-step-item__head h2 {
    font-size: 20px;
  }

  .wf-step-item__detail {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wf-checklist__item {
    grid-template-columns: 36px 1fr;
    padding: 16px;
  }

  .wf-checklist__check {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}


/* ====================================================================
   お問い合わせフォーム用スタイル
   ==================================================================== */

/* 連絡方法カード（電話・フォーム・FAX） */
.wf-contact-method {
  display: block;
  background: var(--wf-bg-section);
  padding: 32px 28px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  text-align: center;
  transition: all 0.2s;
}

.wf-contact-method:hover {
  border-color: var(--wf-accent);
  transform: translateY(-2px);
}

.wf-contact-method.is-primary {
  border-color: var(--wf-accent);
  border-width: 2px;
  background: var(--wf-bg-section);
  position: relative;
}

.wf-contact-method.is-primary::before {
  content: "おすすめ";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wf-accent);
  color: white;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.wf-contact-method__icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
}

.wf-contact-method h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.wf-contact-method__detail {
  font-size: 22px;
  font-weight: 700;
  color: var(--wf-text);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.wf-contact-method__sub {
  font-size: 12px;
  color: var(--wf-text-muted);
  margin-bottom: 16px;
  line-height: 1.7;
}

/* ===================================================================
   フォーム本体
   =================================================================== */

.wf-form {
  max-width: 720px;
  margin: 0 auto;
  background: var(--wf-bg-section);
  padding: 48px;
  border-radius: var(--wf-radius);
  border: 1px solid var(--wf-border);
}

.wf-form__row {
  margin-bottom: 32px;
}

.wf-form__row--consent {
  padding: 24px;
  background: var(--wf-bg-gray);
  border-radius: var(--wf-radius);
}

.wf-form__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.wf-required {
  display: inline-block;
  background: #DC2626;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.wf-optional {
  display: inline-block;
  background: var(--wf-bg-gray);
  color: var(--wf-text-muted);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
}

.wf-required-mark {
  color: #DC2626;
}

/* テキスト入力 */
.wf-form__input,
.wf-form__textarea,
.wf-form__select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  background: var(--wf-bg-section);
  font-size: 14px;
  font-family: inherit;
  color: var(--wf-text);
  transition: border-color 0.2s;
}

.wf-form__input:focus,
.wf-form__textarea:focus,
.wf-form__select:focus {
  outline: none;
  border-color: var(--wf-accent);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.wf-form__textarea {
  resize: vertical;
  line-height: 1.7;
}

.wf-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.wf-form__hint {
  font-size: 12px;
  color: var(--wf-text-muted);
  margin-top: 6px;
  line-height: 1.6;
}

/* ラジオボタン */
.wf-form__radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-form__radio,
.wf-form__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.wf-form__radio:hover,
.wf-form__checkbox:hover {
  border-color: var(--wf-accent);
}

.wf-form__radio input,
.wf-form__checkbox input {
  accent-color: var(--wf-accent);
  width: 18px;
  height: 18px;
}

.wf-form__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-form__checkbox--large {
  background: var(--wf-bg-section);
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 500;
}

.wf-form__checkbox--large span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wf-form__privacy-link {
  color: var(--wf-accent);
  text-decoration: underline;
}

/* ファイル添付 */
.wf-form__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.wf-form__file-label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: var(--wf-bg-gray);
  border: 2px dashed var(--wf-border);
  border-radius: var(--wf-radius);
  cursor: pointer;
  transition: all 0.2s;
}

.wf-form__file-label:hover {
  border-color: var(--wf-accent);
  background: var(--wf-bg-section);
}

.wf-form__file-icon {
  font-size: 28px;
}

.wf-form__file-text {
  font-size: 13px;
  line-height: 1.7;
}

.wf-form__file-text strong {
  color: var(--wf-accent);
  text-decoration: underline;
}

.wf-form__file-text small {
  color: var(--wf-text-muted);
  font-size: 11px;
}

/* Turnstileプレースホルダー */
.wf-placeholder--turnstile {
  aspect-ratio: 7 / 1;
  max-width: 300px;
  font-size: 12px;
}

/* 送信ボタンエリア */
.wf-form__submit {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--wf-border);
  margin-top: 24px;
}

.wf-btn--full {
  width: 100%;
  max-width: 480px;
}

.wf-form__submit-note {
  font-size: 12px;
  color: var(--wf-text-muted);
  margin-top: 16px;
  line-height: 1.7;
}

/* ===================================================================
   送信後の流れ
   =================================================================== */

.wf-after-submit {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 16px;
}

.wf-after-submit__item {
  background: var(--wf-bg-section);
  padding: 28px 24px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  text-align: center;
}

.wf-after-submit__num {
  display: inline-block;
  background: var(--wf-accent);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
}

.wf-after-submit__item h4 {
  font-size: 16px;
  margin-bottom: 8px;
}

.wf-after-submit__item p {
  font-size: 12px;
  color: var(--wf-text-muted);
  line-height: 1.7;
}

.wf-after-submit__arrow {
  display: flex;
  align-items: center;
  color: var(--wf-text-muted);
  font-size: 20px;
}

/* SP対応 */
@media (max-width: 768px) {
  .wf-form {
    padding: 24px 20px;
  }

  .wf-form__row {
    margin-bottom: 24px;
  }

  .wf-after-submit {
    grid-template-columns: 1fr;
  }

  .wf-after-submit__arrow {
    transform: rotate(90deg);
    justify-content: center;
  }

  /* ファイル添付：スマホは縦並び＋余白を詰める */
  .wf-form__file-label {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 18px 16px;
  }

  /* ラジオ／チェックは指で押しやすい高さに */
  .wf-form__radio,
  .wf-form__checkbox {
    min-height: 48px;
    padding: 12px 14px;
  }
}


/* ====================================================================
   会社概要ページ用スタイル
   ==================================================================== */

/* 代表メッセージブロック */
.wf-message-block {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 64px;
  align-items: start;
}

.wf-message-block__eyebrow {
  color: var(--wf-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}

.wf-message-block__text h2 {
  font-size: 32px;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.wf-message-block__text .wf-prose p {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 2;
}

.wf-message-block__signature {
  text-align: right;
  margin-top: 32px;
}

.wf-message-block__signature small {
  display: block;
  font-size: 12px;
  color: var(--wf-text-muted);
  margin-bottom: 4px;
}

.wf-message-block__signature strong {
  font-size: 20px;
  letter-spacing: 0.1em;
}

/* 拠点カード */
.wf-location-card {
  background: var(--wf-bg-section);
  padding: 24px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wf-location-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--wf-accent);
}

/* 拠点のGoogleマップ埋め込み（プレースホルダーと同じ16/10・角丸） */
.wf-location-card__map {
  aspect-ratio: 16 / 10;
  border-radius: var(--wf-radius);
  overflow: hidden;
  background: var(--wf-placeholder);
}
.wf-location-card__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.wf-location-card h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.wf-location-card__info {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 8px 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--wf-border);
}

.wf-location-card__info dt {
  font-size: 11px;
  font-weight: 700;
  color: var(--wf-text-muted);
  padding-top: 2px;
}

.wf-location-card__info dd {
  font-size: 13px;
  color: var(--wf-text);
  line-height: 1.6;
}

.wf-location-card__info small {
  font-size: 11px;
  color: var(--wf-text-muted);
}

/* リストブロック（取引先・仕入れ先） */
.wf-list-block h2 {
  font-size: 24px;
  margin: 8px 0 24px;
  letter-spacing: 0.02em;
}

.wf-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--wf-bg-section);
  padding: 24px;
  border-radius: var(--wf-radius);
  border: 1px solid var(--wf-border);
}

.wf-list li {
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--wf-border);
  line-height: 1.5;
}

.wf-list li:last-child,
.wf-list li:nth-last-child(2) {
  border-bottom: none;
}

/* 納品実績カード */
.wf-grid--5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.wf-record-card {
  background: var(--wf-bg-section);
  padding: 28px 16px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  text-align: center;
}

.wf-record-card__icon {
  font-size: 32px;
  display: block;
  margin-bottom: 12px;
}

.wf-record-card p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--wf-text);
}

/* タイムライン */
.wf-timeline {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.wf-timeline::before {
  content: "";
  position: absolute;
  left: 140px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--wf-border);
}

.wf-timeline__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  position: relative;
  padding: 16px 0;
}

.wf-timeline__item::before {
  content: "";
  position: absolute;
  left: 134px;
  top: 24px;
  width: 14px;
  height: 14px;
  background: var(--wf-bg-section);
  border: 2px solid var(--wf-border);
  border-radius: 50%;
  z-index: 1;
}

.wf-timeline__item.is-highlight::before {
  background: var(--wf-accent);
  border-color: var(--wf-accent);
  width: 16px;
  height: 16px;
  left: 133px;
}

.wf-timeline__date {
  font-size: 13px;
  font-weight: 700;
  color: var(--wf-text-muted);
  letter-spacing: 0.05em;
  padding-top: 4px;
  padding-right: 28px;
  text-align: right;
}

.wf-timeline__item.is-highlight .wf-timeline__date {
  color: var(--wf-accent);
}

.wf-timeline__content {
  padding-left: 24px;
}

.wf-timeline__content p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--wf-text);
}

.wf-timeline__content strong {
  font-weight: 700;
  color: var(--wf-text);
}

.wf-timeline__item.is-highlight .wf-timeline__content {
  background: var(--wf-bg-section);
  padding: 16px 24px;
  border-radius: var(--wf-radius);
  border-left: 3px solid var(--wf-accent);
}

/* SP対応 */
@media (max-width: 768px) {
  .wf-message-block {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .wf-message-block__text h2 {
    font-size: 22px;
  }

  .wf-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-list {
    grid-template-columns: 1fr;
  }

  .wf-list li:not(:last-child) {
    border-bottom: 1px solid var(--wf-border);
  }

  /* タイムライン：SPは左寄せ */
  .wf-timeline::before {
    left: 8px;
  }

  .wf-timeline__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-left: 32px;
  }

  .wf-timeline__item::before {
    left: 2px;
    top: 22px;
  }

  .wf-timeline__item.is-highlight::before {
    left: 1px;
  }

  .wf-timeline__date {
    text-align: left;
    font-size: 11px;
    padding-right: 0;
  }

  .wf-timeline__content {
    padding-left: 0;
  }

  .wf-timeline__content p {
    font-size: 13px;
  }
}


/* ====================================================================
   採用専用サイト用スタイル
   別サイトのように、爽やか・スタイリッシュ・リッチに
   .wf-recruit-page スコープで完全分離
   ==================================================================== */

/* CSS変数を採用ページ用に上書き */
.wf-recruit-page {
  --wf-r-accent: #0EA5E9;        /* sky-500 爽やかブルー */
  --wf-r-accent-dark: #0284C7;   /* sky-600 */
  --wf-r-accent-light: #E0F2FE;  /* sky-100 */
  --wf-r-text: #0F172A;          /* slate-900 */
  --wf-r-text-muted: #64748B;    /* slate-500 */
  --wf-r-bg: #FFFFFF;
  --wf-r-bg-gray: #F8FAFC;       /* slate-50 */
  --wf-r-border: #E2E8F0;        /* slate-200 */
  --wf-r-dark: #0F172A;
  --wf-r-radius: 12px;
  --wf-r-radius-lg: 20px;

  /* メインビジュアルのオレンジ：CTAボタン・アイコン・ロゴ等のアクセントに点在使用 */
  --wf-r-orange: #E78A2D;
  --wf-r-orange-dark: #C26C1B;
  --wf-r-orange-light: #FCEBD7;

  background: var(--wf-r-bg);
  color: var(--wf-r-text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  letter-spacing: 0.01em;
  /* ヘッダーはsticky（フロー内）なので固定ヘッダー用の body padding-top:64px は不要（バナー上の余白対策） */
  padding-top: 0;
}

/* ============================== Header ============================== */

.wf-r-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wf-r-border);
}

.wf-r-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.wf-r-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.wf-r-header__logo-mark {
  display: flex;
  align-items: center;
}

.wf-r-header__logo-mark img {
  height: 30px;
  width: auto;
  display: block;
}

.wf-r-header__logo-text {
  display: flex;
  flex-direction: column;
}

.wf-r-header__logo-text small {
  font-size: 11px;
  color: var(--wf-r-text-muted);
  letter-spacing: 0.05em;
}

.wf-r-header__logo-text strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--wf-r-orange);
}

.wf-r-header__nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.wf-r-header__nav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--wf-r-text);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}

.wf-r-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--wf-r-accent);
  transition: width 0.3s;
}

.wf-r-header__nav a:hover::after {
  width: 100%;
}

.wf-r-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wf-r-header__corp-link {
  font-size: 11px;
  color: var(--wf-r-text-muted);
  text-decoration: none;
  letter-spacing: 0.05em;
}

.wf-r-header__corp-link:hover {
  color: var(--wf-r-accent);
}

.wf-r-header__hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--wf-r-text);
}

/* ============================== Buttons ============================== */

.wf-r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  font-family: inherit;
}

.wf-r-btn--primary {
  background: var(--wf-r-orange);
  color: white;
}

.wf-r-btn--primary:hover {
  background: var(--wf-r-orange-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(231, 138, 45, 0.3);
}

.wf-r-btn--outline {
  background: transparent;
  color: var(--wf-r-orange);
  border: 1.5px solid var(--wf-r-orange);
}

.wf-r-btn--outline:hover {
  background: var(--wf-r-orange);
  color: white;
}

.wf-r-btn--on-dark {
  color: white;
  border-color: rgba(255,255,255,0.5);
}

.wf-r-btn--on-dark:hover {
  background: white;
  color: var(--wf-r-dark);
  border-color: white;
}

.wf-r-btn--large {
  padding: 16px 36px;
  font-size: 14px;
}

.wf-r-btn--full {
  width: 100%;
  max-width: 480px;
}

/* ============================== Containers ============================== */

.wf-r-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.wf-r-container--narrow {
  max-width: 880px;
}

.wf-r-section {
  padding: 120px 0;
}

.wf-r-section--gray {
  /* 白との差をはっきりさせ、縦グラデで奥行きを出す（のっぺり対策） */
  background: linear-gradient(180deg, #EDF2F9 0%, #DFE7F2 100%);
}

/* 募集要項テーブルもグレー地から浮かせて層を作る */
.wf-recruit-page .wf-spec-table {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
}

.wf-r-section__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--wf-r-accent);
  margin-bottom: 24px;
}

.wf-r-section__title {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-bottom: 24px;
}

.wf-r-section__lead {
  font-size: 16px;
  line-height: 2;
  color: var(--wf-r-text-muted);
  margin-bottom: 16px;
}

.wf-r-section-header {
  text-align: center;
  margin-bottom: 72px;
}

/* ============================== HERO ============================== */

.wf-r-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.wf-r-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wf-r-hero__media .wf-placeholder {
  height: 100%;
  border: none;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #475569;
  font-size: 12px;
}

.wf-r-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15,23,42,0.3) 0%, rgba(15,23,42,0.6) 100%);
}

.wf-r-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  color: white;
}

.wf-r-hero__eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--wf-r-accent);
  margin-bottom: 32px;
}

.wf-r-hero__title {
  font-size: 80px;
  line-height: 1.3;
  margin-bottom: 40px;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.wf-r-hero__title-line {
  display: block;
}

.wf-r-hero__title-line--accent {
  color: var(--wf-r-accent);
}

.wf-r-hero__lead {
  font-size: 18px;
  line-height: 2;
  margin-bottom: 48px;
  opacity: 0.9;
  max-width: 480px;
}

.wf-r-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.wf-r-hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: white;
  text-align: center;
}

.wf-r-hero__scroll span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  display: block;
  margin-bottom: 8px;
  opacity: 0.6;
}

.wf-r-hero__scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.4);
  margin: 0 auto;
  position: relative;
}

.wf-r-hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--wf-r-accent);
  animation: scrollHint 2s ease-in-out infinite;
}

@keyframes scrollHint {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}

/* ============================== MESSAGE ============================== */

.wf-r-section--message {
  padding: 160px 0;
  /* 濃色（ドラマ）セクション：MV直下の宣言文を濃紺背景で劇的に。暗→明の導入アーク */
  background: linear-gradient(180deg, #0F172A 0%, #131C2E 100%);
  color: #EAF0F7;
}

/* MESSAGE（濃紺）内のテキスト＝明色／ハイライトはMVのオレンジで連動 */
.wf-r-section--message .wf-r-section__eyebrow {
  color: var(--wf-r-orange);
}

.wf-r-section--message .wf-r-message__quote {
  color: #F4F7FB;
}

.wf-r-section--message .wf-r-message__highlight {
  color: var(--wf-r-orange);
}

.wf-r-section--message .wf-r-message__body p {
  color: #AEB8C6;
}

.wf-r-section--message .wf-r-message__body strong {
  color: #FFFFFF;
}

.wf-r-message {
  max-width: 900px;
  margin: 0 auto;
}

.wf-r-message__quote {
  font-size: 48px;
  line-height: 1.6;
  font-weight: 700;
  margin-bottom: 64px;
  letter-spacing: 0.02em;
}

.wf-r-message__highlight {
  color: var(--wf-r-accent);
  position: relative;
  display: inline-block;
}

.wf-r-message__body {
  max-width: 640px;
  margin: 0 auto;
}

.wf-r-message__body p {
  font-size: 16px;
  line-height: 2.2;
  margin-bottom: 20px;
  color: var(--wf-r-text-muted);
}

.wf-r-message__body strong {
  color: var(--wf-r-text);
  font-weight: 700;
}

/* ============================== NUMBERS ============================== */

.wf-r-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 80px;
}

.wf-r-number {
  text-align: center;
}

.wf-r-number__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-r-text-muted);
  margin-bottom: 8px;
}

.wf-r-number__value {
  display: block;
  font-size: 96px;
  font-weight: 700;
  color: var(--wf-r-accent);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  font-family: -apple-system, "Helvetica Neue", sans-serif;
}

.wf-r-number__value small {
  font-size: 28px;
  margin-left: 4px;
  color: var(--wf-r-text);
}

.wf-r-number__desc {
  font-size: 13px;
  color: var(--wf-r-text-muted);
  line-height: 1.8;
  max-width: 220px;
  margin: 0 auto;
}

.wf-r-photo-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 200px);
  gap: 16px;
}

.wf-r-photo-grid .wf-placeholder {
  margin: 0;
  height: 100%;
  border-radius: var(--wf-r-radius);
}

.wf-r-photo-grid__a { grid-column: 1; grid-row: 1 / 3; }
.wf-r-photo-grid__b { grid-column: 2; grid-row: 1; }
.wf-r-photo-grid__c { grid-column: 3; grid-row: 1; }
.wf-r-photo-grid__d { grid-column: 2 / 4; grid-row: 2; }

/* ============================== JOBS ============================== */

/* 募集職種クイックナビ（各職種へジャンプ）。PCでは非表示、SPのみ表示 */
.wf-r-jobnav {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 28px auto 8px;
}
.wf-r-jobnav a {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--wf-r-border);
  border-radius: 999px;
  background: var(--wf-r-bg);
  color: var(--wf-r-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color .2s var(--wf-ease), background .2s var(--wf-ease), color .2s var(--wf-ease);
}
.wf-r-jobnav a:hover {
  border-color: var(--wf-r-accent);
  background: var(--wf-r-accent-light);
  color: var(--wf-r-accent-dark);
}
.wf-r-job { scroll-margin-top: 90px; }

.wf-r-jobs {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-bottom: 32px;
}

.wf-r-job {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.wf-r-job--reverse {
  direction: rtl;
}

.wf-r-job--reverse > * {
  direction: ltr;
}

.wf-r-job__media .wf-placeholder {
  margin: 0;
  border-radius: var(--wf-r-radius-lg);
  aspect-ratio: 4/3;
  border: none;
}

.wf-r-job__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wf-r-job__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--wf-r-accent);
}

.wf-r-job__body h3 {
  font-size: 36px;
  letter-spacing: 0.02em;
  font-weight: 700;
  line-height: 1.4;
}

.wf-r-job__desc {
  font-size: 15px;
  line-height: 2;
  color: var(--wf-r-text-muted);
}

.wf-r-job__points {
  list-style: none;
  padding: 24px 28px;
  background: var(--wf-r-accent-light);
  border-radius: var(--wf-r-radius);
}

.wf-r-job__points li {
  font-size: 14px;
  line-height: 1.8;
  color: var(--wf-r-text);
  padding-left: 22px;
  position: relative;
  font-weight: 500;
}

.wf-r-job__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--wf-r-accent-dark);
  font-weight: 900;
}

.wf-r-job .wf-r-btn {
  align-self: flex-start;
  margin-top: 8px;
}

.wf-r-jobs__note {
  text-align: center;
  color: var(--wf-r-text-muted);
  font-size: 12px;
  line-height: 1.8;
}

/* ============================== PEOPLE ============================== */

.wf-r-people {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.wf-r-person {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

.wf-r-person:hover {
  transform: translateY(-8px);
}

.wf-r-person__media {
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: var(--wf-r-radius-lg);
}

.wf-r-person__media .wf-placeholder {
  margin: 0;
  border: none;
  border-radius: 0;
  aspect-ratio: 3/4;
}

.wf-r-person__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-r-person__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-r-accent);
}

.wf-r-person__body h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.wf-r-person__quote {
  font-size: 18px;
  line-height: 1.8;
  color: var(--wf-r-text);
  font-weight: 500;
  margin: 16px 0;
  letter-spacing: 0.02em;
}

.wf-r-person__more {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--wf-r-accent);
}

/* ============================== WANT ============================== */

.wf-r-want-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.wf-r-want {
  padding: 16px 0;
  border-top: 2px solid var(--wf-r-accent);
}

.wf-r-want__num {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-r-accent);
  margin-bottom: 16px;
  font-family: -apple-system, "Helvetica Neue", sans-serif;
}

.wf-r-want h4 {
  font-size: 22px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  font-weight: 700;
  line-height: 1.4;
}

.wf-r-want p {
  font-size: 14px;
  line-height: 2;
  color: var(--wf-r-text-muted);
}

/* ============================== ENVIRONMENT ============================== */

.wf-r-env-grid {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-bottom: 120px;
}

.wf-r-env-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.wf-r-env-feature--reverse {
  direction: rtl;
}

.wf-r-env-feature--reverse > * {
  direction: ltr;
}

.wf-r-env-feature__media .wf-placeholder {
  margin: 0;
  border-radius: var(--wf-r-radius-lg);
  aspect-ratio: 4/3;
  border: none;
}

.wf-r-env-feature__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wf-r-env-feature__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--wf-r-accent);
}

.wf-r-env-feature__body h3 {
  font-size: 30px;
  letter-spacing: 0.02em;
  font-weight: 700;
  line-height: 1.4;
}

.wf-r-env-feature__body p {
  font-size: 15px;
  line-height: 2;
  color: var(--wf-r-text-muted);
}

.wf-r-benefits {
  background: white;
  padding: 64px 56px;
  border-radius: var(--wf-r-radius-lg);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03), 0 18px 44px rgba(15, 23, 42, 0.10);
}

.wf-r-benefits__title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 48px;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.wf-r-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.wf-r-benefit {
  text-align: center;
}

.wf-r-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--wf-r-orange-light);
  color: var(--wf-r-orange);
  border-radius: 50%;
  font-size: 24px;
  margin-bottom: 12px;
}

.wf-r-benefit h5 {
  font-size: 14px;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.wf-r-benefit p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--wf-r-text-muted);
}

.wf-r-benefits__note {
  text-align: center;
  margin-top: 40px;
  color: var(--wf-r-text-muted);
}

/* ============================== FLOW ============================== */

.wf-r-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}

.wf-r-flow::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--wf-r-accent);
  opacity: 0.3;
  z-index: 0;
}

.wf-r-flow-step {
  background: white;
  padding: 32px 24px;
  border-radius: var(--wf-r-radius);
  text-align: center;
  position: relative;
  z-index: 1;
  border: 1px solid var(--wf-r-border);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.wf-r-flow-step__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.wf-r-flow-step__num {
  width: 56px;
  height: 56px;
  background: var(--wf-r-accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: -apple-system, "Helvetica Neue", sans-serif;
}

.wf-r-flow-step h4 {
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.wf-r-flow-step p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--wf-r-text-muted);
}

/* ============================== CTA ============================== */

.wf-r-cta {
  background: linear-gradient(135deg, #0F172A 0%, #1E40AF 100%);
  padding: 160px 40px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.wf-r-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 80%;
  height: 200%;
  background: radial-gradient(circle, rgba(14,165,233,0.15) 0%, transparent 70%);
  z-index: 0;
}

.wf-r-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}

.wf-r-cta__eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--wf-r-accent);
  margin-bottom: 32px;
}

.wf-r-cta__title {
  font-size: 64px;
  line-height: 1.4;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.wf-r-cta__lead {
  font-size: 16px;
  line-height: 2;
  opacity: 0.85;
  margin-bottom: 48px;
}

.wf-r-cta__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================== FORM ============================== */

.wf-r-form {
  background: white;
  padding: 56px;
  border-radius: var(--wf-r-radius-lg);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03), 0 18px 44px rgba(15, 23, 42, 0.10);
}

.wf-r-form .wf-form__label,
.wf-r-form .wf-form__input,
.wf-r-form .wf-form__textarea,
.wf-r-form .wf-form__select {
  font-family: inherit;
}

.wf-r-form .wf-form__input:focus,
.wf-r-form .wf-form__textarea:focus,
.wf-r-form .wf-form__select:focus {
  border-color: var(--wf-r-accent);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.wf-r-form .wf-form__radio:hover,
.wf-r-form .wf-form__checkbox:hover {
  border-color: var(--wf-r-accent);
}

.wf-r-tel-note {
  text-align: center;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--wf-r-border);
}

.wf-r-tel-note p {
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--wf-r-text);
}

.wf-r-tel-note a {
  color: var(--wf-r-accent);
  font-weight: 700;
  text-decoration: none;
}

.wf-r-tel-note small {
  color: var(--wf-r-text-muted);
}

/* ============================== FOOTER ============================== */

.wf-r-footer {
  background: var(--wf-r-dark);
  color: white;
  padding: 80px 0 24px;
}

.wf-r-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px 64px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
}

.wf-r-footer__logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
}

.wf-r-footer__logo img {
  height: 34px;
  width: auto;
  display: block;
}

.wf-r-footer__name {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.wf-r-footer__tagline {
  font-size: 13px;
  opacity: 0.7;
  letter-spacing: 0.02em;
  line-height: 1.7;
}

.wf-r-footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.wf-r-footer__col h5 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  margin-bottom: 16px;
  color: var(--wf-r-accent);
}

.wf-r-footer__col ul {
  list-style: none;
}

.wf-r-footer__col li {
  font-size: 13px;
  margin-bottom: 8px;
  opacity: 0.8;
  line-height: 1.8;
}

.wf-r-footer__col a {
  color: white;
  text-decoration: none;
  transition: opacity 0.2s;
}

.wf-r-footer__col a:hover {
  opacity: 1;
  color: var(--wf-r-accent);
}

.wf-r-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px 40px 0;
  text-align: center;
  font-size: 11px;
  opacity: 0.5;
  letter-spacing: 0.05em;
  max-width: 1280px;
  margin: 0 auto;
}

/* ============================== Fixed CTA ============================== */

.wf-r-fixed-cta {
  position: fixed;
  right: 24px;
  bottom: 80px;
  width: 88px;
  height: 88px;
  background: var(--wf-r-orange);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-decoration: none;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(231, 138, 45, 0.4);
  transition: all 0.2s;
}

.wf-r-fixed-cta:hover {
  transform: scale(1.05);
  background: var(--wf-r-orange-dark);
}

/* SP固定フッターのエントリーボタンもオレンジに統一（採用ページのみ） */
.wf-recruit-page .wf-mobile-footer__btn--form {
  background: var(--wf-r-orange);
}

/* ============================== SP対応 ============================== */

@media (max-width: 1024px) {
  .wf-r-header__nav {
    display: none;
  }

  .wf-r-header__hamburger {
    display: block;
  }

  /* navが消えるぶん、右側グループ（エントリー等）を右端へ寄せる */
  .wf-r-header__right {
    margin-left: auto;
  }

  /* ハンバーガー開時：採用ヘッダー直下にドロップダウン表示 */
  .wf-r-header.is-menu-open {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  }
  .wf-r-header.is-menu-open .wf-r-header__inner {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    gap: 16px;
    padding-bottom: 16px;
  }
  .wf-r-header.is-menu-open .wf-r-header__nav,
  .wf-r-header.is-menu-open .wf-r-header__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 100%;
    margin-left: 0;
    gap: 0;
  }
  .wf-r-header.is-menu-open .wf-r-header__nav {
    order: 2;
    border-top: 1px solid var(--wf-r-border);
    padding-top: 4px;
  }
  .wf-r-header.is-menu-open .wf-r-header__nav a {
    padding: 15px 2px;
    font-size: 15px;
    border-bottom: 1px solid var(--wf-r-border);
  }
  .wf-r-header.is-menu-open .wf-r-header__right {
    order: 3;
    gap: 12px;
    padding-top: 14px;
  }
  .wf-r-header.is-menu-open .wf-r-header__corp-link {
    display: block;
    padding: 4px 0;
  }
  .wf-r-header.is-menu-open .wf-r-header__right .wf-r-btn {
    width: 100%;
  }

  .wf-r-hero__title {
    font-size: 56px;
  }

  .wf-r-section__title {
    font-size: 32px;
  }

  .wf-r-message__quote {
    font-size: 32px;
  }

  .wf-r-cta__title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .wf-r-section {
    padding: 80px 0;
  }

  .wf-r-section--message {
    padding: 100px 0;
  }

  .wf-r-container {
    padding: 0 20px;
  }

  .wf-r-header__inner {
    padding: 12px 16px;
    gap: 12px;
  }

  .wf-r-header__corp-link {
    display: none;
  }

  /* スマホではヘッダーバーをロゴ＋ハンバーガーのみに（エントリーは固定フッター＆メニュー内に在るため）。
     狭幅でエントリーボタンが折り返す問題を回避 */
  .wf-r-header__right {
    display: none;
  }
  .wf-r-header__hamburger {
    margin-left: auto;
  }
  /* メニューを開いたときは右側グループ（エントリー等）をドロップダウン内に表示 */
  .wf-r-header.is-menu-open .wf-r-header__right {
    display: flex;
  }

  .wf-r-hero__title {
    font-size: 40px;
  }

  .wf-r-hero__lead {
    font-size: 14px;
  }

  .wf-r-hero__actions {
    flex-direction: column;
  }

  .wf-r-section__title {
    font-size: 28px;
  }

  .wf-r-message__quote {
    font-size: 24px;
    margin-bottom: 36px;
  }

  .wf-r-numbers {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .wf-r-number__value {
    font-size: 52px;
  }

  .wf-r-photo-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px;
  }

  .wf-r-photo-grid__a { grid-column: 1 / 3; grid-row: 1; }
  .wf-r-photo-grid__b { grid-column: 1; grid-row: 2; }
  .wf-r-photo-grid__c { grid-column: 2; grid-row: 2; }
  .wf-r-photo-grid__d { display: none; }

  .wf-r-job,
  .wf-r-job--reverse,
  .wf-r-env-feature,
  .wf-r-env-feature--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 24px;
  }

  .wf-r-job__body h3 {
    font-size: 26px;
  }

  .wf-r-people {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .wf-r-want-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .wf-r-benefits {
    padding: 32px 20px;
  }

  .wf-r-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .wf-r-env-feature__body h3 {
    font-size: 22px;
  }

  /* 職種クイックナビはSPのみ表示 */
  .wf-r-jobnav { display: flex; }

  /* 働く環境：SPはカード化して横スクロール */
  .wf-r-env-grid {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0;
    padding-bottom: 14px;
  }
  .wf-r-env-grid > .wf-r-env-feature {
    display: block;
    flex: 0 0 80%;
    max-width: 300px;
    gap: 0;
    scroll-snap-align: start;
    background: var(--wf-r-bg);
    border: 1px solid var(--wf-r-border);
    border-radius: var(--wf-r-radius);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  }
  .wf-r-env-grid .wf-r-env-feature__media .wf-img { border-radius: 0; }
  .wf-r-env-grid .wf-r-env-feature__body { padding: 18px 18px 20px; gap: 8px; }
  .wf-r-env-grid::-webkit-scrollbar { height: 4px; }
  .wf-r-env-grid::-webkit-scrollbar-thumb { background: rgba(15,20,25,.2); border-radius: 4px; }

  /* 選考の流れ：SPはステップカードを横スクロール */
  .wf-r-flow {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
  }
  .wf-r-flow > .wf-r-flow-step {
    flex: 0 0 62%;
    max-width: 230px;
    scroll-snap-align: start;
  }
  .wf-r-flow::before { display: none; }
  .wf-r-flow::-webkit-scrollbar { height: 4px; }
  .wf-r-flow::-webkit-scrollbar-thumb { background: rgba(15,20,25,.2); border-radius: 4px; }

  .wf-r-cta {
    padding: 80px 20px;
  }

  .wf-r-cta__title {
    font-size: 28px;
  }

  .wf-r-cta__actions {
    flex-direction: column;
  }

  .wf-r-form {
    padding: 24px 20px;
  }

  .wf-r-footer__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 40px;
  }

  .wf-r-footer__links {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .wf-r-fixed-cta {
    display: none;
  }
}


/* ====================================================================
   自社製品ページ用スタイル
   ==================================================================== */

/* 大きめ製品カード（一覧用） */
.wf-product-card--large {
  border-radius: var(--wf-radius);
  overflow: hidden;
  transition: all 0.2s;
}

.wf-product-card--large:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.wf-product-card--large .wf-placeholder {
  margin: 0;
  border-radius: 0;
  border: none;
  aspect-ratio: 16/10;
}

.wf-product-card--large .wf-product-card__body {
  padding: 28px 32px;
  position: relative;
}

.wf-product-card--large h3 {
  font-size: 24px;
  margin: 12px 0 12px;
  letter-spacing: 0.02em;
}

.wf-product-card--large p {
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 16px;
}

/* 認証バッジ（製品カード上の） */
.wf-product-card .wf-product-card__badge {
  display: inline-block;
  background: var(--wf-accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* 外部リンクカード（関連事業） */
.wf-external-card {
  display: block;
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  overflow: hidden;
  transition: all 0.2s;
}

.wf-external-card:hover {
  border-color: var(--wf-accent);
  transform: translateY(-2px);
}

.wf-external-card .wf-placeholder {
  margin: 0;
  border: none;
  border-radius: 0;
  aspect-ratio: 16/10;
}

.wf-external-card__body {
  padding: 24px;
}

.wf-external-card__type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--wf-accent);
  margin-bottom: 8px;
}

.wf-external-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.wf-external-card p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--wf-text-muted);
  margin-bottom: 12px;
}

/* スペック付き写真（塔婆立て用） */
.wf-spec-figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-spec-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.wf-spec-figure figcaption strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--wf-text);
}

.wf-spec-figure figcaption small {
  font-size: 11px;
  color: var(--wf-text-muted);
  line-height: 1.6;
}

/* 製品写真に焼き込まれた細い黒枠を全画像で均一にトリミングし、
   セクション背景（白／グレー）に依存しない統一表示にする。
   画像のみをクリップ用ラッパーで囲い、角丸を左右上下そろえる */
.wf-spec-figure__media {
  overflow: hidden;
  border-radius: var(--wf-radius);
  line-height: 0;
}
.wf-spec-figure__media .wf-img {
  border-radius: 0;
  transform: scale(1.04);
  cursor: zoom-in;
}

/* 注文ブロック（塔婆立て用） */
.wf-order-block {
  background: var(--wf-bg-section);
  padding: 32px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wf-order-block__step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-accent);
}

.wf-order-block h3 {
  font-size: 22px;
  margin: 0;
  letter-spacing: 0.02em;
}

.wf-order-block__alert {
  background: #FEF3C7;
  border-left: 3px solid #F59E0B;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #92400E;
  border-radius: 4px;
  line-height: 1.7;
}

.wf-order-block p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--wf-text);
}

.wf-order-block__tel {
  background: var(--wf-bg-gray);
  padding: 16px 20px;
  border-radius: var(--wf-radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.wf-order-block__tel .wf-tel-block__number {
  font-size: 26px;
  font-weight: 700;
  color: var(--wf-text);
}

.wf-order-block__notes {
  padding-top: 16px;
  border-top: 1px solid var(--wf-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-order-block__notes p {
  font-size: 12px;
  color: var(--wf-text-muted);
  line-height: 1.7;
}

/* aimaバナー（メタルアート用） */
.wf-aima-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--wf-bg-section);
  border: 2px solid var(--wf-accent);
  border-radius: var(--wf-radius);
  overflow: hidden;
  transition: all 0.2s;
}

.wf-aima-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.15);
}

.wf-aima-banner .wf-placeholder {
  margin: 0;
  border: none;
  border-radius: 0;
  height: 100%;
  min-height: 200px;
}

.wf-aima-banner__text {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.wf-aima-banner__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-accent);
}

.wf-aima-banner h2 {
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.wf-aima-banner p {
  font-size: 13px;
  color: var(--wf-text-muted);
  line-height: 1.8;
}

/* 特徴カード（ジョイント手摺用） */
.wf-feature-card {
  background: var(--wf-bg-section);
  padding: 32px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.wf-feature-card__num {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 32px;
  font-weight: 700;
  color: var(--wf-accent);
  opacity: 0.2;
  font-family: -apple-system, "Helvetica Neue", sans-serif;
  letter-spacing: 0.05em;
}

.wf-feature-card .wf-placeholder {
  margin: 0;
}

.wf-feature-card h4 {
  font-size: 17px;
  letter-spacing: 0.02em;
  margin: 0;
}

.wf-feature-card p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--wf-text-muted);
}

/* パーツカード（ジョイント手摺用） */
.wf-part-card {
  background: var(--wf-bg-section);
  padding: 24px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wf-part-card .wf-placeholder {
  margin: 0;
}

.wf-part-card__code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--wf-accent);
  font-family: -apple-system, "Helvetica Neue", monospace;
}

.wf-part-card h4 {
  font-size: 17px;
  letter-spacing: 0.02em;
  margin: 0;
}

.wf-part-card h4 small {
  font-size: 12px;
  font-weight: 600;
  color: var(--wf-text-muted);
}

.wf-part-card p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--wf-text-muted);
}

.wf-spec-section-title {
  font-size: 18px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  font-weight: 700;
}

/* 型材別の切断範囲：画像付きカード（2026-06-08） */
.wf-cut-card {
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  overflow: hidden;
}
.wf-cut-card .wf-img { border-radius: 0; }
.wf-cut-card__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 16px 20px 8px;
  padding-left: 12px;
  border-left: 4px solid var(--wf-accent);
}
.wf-cut-card__spec {
  margin: 0 20px 18px;
  font-size: 14px;
  color: var(--wf-text-muted);
}
.wf-cut-card__spec strong {
  font-size: 16px;
  color: var(--wf-text);
}

/* 認証バッジブロック */
.wf-cert-block {
  text-align: center;
}

.wf-cert-block h3 {
  font-size: 22px;
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

.wf-cert-badges {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.wf-cert-badge {
  background: white;
  border: 2px solid var(--wf-accent);
  padding: 16px 28px;
  border-radius: var(--wf-radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.wf-cert-badge__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-accent);
}

.wf-cert-badge strong {
  font-size: 16px;
  letter-spacing: 0.02em;
}

.wf-cert-block > p {
  font-size: 14px;
  color: var(--wf-text-muted);
}

/* 開発中ステータスバッジ（ライフフロート用） */
.wf-status-badge {
  background: linear-gradient(135deg, #FEF3C7 0%, #FED7AA 100%);
  border-left: 4px solid #F59E0B;
  padding: 32px;
  border-radius: var(--wf-radius);
}

.wf-status-badge__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #92400E;
  margin-bottom: 12px;
}

.wf-status-badge h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: #78350F;
  letter-spacing: 0.02em;
}

.wf-status-badge p {
  font-size: 14px;
  line-height: 1.9;
  color: #78350F;
}

/* 比較表 */
.wf-comparison-table-wrap {
  overflow-x: auto;
}

.wf-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--wf-radius);
  overflow: hidden;
  min-width: 600px;
}

.wf-comparison-table thead th {
  background: var(--wf-text);
  color: white;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.wf-comparison-table thead th:first-child {
  background: var(--wf-text);
}

.wf-comparison-table thead th.is-highlight {
  background: var(--wf-accent);
}

.wf-comparison-table thead th small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 4px;
}

.wf-comparison-table tbody th {
  background: var(--wf-bg-gray);
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border-bottom: 1px solid var(--wf-border);
  border-right: 1px solid var(--wf-border);
  width: 120px;
}

.wf-comparison-table tbody td {
  padding: 20px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--wf-text-muted);
  border-bottom: 1px solid var(--wf-border);
  border-right: 1px solid var(--wf-border);
  vertical-align: top;
}

.wf-comparison-table tbody td:last-child {
  border-right: none;
}

.wf-comparison-table tbody td.is-highlight {
  background: rgba(30, 64, 175, 0.04);
  color: var(--wf-text);
  font-weight: 500;
}

.wf-comparison-table tbody td.is-highlight strong {
  color: var(--wf-accent);
  font-weight: 700;
}

/* メディア掲載ブロック */
.wf-media-feature {
  text-align: center;
  background: var(--wf-bg-section);
  padding: 48px 40px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
}

.wf-media-feature h3 {
  font-size: 22px;
  margin: 8px 0 16px;
  letter-spacing: 0.02em;
}

.wf-media-feature p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--wf-text-muted);
  margin-bottom: 24px;
}

/* SP対応 */
@media (max-width: 768px) {
  .wf-aima-banner {
    grid-template-columns: 1fr;
  }

  .wf-aima-banner h2 {
    font-size: 18px;
  }

  .wf-order-block {
    padding: 24px;
  }

  .wf-cert-badges {
    flex-direction: column;
    gap: 12px;
  }

  .wf-comparison-table tbody th {
    width: 90px;
    font-size: 12px;
    padding: 12px;
  }

  .wf-comparison-table tbody td {
    font-size: 12px;
    padding: 14px;
  }

  .wf-media-feature {
    padding: 32px 24px;
  }

  .wf-status-badge {
    padding: 24px;
  }
}


/* ====================================================================
   品質・設備ページ用スタイル
   ==================================================================== */

/* prose small */
.wf-prose__small {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  color: var(--wf-text-muted) !important;
  margin-bottom: 12px !important;
}

/* コールアウト */
.wf-callout {
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  padding: 40px 48px;
  text-align: center;
}

.wf-callout__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-accent);
  margin-bottom: 12px;
}

.wf-callout h3 {
  font-size: 24px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.wf-callout p {
  font-size: 14px;
  line-height: 2;
  color: var(--wf-text-muted);
  margin-bottom: 8px;
}

.wf-callout--accent {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border-color: var(--wf-accent);
}

.wf-callout--accent h3 {
  color: var(--wf-text);
}

.wf-callout--accent .wf-btn {
  margin-top: 16px;
}

/* スキルカード（加工例） */
.wf-skill-card {
  background: var(--wf-bg-section);
  padding: 24px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wf-skill-card .wf-placeholder {
  margin: 0;
}

.wf-skill-card__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-accent);
}

.wf-skill-card h4 {
  font-size: 17px;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.wf-skill-card__lead {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wf-text) !important;
  line-height: 1.7 !important;
}

.wf-skill-card p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--wf-text-muted);
}

/* スキルカードのアコーディオン（lead クリックで説明を開閉） */
.wf-skill-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.wf-skill-card__toggle .wf-skill-card__lead {
  flex: 1 1 auto;
}

.wf-skill-card__toggle:hover .wf-skill-card__lead {
  color: var(--wf-accent) !important;
}

.wf-skill-card__toggle-icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid var(--wf-border);
  border-radius: 50%;
  transition: transform 0.3s ease, border-color 0.2s ease;
}

.wf-skill-card__toggle-icon::before,
.wf-skill-card__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--wf-text);
  transform: translate(-50%, -50%);
  transition: background 0.2s ease;
}

.wf-skill-card__toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.wf-skill-card__toggle:hover .wf-skill-card__toggle-icon {
  border-color: var(--wf-accent);
}

:is(.wf-skill-card, .wf-equipment-card).is-open .wf-skill-card__toggle-icon {
  transform: rotate(135deg);
  border-color: var(--wf-accent);
}

:is(.wf-skill-card, .wf-equipment-card).is-open .wf-skill-card__toggle-icon::before,
:is(.wf-skill-card, .wf-equipment-card).is-open .wf-skill-card__toggle-icon::after {
  background: var(--wf-accent);
}

.wf-skill-card__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.wf-skill-card__detail > * {
  overflow: hidden;
  min-height: 0;
  margin: 0;
}

:is(.wf-skill-card, .wf-equipment-card).is-open .wf-skill-card__detail {
  grid-template-rows: 1fr;
}

.wf-equipment-card__detail-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 「設備詳細」トグル＝クリックできると一目で分かるボタンに */
.wf-equipment-card .wf-skill-card__toggle {
  background: rgba(30, 64, 175, 0.05);
  border: 1px solid rgba(30, 64, 175, 0.28);
  border-radius: 10px;
  padding: 13px 18px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.wf-equipment-card .wf-skill-card__toggle .wf-skill-card__lead {
  color: var(--wf-accent) !important;
  font-weight: 700 !important;
}

.wf-equipment-card .wf-skill-card__toggle-icon {
  border-color: var(--wf-accent);
}

.wf-equipment-card .wf-skill-card__toggle-icon::before,
.wf-equipment-card .wf-skill-card__toggle-icon::after {
  background: var(--wf-accent);
}

.wf-equipment-card .wf-skill-card__toggle:hover {
  background: rgba(30, 64, 175, 0.1);
  border-color: var(--wf-accent);
}

.wf-equipment-card.is-open .wf-skill-card__toggle {
  border-color: var(--wf-accent);
  background: rgba(30, 64, 175, 0.08);
}

/* ===================================================================
   画像スライダー＋ライトボックス（2026-06-08）
   =================================================================== */
.wf-slider {
  position: relative;
}
.wf-slider__viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--wf-radius);
  background: #0f1419;
}
.wf-slider__track {
  display: flex;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wf-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  display: block;
  margin: 0;
  border-radius: 0;
  cursor: zoom-in;
}
/* 下部サムネイルナビ（現在表示中の画像が分かる） */
.wf-slider__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.wf-slider__arrow {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--wf-border);
  border-radius: 50%;
  background: #fff;
  color: var(--wf-text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.wf-slider__arrow:hover { border-color: var(--wf-accent); color: var(--wf-accent); }
.wf-slider__thumbs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.wf-slider__thumbs::-webkit-scrollbar { display: none; }
.wf-slider__thumb {
  flex: 0 0 auto;
  width: 58px;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #0f1419;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, border-color 0.15s;
}
.wf-slider__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-slider__thumb:hover { opacity: 0.85; }
.wf-slider__thumb.is-active { opacity: 1; border-color: #c2a35a; }

.wf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 15, 0.92);
}
.wf-lightbox.is-open { display: flex; }
.wf-lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.wf-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.wf-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.wf-lightbox__arrow--prev { left: 16px; }
.wf-lightbox__arrow--next { right: 16px; }
.wf-lightbox__close:hover,
.wf-lightbox__arrow:hover { background: rgba(255, 255, 255, 0.25); }
@media (max-width: 768px) {
  .wf-lightbox__arrow { width: 40px; height: 40px; font-size: 22px; }
  /* スライダー：タップ領域確保＋高さ暴走防止 */
  .wf-slider__viewport { aspect-ratio: 16 / 10; }
  .wf-slider__arrow { width: 40px; height: 40px; font-size: 20px; }
  .wf-slider__thumb { width: 48px; }
}
/* PCではポップアップを控えめに（現状の約2/3） */
@media (min-width: 769px) {
  .wf-lightbox__img { max-width: 62vw; max-height: 58vh; }
}

/* 加工範囲カード */
.wf-range-card {
  background: var(--wf-bg-section);
  padding: 24px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  text-align: center;
}

.wf-range-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--wf-accent);
  margin-bottom: 8px;
}

.wf-range-card__value {
  font-size: 40px;
  font-weight: 700;
  color: var(--wf-text);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.wf-range-card__value small {
  font-size: 18px;
  margin-left: 4px;
  color: var(--wf-text-muted);
}

.wf-range-card__note {
  font-size: 11px;
  color: var(--wf-text-muted);
  line-height: 1.6;
  min-height: 18px;
}

/* スペック表（コンパクト版） */
.wf-spec-table--compact th,
.wf-spec-table--compact td {
  padding: 10px 14px;
  font-size: 13px;
}

/* 設備カード（FLAGSHIP）— 2列2段 */
.wf-equipment-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.wf-equipment-card {
  background: white;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* MⅡ3015NT カード：2×2内の通常カード（スライダー上・本文下・動画付き） */
.wf-equipment-card--featured .wf-equipment-card__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wf-equipment-card__media .wf-placeholder {
  margin: 0;
  border: none;
  border-radius: 0;
  height: 100%;
  min-height: 280px;
}

.wf-equipment-card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wf-equipment-card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-accent);
}

.wf-equipment-card h3 {
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.wf-equipment-card__features {
  list-style: none;
  background: var(--wf-bg-gray);
  padding: 16px 20px;
  border-radius: var(--wf-radius);
}

.wf-equipment-card__features li {
  font-size: 13px;
  line-height: 1.9;
  color: var(--wf-text);
  padding-left: 18px;
  position: relative;
}

.wf-equipment-card__features li::before {
  content: "■";
  position: absolute;
  left: 0;
  color: var(--wf-accent);
  font-size: 9px;
  top: 7px;
}

.wf-equipment-card__videos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wf-equipment-card__videos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.wf-equipment-card__videos-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--wf-text);
  padding-left: 14px;
  position: relative;
}

.wf-equipment-card__videos-label::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 10px;
  color: var(--wf-accent);
}

.wf-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--wf-radius);
  overflow: hidden;
  background: #000;
}

.wf-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* SP対応 */
@media (max-width: 768px) {
  .wf-callout {
    padding: 28px 24px;
  }

  .wf-callout h3 {
    font-size: 18px;
  }

  .wf-range-card__value {
    font-size: 32px;
  }

  .wf-equipment-list {
    grid-template-columns: 1fr;
  }

  .wf-equipment-card--featured .wf-equipment-card__main {
    grid-template-columns: 1fr;
  }

  .wf-equipment-card__videos-grid {
    grid-template-columns: 1fr;
  }

  .wf-equipment-card h3 {
    font-size: 18px;
  }

  /* アコーディオンの開閉ボタン：指で押しやすいタップ領域に */
  .wf-skill-card__toggle {
    min-height: 44px;
  }

  .wf-skill-card__toggle-icon {
    width: 26px;
    height: 26px;
  }
}


/* ====================================================================
   メディア・カタログ・プライバシーページ用スタイル
   ==================================================================== */

/* メディアカード（TV・Web） */
.wf-media-card {
  display: flex;
  flex-direction: column;
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  overflow: hidden;
  transition: all 0.2s;
}

.wf-media-card:hover {
  transform: translateY(-2px);
  border-color: var(--wf-accent);
}

.wf-media-card__media .wf-placeholder {
  margin: 0;
  border: none;
  border-radius: 0;
  aspect-ratio: 16/10;
}

.wf-media-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wf-media-card__type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--wf-accent);
}

.wf-media-card h3 {
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.wf-media-card p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--wf-text-muted);
}

.wf-media-card__note {
  margin-top: -4px;
}

.wf-media-card__note small {
  font-size: 11px;
  color: var(--wf-text-muted);
}

/* メディアカード詳細版（新聞・専門誌） */
.wf-media-card-detail {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  background: var(--wf-bg-section);
  padding: 24px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
}

.wf-media-card-detail__media .wf-placeholder {
  margin: 0;
  aspect-ratio: 3/4;
  border-radius: var(--wf-radius);
}

.wf-media-card-detail__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wf-media-card-detail h3 {
  font-size: 17px;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.wf-media-card-detail p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--wf-text-muted);
}

/* メディアリスト（過去のメディア） */
.wf-media-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  background: var(--wf-bg-section);
  padding: 24px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
}

.wf-media-list__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 10px 14px;
  background: white;
  border-radius: 4px;
  align-items: center;
}

.wf-media-list__date {
  font-size: 12px;
  font-weight: 700;
  color: var(--wf-accent);
  letter-spacing: 0.02em;
}

.wf-media-list__title {
  font-size: 13px;
  color: var(--wf-text);
}

/* カタログカード */
.wf-catalog-card {
  display: flex;
  flex-direction: column;
  background: var(--wf-bg-section);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
  overflow: hidden;
  transition: all 0.2s;
}

.wf-catalog-card:hover {
  transform: translateY(-2px);
  border-color: var(--wf-accent);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.wf-catalog-card__media .wf-placeholder {
  margin: 0;
  border: none;
  border-radius: 0;
  aspect-ratio: 3/4;
}

.wf-catalog-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wf-catalog-card__type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--wf-accent);
}

.wf-catalog-card h3 {
  font-size: 19px;
  letter-spacing: 0.02em;
}

.wf-catalog-card p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--wf-text-muted);
  flex-grow: 1;
}

.wf-catalog-card__action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--wf-border);
  margin-top: 8px;
}

.wf-catalog-card__file {
  font-size: 11px;
  font-weight: 600;
  color: var(--wf-text-muted);
  letter-spacing: 0.02em;
  font-family: monospace;
}

/* プライバシーポリシー */
.wf-policy {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wf-policy__intro {
  font-size: 15px;
  line-height: 1.9;
  color: var(--wf-text);
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--wf-accent);
}

.wf-policy__article {
  background: var(--wf-bg-section);
  padding: 28px 32px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius);
}

.wf-policy__article h2 {
  font-size: 18px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wf-border);
  display: flex;
  align-items: baseline;
  gap: 12px;
  letter-spacing: 0.02em;
}

.wf-policy__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--wf-accent);
  color: white;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  font-family: -apple-system, "Helvetica Neue", sans-serif;
}

.wf-policy__article p {
  font-size: 14px;
  line-height: 2;
  color: var(--wf-text);
  margin-bottom: 12px;
}

.wf-policy__article p:last-child {
  margin-bottom: 0;
}

.wf-policy__list {
  list-style: none;
  background: var(--wf-bg-gray);
  padding: 16px 20px;
  border-radius: var(--wf-radius);
  border-left: 3px solid var(--wf-accent);
  margin: 12px 0;
}

.wf-policy__list li {
  font-size: 13px;
  line-height: 1.9;
  color: var(--wf-text);
  padding-left: 16px;
  position: relative;
}

.wf-policy__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--wf-accent);
  font-weight: 700;
}

.wf-policy__table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  background: var(--wf-bg-gray);
  border-radius: var(--wf-radius);
  overflow: hidden;
}

.wf-policy__table th {
  padding: 12px 16px;
  background: var(--wf-bg-section);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  width: 140px;
  border-bottom: 1px solid var(--wf-border);
  vertical-align: top;
}

.wf-policy__table td {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--wf-text);
  border-bottom: 1px solid var(--wf-border);
}

.wf-policy__table tr:last-child th,
.wf-policy__table tr:last-child td {
  border-bottom: none;
}

.wf-policy__revision {
  text-align: right;
  margin-top: 32px;
  color: var(--wf-text-muted);
}

/* SP対応 */
@media (max-width: 768px) {
  .wf-media-card-detail {
    grid-template-columns: 1fr;
  }

  .wf-media-card-detail__media .wf-placeholder {
    aspect-ratio: 16/10;
  }

  .wf-media-list {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .wf-media-list__item {
    grid-template-columns: 90px 1fr;
    padding: 8px 12px;
  }

  .wf-policy__article {
    padding: 20px;
  }

  .wf-policy__article h2 {
    font-size: 16px;
  }

  .wf-policy__num {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .wf-policy__table th {
    width: 90px;
    font-size: 12px;
    padding: 10px 12px;
  }

  .wf-policy__table td {
    font-size: 12px;
    padding: 10px 12px;
  }
}


/* ===================================================================
   アイコン（絵文字置き換え用・ライン系SVG / currentColorで色を継承）
   <span class="wf-icon wf-icon--tel" aria-hidden="true"></span>
   =================================================================== */
.wf-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--wf-icon) center / contain no-repeat;
  mask: var(--wf-icon) center / contain no-repeat;
  flex: 0 0 auto;
}

.wf-icon--tel{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13.832%2016.568a1%201%200%200%200%201.213-.303l.355-.465A2%202%200%200%201%2017%2015h3a2%202%200%200%201%202%202v3a2%202%200%200%201-2%202A18%2018%200%200%201%202%204a2%202%200%200%201%202-2h3a2%202%200%200%201%202%202v3a2%202%200%200%201-.8%201.6l-.468.351a1%201%200%200%200-.292%201.233%2014%2014%200%200%200%206.392%206.384'/%3E%3C/svg%3E")}
.wf-icon--mail{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='20'%20height='16'%20x='2'%20y='4'%20rx='2'/%3E%3Cpath%20d='m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207'/%3E%3C/svg%3E")}
.wf-icon--fax{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209V3a1%201%200%200%201%201-1h10a1%201%200%200%201%201%201v6'/%3E%3Cpath%20d='M6%2018H5a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-1'/%3E%3Crect%20width='12'%20height='8'%20x='6'%20y='14'%20rx='1'/%3E%3Cpath%20d='M9%2017h.01'/%3E%3C/svg%3E")}
.wf-icon--doc{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7z'/%3E%3Cpath%20d='M14%202v5h6'/%3E%3Cpath%20d='M16%2013H8'/%3E%3Cpath%20d='M16%2017H8'/%3E%3Cpath%20d='M10%209H8'/%3E%3C/svg%3E")}
.wf-icon--clipboard{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='8'%20height='4'%20x='8'%20y='2'%20rx='1'/%3E%3Cpath%20d='M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2'/%3E%3Cpath%20d='M12%2011h4'/%3E%3Cpath%20d='M12%2016h4'/%3E%3Cpath%20d='M8%2011h.01'/%3E%3Cpath%20d='M8%2016h.01'/%3E%3C/svg%3E")}
.wf-icon--tool{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z'/%3E%3C/svg%3E")}
.wf-icon--bulb{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%2014c.2-1%20.7-1.7%201.5-2.5C17.7%2010.2%2018%209%2018%208a6%206%200%200%200-12%200c0%201%20.2%202.2%201.5%203.5.7.7%201.3%201.5%201.5%202.5'/%3E%3Cpath%20d='M9%2018h6'/%3E%3Cpath%20d='M10%2022h4'/%3E%3C/svg%3E")}
.wf-icon--paperclip{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13.234%2020.252%2021%2012.3'/%3E%3Cpath%20d='m16%206-8.414%208.586a2%202%200%200%200%200%202.828%202%202%200%200%200%202.828%200l8.414-8.586a4%204%200%200%200%200-5.656%204%204%200%200%200-5.656%200l-8.415%208.585a6%206%200%201%200%208.486%208.486'/%3E%3C/svg%3E")}
.wf-icon--edit{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020h9'/%3E%3Cpath%20d='M16.5%203.5a2.121%202.121%200%200%201%203%203L7%2019l-4%201%201-4z'/%3E%3C/svg%3E")}
.wf-icon--alert{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3'/%3E%3Cpath%20d='M12%209v4'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E")}
.wf-icon--door{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%204h3a2%202%200%200%201%202%202v14'/%3E%3Cpath%20d='M2%2020h3'/%3E%3Cpath%20d='M13%2020h9'/%3E%3Cpath%20d='M10%2012v.01'/%3E%3Cpath%20d='M13%204.562v16.157a1%201%200%200%201-1.242.97L5%2020V5.562a2%202%200%200%201%201.515-1.94l4-1A2%202%200%200%201%2013%204.561'/%3E%3C/svg%3E")}
.wf-icon--car{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2017h2c.6%200%201-.4%201-1v-3c0-.9-.7-1.7-1.5-1.9C18.7%2010.6%2016%2010%2016%2010s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6%200-1.1.4-1.4.9l-1.5%202.8C2%2011%202%2011.5%202%2012v4c0%20.6.4%201%201%201h2'/%3E%3Ccircle%20cx='7'%20cy='17'%20r='2'/%3E%3Cpath%20d='M9%2017h6'/%3E%3Ccircle%20cx='17'%20cy='17'%20r='2'/%3E%3C/svg%3E")}
.wf-icon--calendar{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%202v4'/%3E%3Cpath%20d='M16%202v4'/%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='4'%20rx='2'/%3E%3Cpath%20d='M3%2010h18'/%3E%3C/svg%3E")}
.wf-icon--yen{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%209.5V21'/%3E%3Cpath%20d='m5%204%207%208%207-8'/%3E%3Cpath%20d='M6%2013h12'/%3E%3Cpath%20d='M6%2017h12'/%3E%3C/svg%3E")}
.wf-icon--factory{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2020a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V8l-7%205V8l-7%205V5a1%201%200%200%200-1-1H3a1%201%200%200%200-1%201z'/%3E%3Cpath%20d='M17%2018h1'/%3E%3Cpath%20d='M12%2018h1'/%3E%3Cpath%20d='M7%2018h1'/%3E%3C/svg%3E")}
.wf-icon--laptop{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%205a2%202%200%200%201%202%202v8.526a2%202%200%200%200%20.212.897l1.068%202.127a1%201%200%200%201-.9%201.45H3.62a1%201%200%200%201-.9-1.45l1.069-2.127A2%202%200%200%200%204%2015.526V7a2%202%200%200%201%202-2z'/%3E%3Cpath%20d='M20.054%2015.987H3.946'/%3E%3C/svg%3E")}
.wf-icon--health{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11%2012h2'/%3E%3Cpath%20d='M12%2011v2'/%3E%3Cpath%20d='M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l6.29%206.293a1%201%200%200%200%201.414%200z'/%3E%3C/svg%3E")}
.wf-icon--building{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20width='16'%20height='20'%20x='4'%20y='2'%20rx='2'/%3E%3Cpath%20d='M9%2022v-4h6v4'/%3E%3Cpath%20d='M8%206h.01'/%3E%3Cpath%20d='M16%206h.01'/%3E%3Cpath%20d='M12%206h.01'/%3E%3Cpath%20d='M12%2010h.01'/%3E%3Cpath%20d='M12%2014h.01'/%3E%3Cpath%20d='M16%2010h.01'/%3E%3Cpath%20d='M16%2014h.01'/%3E%3Cpath%20d='M8%2010h.01'/%3E%3Cpath%20d='M8%2014h.01'/%3E%3C/svg%3E")}
.wf-icon--landmark{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%2018v-7'/%3E%3Cpath%20d='M11.12%202.198a2%202%200%200%201%201.76.006l7.866%203.847c.476.233.31.949-.22.949H3.474c-.53%200-.695-.716-.22-.949z'/%3E%3Cpath%20d='M14%2018v-7'/%3E%3Cpath%20d='M18%2018v-7'/%3E%3Cpath%20d='M3%2022h18'/%3E%3Cpath%20d='M6%2018v-7'/%3E%3C/svg%3E")}
.wf-icon--graduation{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z'/%3E%3Cpath%20d='M22%2010v6'/%3E%3Cpath%20d='M6%2012.5V16a6%203%200%200%200%2012%200v-3.5'/%3E%3C/svg%3E")}
.wf-icon--party{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5.8%2011.3%202%2022l10.7-3.79'/%3E%3Cpath%20d='M4%203h.01'/%3E%3Cpath%20d='M22%208h.01'/%3E%3Cpath%20d='M15%202h.01'/%3E%3Cpath%20d='M22%2020h.01'/%3E%3Cpath%20d='m22%202-2.24.75a2.9%202.9%200%200%200-1.96%203.12c.19%201.57-.96%203.16-2.55%203.16'/%3E%3Cpath%20d='m11%2013%209%209'/%3E%3Cpath%20d='M14.5%2017.5%204.5%2015'/%3E%3C/svg%3E")}
.wf-icon--umbrella{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202v1'/%3E%3Cpath%20d='M12%2013v7a2%202%200%200%200%204%200'/%3E%3Cpath%20d='M19.071%209.929A7%207%200%200%200%205%2010a.5.5%200%200%200%20.5.5h13a.5.5%200%200%200%20.5-.5%207%207%200%200%200%20.071-.071'/%3E%3C/svg%3E")}
.wf-icon--gear{--wf-icon:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E")}


/* ===== 写真ステータス（レビュー用・本番前に削除可） ===== */
.wf-photo-note{display:inline-block;font-size:11px;line-height:1.4;padding:1px 6px;border-radius:4px;margin-top:4px;}
.wf-photo-note--sub{background:#e7f0fb;color:#1f5fae;}
.wf-photo-note--check{background:#fff4d6;color:#8a6d00;}
/* 素材なしプレースホルダ：実画像と同じ「写真の枠」だけを占有する。
   高さは併記の .wf-img--xx（比率）が決める。height:100% は付けない（カードを縦に伸ばさない）。
   横並びで本文の高さに画像を合わせる文脈だけ、下で個別に fill を復活させる。 */
.wf-photo-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:120px;background:#efefef;border:2px dashed #cc2b2b;
  color:#cc2b2b;text-align:center;font-size:13px;box-sizing:border-box;padding:12px;}
.wf-photo-ph__tag{font-weight:700;}
.wf-photo-ph small{color:#555;}
/* fill が必要な横並び文脈のみ：本文（縦長）の高さに画像枠を合わせる */
.wf-equipment-card__media .wf-photo-ph{height:100%;min-height:280px;aspect-ratio:auto;}
/* ○△ の注記は body.wf-review の時だけ表示（本番前は body から wf-review を外す） */
body:not(.wf-review) .wf-photo-note{display:none;}


/* =====================================================================
   金属加工マイクロインタラクション（全ページ共通・2026-06-03）
   方針: 動きは短く・正確に・無駄なく。prefers-reduced-motion で無効化。
   ===================================================================== */
:root{
  --wf-ease:cubic-bezier(.2,.7,.2,1);
  --wf-gold:#ffb84d; --wf-gold-bright:#fff3d6;
}

/* ---- A: ボタン（金属ブラックへ滑らかに変色＋研磨反射の金スイープ／縁=極細の金線＋背後グロー） ----
   金属面を border-box まで覆い（inset:-2px）黒い縁を出さない。スイープは background-position で動かす */
.wf-btn{ position:relative; z-index:0;
  transition:color .35s var(--wf-ease), border-color .35s var(--wf-ease),
    box-shadow .4s var(--wf-ease), transform .1s var(--wf-ease); }
/* 金属ブラックの面：opacity でフェードイン。ボタンの端（border部分）まで覆う */
.wf-btn::before{ content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
  border-radius:inherit; opacity:0; transition:opacity .35s var(--wf-ease);
  background:linear-gradient(135deg,#3a414b 0%,#181d24 52%,#0a0d11 100%); }
.wf-btn:hover::before,.wf-btn:focus-visible::before{ opacity:1; }
/* 研磨反射（金）スイープ：背景位置で移動するのではみ出さない（overflow不要） */
.wf-btn::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,184,77,.55) 50%,transparent 58%);
  background-size:260% 100%; background-position:160% 0;
  transition:background-position .6s var(--wf-ease), opacity .15s var(--wf-ease); }
.wf-btn:hover::after,.wf-btn:focus-visible::after{ opacity:1; background-position:-160% 0; }
/* 縁：黒線は出さず（border透明）、外周にごく細い金のライン＋背後からの金グロー */
.wf-btn:hover,.wf-btn:focus-visible{ color:#fff; border-color:transparent;
  box-shadow:0 0 0 .5px rgba(255,184,77,.85), 0 0 13px rgba(255,184,77,.36), 0 0 34px rgba(255,184,77,.15); }
.wf-btn:active{ transform:translateY(1px); }

/* ---- B: テキストリンクの下線・ギャラリー図版のホバーは無し ----
   ---- C: クリックで遷移する画像カードに「一瞬の研磨反射」（ポリッシュスイープ） ---- */
.wf-product-card,.wf-flagship-card,.wf-work-card,.wf-catalog-card,
.wf-media-card,.wf-feature-card,.wf-related-card,.wf-external-card,.wf-pillar{
  position:relative; overflow:hidden; }
.wf-product-card::after,.wf-flagship-card::after,.wf-work-card::after,.wf-catalog-card::after,
.wf-media-card::after,.wf-feature-card::after,.wf-related-card::after,.wf-external-card::after,.wf-pillar::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
  transform:translateX(-135%); transition:transform .5s var(--wf-ease); }
.wf-product-card:hover::after,.wf-flagship-card:hover::after,.wf-work-card:hover::after,.wf-catalog-card:hover::after,
.wf-media-card:hover::after,.wf-feature-card:hover::after,.wf-related-card:hover::after,.wf-external-card:hover::after,.wf-pillar:hover::after{
  transform:translateX(135%); }

/* ---- D: 装飾（小見出しに罫書きのティック：テキストと同色） ---- */
.wf-section-header__eyebrow::before{ content:""; display:inline-block;
  width:16px; height:2px; vertical-align:middle; margin-right:9px;
  background:currentColor; }

/* ---- E: 質感（ダーク帯にヘアライン研磨目） ---- */
.wf-cta-band{ position:relative; }
.wf-cta-band::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px); }
.wf-cta-band > *{ position:relative; z-index:1; }

/* ---- E: 最上部のレーザー走査ライン（スクロール進捗・fx.jsが生成） ---- */
#wf-scan{ position:fixed; top:0; left:0; height:2px; width:0; z-index:9999; pointer-events:none;
  background:linear-gradient(90deg,var(--wf-gold),var(--wf-gold-bright));
  box-shadow:0 0 10px rgba(255,184,77,.6); }

/* ---- E: スクロール・リビール（機械的スライドイン／JS時のみ隠す） ---- */
.wf-fx-reveal{ transition:opacity .55s var(--wf-ease), transform .55s var(--wf-ease); }
.wf-js .wf-fx-reveal{ opacity:0; transform:translateY(14px); }
.wf-js .wf-fx-reveal.is-in{ opacity:1; transform:none; }

/* ---- F: スタッガー・リビール（グリッドの子要素が順に“せり上がる”／fx.jsが制御） ---- */
.wf-js .wf-fx-rise{ opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--wf-ease), transform .6s var(--wf-ease); will-change:opacity, transform; }
.wf-js .wf-fx-rise.is-shown{ opacity:1; transform:none; }

/* ---- G: カード画像のホバーズーム（外周は overflow:hidden 済み） ---- */
.wf-product-card .wf-img,.wf-flagship-card .wf-img,.wf-work-card .wf-img,
.wf-catalog-card .wf-img,.wf-media-card .wf-img,.wf-related-card .wf-img,
.wf-feature-card .wf-img,.wf-pillar .wf-img{ transition:transform .6s var(--wf-ease); }
.wf-product-card:hover .wf-img,.wf-flagship-card:hover .wf-img,.wf-work-card:hover .wf-img,
.wf-catalog-card:hover .wf-img,.wf-media-card:hover .wf-img,.wf-related-card:hover .wf-img,
.wf-feature-card:hover .wf-img,.wf-pillar:hover .wf-img{ transform:scale(1.05); }

/* ---- 動きを抑える設定のユーザーには演出オフ ---- */
@media (prefers-reduced-motion: reduce){
  .wf-btn,.wf-btn::before,.wf-btn::after,
  .wf-product-card::after,.wf-flagship-card::after,.wf-work-card::after,.wf-catalog-card::after,
  .wf-media-card::after,.wf-feature-card::after,.wf-related-card::after,.wf-external-card::after,.wf-pillar::after{ transition:none !important; }
  .wf-js .wf-fx-reveal{ opacity:1 !important; transform:none !important; }
  .wf-js .wf-fx-rise{ opacity:1 !important; transform:none !important; transition:none !important; }
  .wf-product-card .wf-img,.wf-flagship-card .wf-img,.wf-work-card .wf-img,
  .wf-catalog-card .wf-img,.wf-media-card .wf-img,.wf-related-card .wf-img,
  .wf-feature-card .wf-img,.wf-pillar .wf-img{ transition:none !important; }
  #wf-scan{ display:none !important; }
}

/* ===================================================================
   metal handrail「美」 各部名称の解説図（暗色セクション）
   現サイトの黒背景＋ラベル付き図版を踏襲
   =================================================================== */
.wf-diagram-section{
  background:radial-gradient(120% 130% at 50% 0%, #11161d 0%, #000 72%);
}
.wf-section-header--invert .wf-section-header__title{ color:#fff; }
.wf-section-header--invert .wf-section-header__lead{ color:#cbd5e1; }

.wf-diagram{
  max-width:860px;
  margin:0 auto;
}
.wf-diagram img{
  display:block;
  width:100%;
  height:auto;
}
.wf-diagram figcaption{
  margin-top:18px;
  text-align:center;
  font-size:13px;
  color:#94a3b8;
}

/* ===================================================================
   metal handrail「美」 部品 ― 3種類のパーツ（縦並び・画像＋テキスト交互）
   現サイト準拠。黒地メディアに contain で全体を収める（縦長/横長混在対応）
   =================================================================== */
.wf-part-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
  margin-bottom:40px;
}
.wf-part-row__media{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:center;
}
/* 黒地画像（ハード/ソフト）。画像自体が黒背景なので黒パネルとして自然に見える */
.wf-part-row__media > .wf-img{
  flex:1 1 0;
  min-width:0;
  width:100%;
  height:auto;
  background:#000;
  border-radius:var(--wf-radius);
}
/* ハードは寸法図を主役に少し広く、仕上げ3種を従に */
.wf-part-row__media--duo > .wf-img:first-child{ flex:1.35 1 0; }
/* ブラケットの3枚（白背景・キャプション付き） */
.wf-part-row__media--trio{ gap:14px; }
.wf-part-row__media--trio .wf-figure{ flex:1 1 0; min-width:0; margin:0; }
.wf-part-row--reverse .wf-part-row__media{ order:2; }
.wf-part-row__body h3{
  font-size:21px;
  letter-spacing:.02em;
  margin:2px 0 12px;
}
.wf-part-row__body h3 small{
  font-size:13px;
  font-weight:600;
  color:var(--wf-text-muted);
}
.wf-part-row__body p{
  font-size:14px;
  line-height:1.95;
  color:var(--wf-text-muted);
}
.wf-part-row__note{
  margin-top:10px;
  font-size:12.5px;
}
.wf-parts-subhead{
  text-align:center;
  margin:56px 0 24px;
}
.wf-parts-subhead h4{
  font-size:16px;
  margin-bottom:6px;
}
.wf-parts-subhead p{
  font-size:13px;
  color:var(--wf-text-muted);
}
@media (max-width:768px){
  .wf-part-row{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:48px;
  }
  .wf-part-row--reverse .wf-part-row__media{ order:0; }
}

/* ===================================================================
   オーダーメイド手すり 誘導バナー（製品ページ末尾・現サイト準拠）
   =================================================================== */
.wf-promo-banner{
  display:block;
  border-radius:var(--wf-radius);
  overflow:hidden;
  line-height:0;
}
.wf-promo-banner .wf-img{
  width:100%;
  height:auto;
  border-radius:0;
  transition:transform .55s var(--wf-ease);
}
.wf-promo-banner:hover .wf-img{ transform:scale(1.025); }

/* ===================================================================
   採用ヒーロー：完成MV画像（テキスト焼き込み）を全幅表示
   旧オーバーレイ見出しは廃止（画像と二重になるため）
   =================================================================== */
.wf-r-hero--image{
  min-height:0;
  display:block;
  overflow:hidden;
}
.wf-r-hero__link{
  display:block;
  line-height:0;
}
.wf-r-hero__link picture{ display:block; }
.wf-r-hero--image .wf-r-hero__img{
  width:100%;
  height:auto;
  object-fit:unset;
  transition:filter .4s var(--wf-ease);
  animation: wf-r-hero-in 6s var(--wf-ease) both;
}
@keyframes wf-r-hero-in{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  .wf-r-hero--image .wf-r-hero__img{ animation:none; }
}
.wf-r-hero__link:hover .wf-r-hero__img{ filter:brightness(1.06); }
/* スクリーンリーダー用（視覚的に非表示でH1を保持） */
.wf-r-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===================================================================
   スマホ（小幅）最終調整 — ≤520px。
   既存の各 @media(max-width:768px) より後に置き、確実に上書きする。
   =================================================================== */
@media (max-width: 520px) {
  /* 4カラムグリッドはスマホでは1列に（2列だとカードが狭すぎて見出しが
     1文字ずつ折り返す不具合の対策。521〜768pxの小型タブレットは2列のまま） */
  .wf-grid--4 {
    grid-template-columns: 1fr;
  }
  /* グリッド内カードの子要素がはみ出さないように */
  .wf-grid > * {
    min-width: 0;
  }
}