/* =============================================
   storefront-banner-lp.css
   店頭幕LP 外部スタイルシート
   クラス命名：.lp-sb（Store Banner）
   既存LP（lifesize-panel-lp.css）のスタイルに準拠
   ============================================= */

/* ---- フルワイド化（必須） ---- */
.lp-sb {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  background: #0a0a0a !important;
  color: #f5f0e8 !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
}

/* ---- WordPressタイトル非表示（必須） ---- */
#page_header_type2 {
  display: none !important;
  margin: 0 !important; padding: 0 !important;
  height: 0 !important; min-height: 0 !important;
  overflow: hidden !important;
}

/* ---- WPコンテンツ余白リセット ---- */
#page_content, #page_content article, #page_content .post_content,
.post_content.clearfix, #main, #content, .site-content,
.entry-content, .entry, .hentry {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---- ベースリセット ---- */
.lp-sb *, .lp-sb *::before, .lp-sb *::after { box-sizing: border-box !important; }
.lp-sb img { max-width: 100% !important; height: auto !important; display: block !important; }
.lp-sb a { color: inherit !important; text-decoration: none !important; }
.lp-sb a:visited { color: inherit !important; }
.lp-sb p:empty { display: none !important; }

/* wpautop対策：brタグ無害化 */
.lp-sb br { display: none !important; }

/* ---- CSS変数 ---- */
.lp-sb {
  --gold: #c9a84c;
  --gold-dark: #8b6914;
  --gold-light: #e8c870;
  --cream: #f5f0e8;
  --gray: #aaaaaa;
  --charcoal: #141414;
  --charcoal2: #1c1c1c;
  --charcoal3: #222222;
  --green: #2d7a3a;
  --border: rgba(201,168,76,0.18);
  --border-dim: rgba(255,255,255,0.07);
  --radius: 6px;
  --radius-lg: 14px;
  --tr: 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  --max-w: 1200px;
}

/* ---- 共通コンテナ ---- */
.lp-sb .sb-cont {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px,4vw,48px) !important;
}

/* ---- 共通ラベル・タイトル・ライン ---- */
.lp-sb .sb-sec-label {
  font-size: 11px !important;
  letter-spacing: 0.38em !important;
  color: var(--gold) !important;
  display: block !important;
  margin-bottom: 14px !important;
  font-weight: 700 !important;
}
.lp-sb .sb-sec-title {
  font-size: clamp(26px,4vw,46px) !important;
  font-weight: 900 !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  border: none !important; padding: 0 !important;
  background: transparent !important;
  color: var(--cream) !important;
  line-height: 1.25 !important;
  margin-bottom: 18px !important;
}
.lp-sb .sb-sec-lead {
  font-size: 15px !important;
  color: var(--gray) !important;
  max-width: 680px !important;
  line-height: 1.85 !important;
  margin-bottom: 48px !important;
}
.lp-sb .sb-gold-line {
  display: block !important;
  width: 48px !important; height: 3px !important;
  background: linear-gradient(90deg,var(--gold),var(--gold-dark)) !important;
  margin: 0 0 40px !important;
  border-radius: 2px !important;
}

/* ---- 共通ボタン ---- */
.lp-sb .btn-p {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important;
  color: #0a0a0a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 30px !important;
  border-radius: var(--radius) !important;
  transition: var(--tr) !important;
  cursor: pointer !important;
  border: none !important;
  letter-spacing: 0.04em !important;
}
.lp-sb .btn-p:hover {
  background: linear-gradient(135deg,var(--gold-light),var(--gold)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(201,168,76,0.28) !important;
}
.lp-sb .btn-s {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  color: var(--cream) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: var(--radius) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  transition: var(--tr) !important;
  cursor: pointer !important;
  letter-spacing: 0.04em !important;
}
.lp-sb .btn-s:hover {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(201,168,76,0.06) !important;
}

/* ---- スクロールアニメーション（コンテンツが消えない方式） ---- */
.lp-sb .fi { opacity: 1 !important; transform: translateY(0) !important; transition: opacity 0.7s ease, transform 0.7s ease !important; }
.lp-sb .fi.anim { opacity: 0 !important; transform: translateY(30px) !important; }
.lp-sb .fi.anim.vis { opacity: 1 !important; transform: translateY(0) !important; }

/* ---- タブ表示制御 ---- */
.lp-sb .sb-tab-pane { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
.lp-sb .sb-tab-pane.active { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; }

/* ---- テーブルリセット ---- */
.lp-sb table, .lp-sb thead, .lp-sb tbody, .lp-sb tr, .lp-sb th, .lp-sb td {
  background: var(--charcoal) !important;
  color: var(--cream) !important;
}

/* ---- goldテキスト ---- */
.lp-sb .gold-w { color: var(--gold) !important; }


/* =============================================
   ① HERO セクション
   ============================================= */
.lp-sb .sb-hero {
  min-height: 90vh !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 40px 24px 80px !important;
  overflow: hidden !important;
}
.lp-sb .sb-hero-img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
}
.lp-sb .sb-hero-overlay {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(135deg,rgba(10,10,10,0.97) 0%,rgba(10,10,10,0.75) 50%,rgba(20,16,8,0.85) 100%) !important;
  z-index: 1 !important;
}
.lp-sb .sb-hero-grid {
  position: absolute !important; inset: 0 !important;
  background-image: linear-gradient(rgba(201,168,76,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.04) 1px,transparent 1px) !important;
  background-size: 64px 64px !important;
  z-index: 1 !important;
}
.lp-sb .sb-hero-content {
  position: relative !important; z-index: 2 !important;
  max-width: var(--max-w) !important; margin: 0 auto !important; width: 100% !important;
}
.lp-sb .sb-eyebrow {
  font-size: 11px !important; letter-spacing: 0.42em !important;
  color: var(--gold) !important; display: block !important;
  margin-bottom: 20px !important; font-weight: 700 !important;
}
.lp-sb .sb-h1 {
  font-size: clamp(32px,5.5vw,72px) !important;
  font-weight: 900 !important; line-height: 1.1 !important;
  color: var(--cream) !important; margin-bottom: 24px !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  border: none !important; background: transparent !important; padding: 0 !important;
}
.lp-sb .sb-h1 .gold-w { color: var(--gold) !important; }
.lp-sb .sb-hero-catch {
  font-size: clamp(16px,2.2vw,22px) !important;
  color: var(--cream) !important; display: block !important;
  margin-bottom: 16px !important; font-weight: 700 !important; line-height: 1.6 !important;
}
.lp-sb .sb-hero-sub {
  font-size: 14px !important; color: var(--gray) !important;
  display: block !important; margin-bottom: 40px !important;
  max-width: 580px !important; line-height: 1.9 !important;
}
.lp-sb .sb-hero-bars {
  display: grid !important; grid-template-columns: repeat(2,1fr) !important;
  gap: 10px !important; max-width: 560px !important; margin-bottom: 44px !important;
}
.lp-sb .sb-hero-bar {
  display: flex !important; align-items: center !important; gap: 10px !important;
  background: rgba(201,168,76,0.08) !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  border-radius: var(--radius) !important;
  padding: 10px 14px !important; font-size: 12px !important;
  font-weight: 700 !important; color: var(--gold) !important;
}
.lp-sb .sb-hero-btns { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
.lp-sb .sb-scroll {
  position: absolute !important; bottom: 32px !important; left: 50% !important;
  transform: translateX(-50%) !important; z-index: 2 !important;
  font-size: 10px !important; letter-spacing: 0.3em !important; color: var(--gray) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important;
}
.lp-sb .sb-scroll span { animation: sb-bounce 1.6s ease-in-out infinite !important; }
@keyframes sb-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }


/* =============================================
   ② 分岐バナー FORK
   ============================================= */
/* wpautop対策：フォーク内のp・br無害化 */
.lp-sb .sb-fork-body > p { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; }
.lp-sb .sb-fork-img-wrap > p { display: none !important; margin: 0 !important; padding: 0 !important; }
.lp-sb .sb-fork-grid > p { display: none !important; margin: 0 !important; padding: 0 !important; }
.lp-sb .sb-fork-checklist > p { display: none !important; margin: 0 !important; padding: 0 !important; }
.lp-sb .sb-fork-checklist br { display: none !important; }

.lp-sb .sb-fork-sec {
  background: var(--charcoal2) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 56px 0 !important;
}
.lp-sb .sb-fork-inner {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px,4vw,48px) !important;
}
.lp-sb .sb-fork-label {
  text-align: center !important;
  font-size: 11px !important;
  letter-spacing: 0.35em !important;
  color: var(--gray) !important;
  margin-bottom: 32px !important;
  font-weight: 700 !important;
}
.lp-sb .sb-fork-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; align-items: stretch !important; }
.lp-sb .sb-fork-card {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: var(--tr) !important;
  cursor: pointer !important;
  height: 100% !important;
}
.lp-sb .sb-fork-card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 48px rgba(0,0,0,0.5) !important; }
.lp-sb .sb-fork-card-a { border: 1px solid rgba(201,168,76,0.4) !important; }
.lp-sb .sb-fork-card-b { border: 1px solid rgba(255,255,255,0.1) !important; }
.lp-sb .sb-fork-card-a:hover { border-color: rgba(201,168,76,0.7) !important; }
.lp-sb .sb-fork-card-b:hover { border-color: rgba(255,255,255,0.25) !important; }
.lp-sb .sb-fork-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 260px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.lp-sb .sb-fork-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}
.lp-sb .sb-fork-card:hover .sb-fork-img-wrap img { transform: scale(1.04) !important; }
.lp-sb .sb-fork-img-overlay {
  position: absolute !important; inset: 0 !important;
}
.lp-sb .sb-fork-overlay-a {
  background: linear-gradient(180deg, rgba(10,8,2,0.15) 0%, rgba(10,8,2,0.55) 100%) !important;
}
.lp-sb .sb-fork-overlay-b {
  background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.55) 100%) !important;
}
.lp-sb .sb-fork-body {
  padding: 28px 32px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
}
.lp-sb .sb-fork-body-a { background: linear-gradient(135deg,rgba(201,168,76,0.12) 0%,rgba(139,105,20,0.06) 100%) !important; }
.lp-sb .sb-fork-body-b { background: rgba(255,255,255,0.03) !important; }
.lp-sb .sb-fork-num {
  font-size: 10px !important; letter-spacing: 0.35em !important;
  font-weight: 700 !important; color: var(--gold) !important; display: block !important;
}
.lp-sb .sb-fork-title {
  font-size: clamp(18px,2vw,24px) !important;
  font-weight: 900 !important; color: var(--cream) !important; line-height: 1.35 !important;
}
.lp-sb .sb-fork-desc {
  font-size: 14px !important; color: var(--gray) !important; line-height: 1.75 !important;
}
.lp-sb .sb-fork-checklist {
  display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 4px !important;
}
.lp-sb .sb-fork-check {
  display: flex !important; align-items: center !important; gap: 8px !important;
  font-size: 13px !important; color: var(--gray) !important; line-height: 1.5 !important;
}
.lp-sb .sb-fork-check::before {
  content: '✓' !important;
  color: var(--gold) !important; font-weight: 700 !important; flex-shrink: 0 !important;
}
.lp-sb .sb-fork-check-b::before { color: var(--gray) !important; }
.lp-sb .sb-fork-btn-scroll {
  display: block !important;
  margin-top: 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cream) !important;
  padding: 13px 24px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: var(--radius) !important;
  background: rgba(255,255,255,0.07) !important;
  transition: var(--tr) !important;
  cursor: pointer !important;
  text-align: center !important;
  line-height: 1.4 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.lp-sb .sb-fork-card:hover .sb-fork-btn-scroll {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.lp-sb .sb-fork-btn-wrap {
  display: block !important; margin-top: 16px !important; width: 100% !important;
}
.lp-sb .sb-fork-btn-wrap > p { display: none !important; height: 0 !important; }
.lp-sb .sb-fork-btn-buy {
  display: block !important;
  font-size: 14px !important; font-weight: 700 !important; color: #0a0a0a !important;
  padding: 14px 24px !important; border-radius: var(--radius) !important;
  background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important;
  border: none !important; transition: var(--tr) !important; cursor: pointer !important;
  text-decoration: none !important; text-align: center !important;
  line-height: 1.4 !important; width: 100% !important; box-sizing: border-box !important;
}
.lp-sb .sb-fork-btn-buy:hover { background: linear-gradient(135deg,var(--gold-light),var(--gold)) !important; box-shadow: 0 6px 20px rgba(201,168,76,0.35) !important; color: #0a0a0a !important; }
.lp-sb .sb-fork-btn-buy:visited { color: #0a0a0a !important; }


/* =============================================
   ③ 比較表 COMPARE
   ============================================= */
.lp-sb .sb-compare-sec {
  padding: 100px 0 !important;
  background: #0a0a0a !important;
}
.lp-sb .sb-compare-wrap { overflow-x: auto !important; }
.lp-sb .sb-compare-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}
.lp-sb .sb-compare-table th, .lp-sb .sb-compare-table td {
  padding: 16px 20px !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--border-dim) !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.lp-sb .sb-th-item {
  background: var(--charcoal2) !important;
  color: var(--gray) !important;
  font-size: 12px !important;
  text-align: left !important;
  width: 28% !important;
}
.lp-sb .sb-th-bad {
  background: rgba(255,255,255,0.04) !important;
  color: var(--gray) !important;
  font-size: 13px !important;
}
.lp-sb .sb-th-good {
  background: rgba(201,168,76,0.12) !important;
  color: var(--gold) !important;
  font-size: 13px !important;
  border-left: 2px solid rgba(201,168,76,0.4) !important;
}
.lp-sb .sb-td-label {
  background: var(--charcoal2) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cream) !important;
  text-align: left !important;
}
.lp-sb .sb-td-bad {
  background: var(--charcoal) !important;
  color: var(--gray) !important;
  font-size: 13px !important;
}
.lp-sb .sb-td-mid {
  background: var(--charcoal) !important;
  color: var(--gray) !important;
  font-size: 13px !important;
}
.lp-sb .sb-td-good {
  background: rgba(201,168,76,0.06) !important;
  color: var(--cream) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-left: 2px solid rgba(201,168,76,0.25) !important;
}
.lp-sb .sb-compare-note {
  background: rgba(201,168,76,0.06) !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  border-radius: var(--radius) !important;
  padding: 20px 24px !important;
  font-size: 13px !important;
  color: var(--gray) !important;
  margin-top: 24px !important;
  line-height: 1.8 !important;
}
.lp-sb .sb-compare-note strong { color: var(--gold) !important; }


/* =============================================
   ④ 業種別施工事例 CASE STUDIES
   ============================================= */
.lp-sb .sb-case-sec {
  padding: 100px 0 !important;
  background: var(--charcoal) !important;
}

/* wpautop対策：ケースグリッド内のp・br無害化 */
.lp-sb .sb-case-grid > p { display: none !important; margin: 0 !important; height: 0 !important; }
.lp-sb .sb-case-grid br { display: none !important; }
.lp-sb .sb-case-body > p { display: none !important; margin: 0 !important; height: 0 !important; }

.lp-sb .sb-case-category { margin-bottom: 64px !important; }
.lp-sb .sb-case-category:last-child { margin-bottom: 0 !important; }
.lp-sb .sb-category-head {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.lp-sb .sb-category-tag {
  font-size: 10px !important;
  letter-spacing: 0.3em !important;
  font-weight: 700 !important;
  background: rgba(201,168,76,0.12) !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  color: var(--gold) !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  flex-shrink: 0 !important;
}
.lp-sb .sb-tag-beauty {
  background: rgba(220,180,200,0.1) !important;
  border-color: rgba(220,180,200,0.3) !important;
  color: #e8b4c8 !important;
}
.lp-sb .sb-tag-massage {
  background: rgba(150,180,140,0.1) !important;
  border-color: rgba(150,180,140,0.3) !important;
  color: #96c08c !important;
}
.lp-sb .sb-tag-kc {
  background: rgba(180,140,100,0.1) !important;
  border-color: rgba(180,140,100,0.3) !important;
  color: #c8a06e !important;
}
.lp-sb .sb-category-title {
  font-size: clamp(18px,2.2vw,24px) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
}
.lp-sb .sb-case-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 16px !important; }
.lp-sb .sb-case-card {
  background: var(--charcoal2) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: var(--tr) !important;
}
.lp-sb .sb-case-card:hover { border-color: rgba(201,168,76,0.25) !important; transform: translateY(-3px) !important; }
.lp-sb .sb-case-card img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}
.lp-sb .sb-case-card:hover img { transform: scale(1.04) !important; }
.lp-sb .sb-case-body { padding: 16px !important; }
.lp-sb .sb-case-tag {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: rgba(201,168,76,0.12) !important;
  color: var(--gold) !important;
  padding: 2px 8px !important;
  border-radius: 50px !important;
  margin-bottom: 8px !important;
}
.lp-sb .sb-case-tag.sb-tag-b {
  background: rgba(220,180,200,0.1) !important;
  color: #e8b4c8 !important;
}
.lp-sb .sb-case-tag.sb-tag-m {
  background: rgba(150,180,140,0.1) !important;
  color: #96c08c !important;
}
.lp-sb .sb-case-tag.sb-tag-k {
  background: rgba(180,140,100,0.1) !important;
  color: #c8a06e !important;
}
.lp-sb .sb-case-desc {
  font-size: 12px !important;
  color: var(--gray) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}


/* =============================================
   ⑤ 素材・加工ガイド SPEC TAB
   ============================================= */
.lp-sb .sb-spec-sec {
  padding: 100px 0 !important;
  background: var(--charcoal2) !important;
}
.lp-sb .sb-tab-nav {
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 40px !important;
  border-bottom: 1px solid var(--border-dim) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.lp-sb .sb-tab-nav::-webkit-scrollbar { display: none !important; }
.lp-sb .sb-tab-btn {
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--gray) !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
  white-space: nowrap !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  margin-bottom: -1px !important;
}
.lp-sb .sb-tab-btn:hover { color: var(--cream) !important; }
.lp-sb .sb-tab-btn.active { color: var(--gold) !important; border-bottom-color: var(--gold) !important; }

/* wpautop対策：タブ内グリッドのp・br無害化 */
.lp-sb .sb-material-grid > p { display: none !important; margin: 0 !important; height: 0 !important; }
.lp-sb .sb-material-grid br { display: none !important; }
.lp-sb .sb-process-grid > p { display: none !important; margin: 0 !important; height: 0 !important; }
.lp-sb .sb-process-grid br { display: none !important; }

.lp-sb .sb-material-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 20px !important; }
.lp-sb .sb-material-card {
  background: var(--charcoal) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: var(--tr) !important;
}
.lp-sb .sb-material-card:hover { border-color: rgba(201,168,76,0.25) !important; transform: translateY(-2px) !important; }
.lp-sb .sb-material-card img { width: 100% !important; height: 400px !important; object-fit: cover !important; display: block !important; }
.lp-sb .sb-mat-img-ph {
  width: 100% !important; height: 160px !important;
  background: var(--charcoal3) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 48px !important;
}
.lp-sb .sb-mat-body { padding: 20px !important; flex: 1 !important; }
.lp-sb .sb-mat-body h3 { font-size: 15px !important; font-weight: 700 !important; color: var(--cream) !important; margin-bottom: 8px !important; border: none !important; background: transparent !important; padding: 0 !important; }
.lp-sb .sb-mat-tag {
  display: inline-block !important;
  font-size: 10px !important; font-weight: 700 !important;
  background: rgba(201,168,76,0.1) !important; color: var(--gold) !important;
  padding: 2px 8px !important; border-radius: 50px !important;
  margin-bottom: 10px !important;
}
.lp-sb .sb-mat-body p { font-size: 12px !important; color: var(--gray) !important; line-height: 1.65 !important; margin: 0 !important; }

.lp-sb .sb-process-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; }
.lp-sb .sb-process-card {
  background: var(--charcoal) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: var(--tr) !important;
}
.lp-sb .sb-process-card:hover { border-color: rgba(201,168,76,0.25) !important; transform: translateY(-2px) !important; }
.lp-sb .sb-process-card img { width: 100% !important; height: 160px !important; object-fit: cover !important; display: block !important; }
.lp-sb .sb-proc-img-ph {
  width: 100% !important; height: 160px !important;
  background: var(--charcoal3) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 48px !important;
}
.lp-sb .sb-proc-body { padding: 20px !important; }
.lp-sb .sb-proc-body h3 { font-size: 15px !important; font-weight: 700 !important; color: var(--cream) !important; margin-bottom: 10px !important; border: none !important; background: transparent !important; padding: 0 !important; }
.lp-sb .sb-proc-body p { font-size: 13px !important; color: var(--gray) !important; line-height: 1.75 !important; margin: 0 !important; }

.lp-sb .sb-size-wrap { max-width: 640px !important; margin: 0 auto !important; }
.lp-sb .sb-size-table { width: 100% !important; border-collapse: collapse !important; margin-bottom: 20px !important; }
.lp-sb .sb-size-table th, .lp-sb .sb-size-table td { padding: 14px 20px !important; font-size: 14px !important; border-bottom: 1px solid var(--border-dim) !important; text-align: left !important; }
.lp-sb .sb-size-table thead th { color: var(--gold) !important; font-size: 12px !important; font-weight: 700 !important; background: rgba(201,168,76,0.08) !important; }
.lp-sb .sb-size-val { font-weight: 700 !important; color: var(--cream) !important; letter-spacing: 0.04em !important; }
.lp-sb .sb-size-note { font-size: 13px !important; color: var(--gray) !important; line-height: 1.8 !important; background: rgba(201,168,76,0.06) !important; border: 1px solid rgba(201,168,76,0.18) !important; border-radius: var(--radius) !important; padding: 14px 18px !important; }


/* =============================================
   ⑥ 製作・施工フロー FLOW
   ============================================= */
.lp-sb .sb-flow-sec {
  padding: 100px 0 !important;
  background: #0a0a0a !important;
}
/* wpautop対策：フローグリッド内のp・br無害化 */
.lp-sb .sb-flow-steps > p { display: none !important; margin: 0 !important; height: 0 !important; }
.lp-sb .sb-flow-steps br { display: none !important; }

.lp-sb .sb-flow-steps {
  display: grid !important;
  grid-template-columns: repeat(5,1fr) !important;
  gap: 0 !important;
  position: relative !important;
}
.lp-sb .sb-flow-steps::before {
  content: '' !important;
  position: absolute !important;
  top: 28px !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,rgba(201,168,76,0.3),rgba(201,168,76,0.3),transparent) !important;
  z-index: 0 !important;
}
.lp-sb .sb-flow-step {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
  padding: 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}
.lp-sb .sb-flow-num {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important;
  color: #0a0a0a !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 16px rgba(201,168,76,0.25) !important;
}
.lp-sb .sb-flow-step h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cream) !important;
  line-height: 1.5 !important;
  border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
}
.lp-sb .sb-flow-step p {
  font-size: 12px !important;
  color: var(--gray) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
.lp-sb .sb-flow-tag {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  background: rgba(201,168,76,0.1) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  color: var(--gold) !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
}


/* =============================================
   ⑦ 看板ワンストップ ONE STOP
   ============================================= */
.lp-sb .sb-onestop-sec {
  padding: 80px 0 !important;
  background: linear-gradient(135deg,#0f0d06,#141108) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
/* wpautop対策：サインアイテムのp・br無害化 */
.lp-sb .sb-onestop-signs > p { display: none !important; margin: 0 !important; height: 0 !important; }
.lp-sb .sb-onestop-signs br { display: none !important; }

.lp-sb .sb-onestop-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}
.lp-sb .sb-onestop-title {
  font-size: clamp(22px,3vw,36px) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  line-height: 1.3 !important;
  margin-bottom: 16px !important;
  border: none !important; background: transparent !important; padding: 0 !important;
}
.lp-sb .sb-onestop-desc {
  font-size: 14px !important;
  color: var(--gray) !important;
  line-height: 1.85 !important;
  margin-bottom: 24px !important;
}
.lp-sb .sb-onestop-signs {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 12px !important;
}
.lp-sb .sb-sign-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px 12px !important;
  text-align: center !important;
  transition: var(--tr) !important;
}
.lp-sb .sb-sign-item:hover { border-color: rgba(201,168,76,0.25) !important; background: rgba(201,168,76,0.04) !important; }
.lp-sb .sb-sign-icon { font-size: 28px !important; margin-bottom: 8px !important; }
.lp-sb .sb-sign-name { font-size: 11px !important; font-weight: 700 !important; color: var(--gray) !important; }


/* =============================================
   ⑧ PRO'S VOICE
   ============================================= */
.lp-sb .sb-pro-sec { padding: 80px 0 !important; background: #0a0a0a !important; }
.lp-sb .sb-pro-inner { display: grid !important; grid-template-columns: auto 1fr !important; gap: 64px !important; align-items: center !important; }
.lp-sb .sb-pro-photo-wrap { position: relative !important; flex-shrink: 0 !important; }
.lp-sb .sb-pro-photo-ph {
  width: 200px !important; height: 267px !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(135deg,#1a1a1a,#222) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 64px !important;
  border: 1px solid var(--border-dim) !important;
  overflow: hidden !important;
}
.lp-sb .sb-pro-photo-ph img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.lp-sb .sb-pro-badge {
  position: absolute !important; bottom: -16px !important; right: -16px !important;
  background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important;
  color: #0a0a0a !important; font-size: 11px !important; font-weight: 900 !important;
  text-align: center !important; padding: 12px 14px !important; border-radius: var(--radius) !important; line-height: 1.5 !important;
}
.lp-sb .sb-q-mark { font-size: 64px !important; color: rgba(201,168,76,0.2) !important; line-height: 0.8 !important; display: block !important; margin-bottom: 8px !important; font-family: Georgia,serif !important; }
.lp-sb .sb-pro-quote-wrap {
  border-left: 3px solid var(--gold) !important;
  padding: 16px 0 16px 24px !important;
  background: transparent !important;
}
.lp-sb .sb-pro-quote { font-size: 15px !important; color: var(--cream) !important; line-height: 1.9 !important; margin-bottom: 20px !important; font-style: italic !important; }
.lp-sb .sb-pro-name { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: var(--cream) !important; }
.lp-sb .sb-pro-title { font-size: 12px !important; color: var(--gold) !important; display: block !important; margin-top: 4px !important; }


/* =============================================
   ⑨ FAQ
   ============================================= */
.lp-sb .sb-faq-sec { padding: 100px 0 !important; background: var(--charcoal) !important; }
.lp-sb .sb-faq-list { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.lp-sb .sb-faq-item { background: var(--charcoal2) !important; border: 1px solid var(--border-dim) !important; border-radius: var(--radius) !important; overflow: hidden !important; transition: var(--tr) !important; }
.lp-sb .sb-faq-item.open { border-color: rgba(201,168,76,0.25) !important; }
.lp-sb .sb-faq-q { width: 100% !important; display: flex !important; align-items: center !important; gap: 16px !important; padding: 20px 24px !important; background: transparent !important; border: none !important; cursor: pointer !important; text-align: left !important; color: var(--cream) !important; transition: var(--tr) !important; font-family: 'Noto Sans JP', sans-serif !important; }
.lp-sb .sb-faq-q:hover { background: rgba(255,255,255,0.02) !important; }
.lp-sb .sb-faq-qm { width: 28px !important; height: 28px !important; background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important; color: #0a0a0a !important; border-radius: var(--radius) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; font-weight: 900 !important; flex-shrink: 0 !important; }
.lp-sb .sb-faq-qt { flex: 1 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; }
.lp-sb .sb-faq-qi { font-size: 20px !important; color: var(--gold) !important; flex-shrink: 0 !important; line-height: 1 !important; transition: transform 0.3s !important; font-weight: 300 !important; }
.lp-sb .sb-faq-item.open .sb-faq-qi { transform: rotate(45deg) !important; }
.lp-sb .sb-faq-a { display: none !important; padding: 0 24px 20px 68px !important; font-size: 13px !important; color: var(--gray) !important; line-height: 1.8 !important; }
.lp-sb .sb-faq-item.open .sb-faq-a { display: block !important; }


/* =============================================
   ⑩ CTA + フォームエリア
   ============================================= */
.lp-sb .sb-cta-sec {
  padding: 100px 0 !important;
  background: linear-gradient(135deg,#0f0d06,#141108) !important;
  position: relative !important;
  overflow: hidden !important;
}
.lp-sb .sb-cta-sec::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background-image: linear-gradient(rgba(201,168,76,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.05) 1px,transparent 1px) !important;
  background-size: 60px 60px !important;
}
.lp-sb .sb-cta-cont {
  position: relative !important; z-index: 1 !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding: 0 clamp(16px,4vw,48px) !important;
}
.lp-sb .sb-cta-cont h2 { font-size: clamp(28px,4vw,48px) !important; font-weight: 900 !important; color: var(--cream) !important; margin-bottom: 20px !important; border: none !important; background: transparent !important; padding: 0 !important; line-height: 1.25 !important; }
.lp-sb .sb-cta-cont p { font-size: 15px !important; color: var(--gray) !important; margin-bottom: 16px !important; line-height: 1.8 !important; }
.lp-sb .sb-cta-note { font-size: 12px !important; color: var(--gray) !important; opacity: 0.7 !important; margin-bottom: 0 !important; }
.lp-sb .sb-form-area {
  margin-top: 48px !important;
  max-width: 100% !important;
  text-align: left !important;
}


/* =============================================
   ⑪ 関連ガイドリンク RELATED
   ============================================= */
.lp-sb .sb-related-sec { background: var(--charcoal2) !important; border-top: 1px solid var(--border) !important; padding: 56px 0 !important; }
.lp-sb .sb-related-inner { max-width: var(--max-w) !important; margin: 0 auto !important; padding: 0 clamp(16px,4vw,48px) !important; }
.lp-sb .sb-related-label { font-size: 11px !important; letter-spacing: 0.3em !important; color: var(--gold) !important; margin-bottom: 16px !important; display: block !important; font-weight: 700 !important; }
.lp-sb .sb-related-title { font-size: 18px !important; font-weight: 700 !important; color: var(--cream) !important; margin-bottom: 28px !important; }
.lp-sb .sb-related-cards { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 16px !important; }
.lp-sb .sb-rcard { display: flex !important; gap: 16px !important; background: var(--charcoal) !important; border: 1px solid var(--border-dim) !important; border-radius: var(--radius-lg) !important; padding: 20px !important; cursor: pointer !important; transition: var(--tr) !important; align-items: flex-start !important; }
.lp-sb .sb-rcard:hover { border-color: rgba(201,168,76,0.3) !important; transform: translateY(-2px) !important; }
.lp-sb .sb-rcard-img { width: 70px !important; height: 90px !important; border-radius: var(--radius) !important; background: #222 !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 28px !important; }
.lp-sb .sb-rcard-tag { font-size: 9px !important; letter-spacing: 0.2em !important; color: var(--gold) !important; font-weight: 700 !important; display: block !important; margin-bottom: 4px !important; }
.lp-sb .sb-rcard-title { font-size: 13px !important; font-weight: 700 !important; color: var(--cream) !important; line-height: 1.4 !important; margin-bottom: 6px !important; }
.lp-sb .sb-rcard-desc { font-size: 11px !important; color: var(--gray) !important; line-height: 1.5 !important; }
.lp-sb .sb-rcard-btn { font-size: 11px !important; font-weight: 700 !important; color: var(--gold) !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; margin-top: 8px !important; }
.lp-sb .sb-rcard-current { opacity: 0.5 !important; cursor: default !important; }
.lp-sb .sb-rcard-current:hover { transform: none !important; border-color: var(--border-dim) !important; }


/* =============================================
   FOOTER
   ============================================= */
.lp-sb .sb-footer { background: #060606 !important; border-top: 1px solid var(--border) !important; padding: 56px 0 32px !important; }
.lp-sb .sb-ft-inner { max-width: var(--max-w) !important; margin: 0 auto !important; padding: 0 clamp(16px,4vw,48px) !important; display: grid !important; grid-template-columns: 1.6fr 1fr 1fr !important; gap: 48px !important; margin-bottom: 40px !important; }
.lp-sb .sb-ft-logo { font-size: 20px !important; font-weight: 900 !important; color: var(--gold) !important; display: block !important; margin-bottom: 12px !important; letter-spacing: 0.08em !important; }
.lp-sb .sb-ft-desc { font-size: 13px !important; color: var(--gray) !important; line-height: 1.75 !important; }
.lp-sb .sb-ft-links h4 { font-size: 11px !important; letter-spacing: 0.2em !important; color: var(--gold) !important; font-weight: 700 !important; margin-bottom: 16px !important; border: none !important; background: transparent !important; padding: 0 !important; }
.lp-sb .sb-ft-links ul { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.lp-sb .sb-ft-links ul li a { font-size: 13px !important; color: var(--gray) !important; transition: var(--tr) !important; }
.lp-sb .sb-ft-links ul li a:hover { color: var(--cream) !important; }
.lp-sb .sb-ft-bottom { max-width: var(--max-w) !important; margin: 0 auto !important; padding: 20px clamp(16px,4vw,48px) 0 !important; border-top: 1px solid var(--border-dim) !important; display: flex !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; font-size: 12px !important; color: rgba(170,170,170,0.5) !important; }
.lp-sb .sb-ft-bottom a { color: rgba(170,170,170,0.6) !important; }
.lp-sb .sb-ft-bottom a:hover { color: var(--gray) !important; }


/* =============================================
   RESPONSIVE — 768px
   ============================================= */
@media (max-width: 1100px) {
  .lp-sb .sb-case-grid { grid-template-columns: repeat(2,1fr) !important; }
  .lp-sb .sb-material-grid { grid-template-columns: repeat(2,1fr) !important; }
  .lp-sb .sb-flow-steps { grid-template-columns: repeat(3,1fr) !important; gap: 32px !important; }
  .lp-sb .sb-flow-steps::before { display: none !important; }
}

@media (max-width: 900px) {
  .lp-sb .sb-fork-grid { grid-template-columns: 1fr !important; }
  .lp-sb .sb-onestop-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .lp-sb .sb-pro-inner { grid-template-columns: 1fr !important; gap: 32px !important; text-align: center !important; }
  .lp-sb .sb-pro-photo-ph { margin: 0 auto !important; }
  .lp-sb .sb-pro-badge { right: auto !important; left: 50% !important; transform: translateX(-50%) !important; }
  .lp-sb .sb-ft-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .lp-sb .sb-related-cards { grid-template-columns: 1fr !important; }
  .lp-sb .sb-process-grid { grid-template-columns: repeat(2,1fr) !important; }
  .lp-sb .sb-flow-steps { grid-template-columns: repeat(2,1fr) !important; }
}

/* =============================================
   RESPONSIVE — 600px
   ============================================= */
@media (max-width: 600px) {
  .lp-sb .sb-hero-bars { grid-template-columns: 1fr !important; }
  .lp-sb .sb-case-grid { grid-template-columns: 1fr !important; }
  .lp-sb .sb-material-grid { grid-template-columns: 1fr !important; }
  .lp-sb .sb-process-grid { grid-template-columns: 1fr !important; }
  .lp-sb .sb-flow-steps { grid-template-columns: 1fr !important; }
  .lp-sb .sb-onestop-signs { grid-template-columns: repeat(2,1fr) !important; }
  .lp-sb .sb-compare-table { font-size: 12px !important; }
  .lp-sb .sb-compare-table th, .lp-sb .sb-compare-table td { padding: 10px 12px !important; }
}


/* =============================================
   ④ 業種別施工事例 — 新レイアウト（カテゴリータブ＋2カラム大判）
   ============================================= */

/* カテゴリータブナビ */
.lp-sb .sb-case-tab-wrap {
  background: var(--charcoal2) !important;
  border-top: 1px solid var(--border-dim) !important;
  border-bottom: 1px solid var(--border-dim) !important;
  margin-bottom: 0 !important;
}
.lp-sb .sb-case-tab-nav {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 clamp(16px,4vw,48px) !important;
  display: flex !important;
  gap: 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.lp-sb .sb-case-tab-nav::-webkit-scrollbar { display: none !important; }
.lp-sb .sb-case-tab-btn {
  flex: 1 !important;
  min-width: 140px !important;
  padding: 20px 12px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  cursor: pointer !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  transition: var(--tr) !important;
  white-space: nowrap !important;
}
.lp-sb .sb-case-tab-btn:hover { background: rgba(255,255,255,0.03) !important; }
.lp-sb .sb-case-tab-btn.active {
  border-bottom-color: var(--gold) !important;
  background: rgba(201,168,76,0.05) !important;
}
.lp-sb .sb-ctab-en {
  font-size: 10px !important;
  letter-spacing: 0.25em !important;
  font-weight: 700 !important;
  color: var(--gray) !important;
  display: block !important;
}
.lp-sb .sb-ctab-ja {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--gray) !important;
  display: block !important;
  transition: color 0.3s !important;
}
.lp-sb .sb-case-tab-btn.active .sb-ctab-en { color: var(--gold) !important; }
.lp-sb .sb-case-tab-btn.active .sb-ctab-ja { color: var(--cream) !important; }
.lp-sb .sb-case-tab-btn:hover .sb-ctab-ja { color: var(--cream) !important; }

/* パネル切り替え */
.lp-sb .sb-case-panel {
  display: none !important;
  padding: 56px 0 !important;
  background: var(--charcoal) !important;
}
.lp-sb .sb-case-panel.active { display: block !important; }

.lp-sb .sb-case-panel-inner { }

/* 2カラム大判グリッド */
.lp-sb .sb-case-main-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  margin-bottom: 36px !important;
}
/* wpautop対策 */
.lp-sb .sb-case-main-grid > p { display: none !important; height: 0 !important; margin: 0 !important; }
.lp-sb .sb-case-main-grid br { display: none !important; }

/* 大判カード */
.lp-sb .sb-case-big-card {
  background: var(--charcoal2) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
  display: flex !important;
  flex-direction: column !important;
}
.lp-sb .sb-case-big-card:hover {
  border-color: rgba(201,168,76,0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}

/* 画像ラッパー：4:3比率で大きく */
.lp-sb .sb-case-big-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: var(--charcoal3) !important;
}
.lp-sb .sb-case-big-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s ease !important;
}
.lp-sb .sb-case-big-card:hover .sb-case-big-img-wrap img {
  transform: scale(1.05) !important;
}

/* 拡大オーバーレイ */
.lp-sb .sb-case-big-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.3s !important;
}
.lp-sb .sb-case-big-card:hover .sb-case-big-overlay {
  background: rgba(0,0,0,0.35) !important;
}
.lp-sb .sb-case-zoom {
  background: rgba(201,168,76,0.9) !important;
  color: #0a0a0a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 50px !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.3s, transform 0.3s !important;
}
.lp-sb .sb-case-big-card:hover .sb-case-zoom {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* カードボディ */
.lp-sb .sb-case-big-body {
  padding: 20px 24px !important;
  flex: 1 !important;
}
.lp-sb .sb-case-big-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}
.lp-sb .sb-case-spec-badge {
  font-size: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--border-dim) !important;
  color: var(--gray) !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
}
.lp-sb .sb-case-big-desc {
  font-size: 13px !important;
  color: var(--gray) !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* カテゴリー内CTA */
.lp-sb .sb-case-cta {
  text-align: center !important;
}
.lp-sb .sb-case-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 1px solid rgba(201,168,76,0.4) !important;
  color: var(--gold) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: var(--radius) !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
  letter-spacing: 0.04em !important;
}
.lp-sb .sb-case-cta-btn:hover {
  background: rgba(201,168,76,0.1) !important;
  border-color: var(--gold) !important;
  transform: translateY(-2px) !important;
}

/* ライトボックス */
.lp-sb .sb-lightbox {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.92) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s !important;
}
.lp-sb .sb-lightbox.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.lp-sb .sb-lb-inner {
  position: relative !important;
  max-width: 1000px !important;
  width: 100% !important;
}
.lp-sb .sb-lb-inner img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--radius-lg) !important;
  display: block !important;
  max-height: 85vh !important;
  object-fit: contain !important;
}
.lp-sb .sb-lb-close {
  position: absolute !important;
  top: -44px !important;
  right: 0 !important;
  color: var(--gray) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 8px 16px !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: var(--radius) !important;
  transition: var(--tr) !important;
}
.lp-sb .sb-lb-close:hover { color: var(--cream) !important; background: rgba(255,255,255,0.15) !important; }


/* =============================================
   ⑤ 素材・加工・サイズガイド — 新レイアウト（全展開）
   ============================================= */
.lp-sb .sb-spec-sec {
  padding: 100px 0 !important;
  background: var(--charcoal2) !important;
}

/* 各ブロック共通 */
.lp-sb .sb-spec-block {
  margin-bottom: 72px !important;
  padding-bottom: 72px !important;
  border-bottom: 1px solid var(--border-dim) !important;
}
.lp-sb .sb-spec-block:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.lp-sb .sb-spec-block-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
  margin-bottom: 40px !important;
}
.lp-sb .sb-spec-block-num {
  font-size: 48px !important;
  font-weight: 900 !important;
  color: rgba(201,168,76,0.2) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  font-family: Georgia, serif !important;
  margin-top: -6px !important;
}
.lp-sb .sb-spec-block-title {
  font-size: clamp(20px,2.5vw,28px) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  margin-bottom: 6px !important;
  border: none !important; background: transparent !important; padding: 0 !important;
}
.lp-sb .sb-spec-block-sub {
  font-size: 13px !important;
  color: var(--gray) !important;
  margin: 0 !important;
}

/* 素材グリッド（4列） */
.lp-sb .sb-material-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; }

/* wpautop対策 */
.lp-sb .sb-material-grid > p { display: none !important; height: 0 !important; margin: 0 !important; }
.lp-sb .sb-material-grid br { display: none !important; }

.lp-sb .sb-material-card {
  background: var(--charcoal) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: var(--tr) !important;
}
.lp-sb .sb-material-card:hover { border-color: rgba(201,168,76,0.3) !important; transform: translateY(-3px) !important; }
.lp-sb .sb-material-card > img { width: 100% !important; height: 300px !important; object-fit: cover !important; display: block !important; }
.lp-sb .sb-mat-img-ph {
  width: 100% !important; height: 160px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 48px !important;
}
.lp-sb .sb-mat-ph-b { background: linear-gradient(135deg,#1c2218,#232b1f) !important; }
.lp-sb .sb-mat-ph-c { background: linear-gradient(135deg,#181c24,#1e2430) !important; }
.lp-sb .sb-mat-ph-d { background: linear-gradient(135deg,#22181c,#2a1e22) !important; }
.lp-sb .sb-mat-body { padding: 20px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.lp-sb .sb-mat-head-row { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.lp-sb .sb-mat-name {
  font-size: 16px !important; font-weight: 900 !important; color: var(--cream) !important;
  border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
}
.lp-sb .sb-mat-tag {
  font-size: 10px !important; font-weight: 700 !important;
  background: rgba(201,168,76,0.1) !important; color: var(--gold) !important;
  padding: 2px 8px !important; border-radius: 50px !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
}
.lp-sb .sb-mat-desc { font-size: 12px !important; color: var(--gray) !important; line-height: 1.7 !important; flex: 1 !important; margin: 0 !important; }
.lp-sb .sb-mat-recommend {
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--gold) !important;
  background: rgba(201,168,76,0.08) !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  padding: 6px 10px !important; border-radius: var(--radius) !important;
}
.lp-sb .sb-mat-spec-row {
  display: flex !important; flex-direction: column !important; gap: 4px !important;
}
.lp-sb .sb-mat-spec-row span { font-size: 11px !important; color: var(--gray) !important; font-weight: 700 !important; }

/* 加工グリッド（3列） */
.lp-sb .sb-process-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 20px !important;
}
/* wpautop対策 */
.lp-sb .sb-process-grid > p { display: none !important; height: 0 !important; margin: 0 !important; }
.lp-sb .sb-process-grid br { display: none !important; }

.lp-sb .sb-process-card {
  background: var(--charcoal) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: var(--tr) !important;
}
.lp-sb .sb-process-card:hover { border-color: rgba(201,168,76,0.25) !important; transform: translateY(-3px) !important; }
.lp-sb .sb-process-card > img { width: 100% !important; height: 300px !important; object-fit: cover !important; display: block !important; }
.lp-sb .sb-proc-img-ph {
  width: 100% !important; height: 160px !important;
  background: linear-gradient(135deg,#1a120a,#221808) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 48px !important;
}
.lp-sb .sb-proc-body { padding: 20px !important; }
.lp-sb .sb-proc-body h3 {
  font-size: 14px !important; font-weight: 700 !important; color: var(--cream) !important;
  margin-bottom: 10px !important; line-height: 1.5 !important;
  border: none !important; background: transparent !important; padding: 0 !important;
}
.lp-sb .sb-proc-body p { font-size: 12px !important; color: var(--gray) !important; line-height: 1.7 !important; margin-bottom: 12px !important; }
.lp-sb .sb-proc-tag {
  display: inline-block !important;
  font-size: 10px !important; font-weight: 700 !important;
  background: rgba(201,168,76,0.1) !important; color: var(--gold) !important;
  padding: 3px 10px !important; border-radius: 50px !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
}
.lp-sb .sb-proc-tag-fire {
  background: rgba(192,57,43,0.12) !important;
  color: #e74c3c !important;
  border-color: rgba(192,57,43,0.3) !important;
}

/* サイズレイアウト（テーブル＋サイドノート） */
.lp-sb .sb-size-layout {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 32px !important;
  align-items: start !important;
}
/* wpautop対策 */
.lp-sb .sb-size-layout > p { display: none !important; height: 0 !important; margin: 0 !important; }
.lp-sb .sb-size-table-wrap { overflow-x: auto !important; }
.lp-sb .sb-size-table { width: 100% !important; border-collapse: collapse !important; }
.lp-sb .sb-size-table th, .lp-sb .sb-size-table td {
  padding: 14px 20px !important; font-size: 14px !important;
  border-bottom: 1px solid var(--border-dim) !important; text-align: left !important;
}
.lp-sb .sb-size-table thead th {
  color: var(--gold) !important; font-size: 11px !important; font-weight: 700 !important;
  background: rgba(201,168,76,0.06) !important; letter-spacing: 0.1em !important;
}
.lp-sb .sb-size-val { font-weight: 700 !important; color: var(--cream) !important; font-size: 15px !important; }
.lp-sb .sb-size-proc { font-size: 12px !important; color: var(--gray) !important; }
.lp-sb .sb-size-note-box {
  width: 260px !important; flex-shrink: 0 !important;
  background: rgba(201,168,76,0.06) !important;
  border: 1px solid rgba(201,168,76,0.2) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px 24px !important;
}
.lp-sb .sb-size-note-icon { font-size: 32px !important; margin-bottom: 12px !important; }
.lp-sb .sb-size-note-box h4 {
  font-size: 14px !important; font-weight: 700 !important; color: var(--gold) !important;
  margin-bottom: 10px !important; border: none !important; background: transparent !important; padding: 0 !important;
}
.lp-sb .sb-size-note-box p { font-size: 12px !important; color: var(--gray) !important; line-height: 1.75 !important; margin-bottom: 20px !important; }
.lp-sb .sb-size-cta-btn {
  display: block !important; text-align: center !important;
  background: linear-gradient(135deg,var(--gold),var(--gold-dark)) !important;
  color: #0a0a0a !important; font-size: 13px !important; font-weight: 700 !important;
  padding: 12px 16px !important; border-radius: var(--radius) !important;
  cursor: pointer !important; transition: var(--tr) !important;
}
.lp-sb .sb-size-cta-btn:hover {
  background: linear-gradient(135deg,var(--gold-light),var(--gold)) !important;
  transform: translateY(-2px) !important;
}


/* =============================================
   レスポンシブ追加分
   ============================================= */
@media (max-width: 1100px) {
  .lp-sb .sb-material-grid { grid-template-columns: repeat(2,1fr) !important; }
  .lp-sb .sb-size-layout { grid-template-columns: 1fr !important; }
  .lp-sb .sb-size-note-box { width: 100% !important; }
}
@media (max-width: 900px) {
  .lp-sb .sb-material-grid { grid-template-columns: repeat(2,1fr) !important; }
  .lp-sb .sb-process-grid { grid-template-columns: repeat(2,1fr) !important; }
  .lp-sb .sb-case-tab-btn { min-width: 100px !important; padding: 16px 8px !important; }
  .lp-sb .sb-ctab-en { font-size: 9px !important; }
  .lp-sb .sb-ctab-ja { font-size: 13px !important; }
}
@media (max-width: 600px) {
  .lp-sb .sb-material-grid { grid-template-columns: 1fr !important; }
  .lp-sb .sb-process-grid { grid-template-columns: 1fr !important; }
  .lp-sb .sb-case-main-grid { grid-template-columns: 1fr !important; }
  .lp-sb .sb-case-big-body { padding: 16px !important; }
}



/* =============================================
   storefront-banner-form.css
   店頭幕LP 専用お問い合わせフォームスタイル
   等身大パネルフォーム（ep-form）のデザインに準拠
   クラス接頭辞：sb-（Store Banner）
   ============================================= */

/* ---- ベース ---- */
.sb-form-wrap {
  max-width: 100%;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ---- セクションカード ---- */
.sb-form-section {
  background: #1c1c1c;
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 20px;
}
.sb-form-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #c9a84c;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201,168,76,0.2);
  letter-spacing: 0.04em;
}

/* ---- フォーム行 ---- */
.sb-form-row {
  margin-bottom: 20px;
}
.sb-form-row:last-child {
  margin-bottom: 0;
}

/* 2カラム行 */
.sb-form-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}
.sb-form-row-half .sb-form-row {
  margin-bottom: 0;
}

/* ---- ラベル ---- */
.sb-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #f5f0e8;
  margin-bottom: 8px;
}
.sb-required {
  background: #c0392b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sb-optional {
  background: rgba(255,255,255,0.1);
  color: #aaaaaa;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ---- テキスト・Tel・Email入力 ---- */
.sb-form-wrap input[type="text"],
.sb-form-wrap input[type="tel"],
.sb-form-wrap input[type="email"] {
  width: 100%;
  background: #111111;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #f5f0e8;
  font-size: 14px;
  padding: 12px 16px;
  font-family: 'Noto Sans JP', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.sb-form-wrap input[type="text"]:focus,
.sb-form-wrap input[type="tel"]:focus,
.sb-form-wrap input[type="email"]:focus {
  outline: none;
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}
.sb-form-wrap input[type="text"]::placeholder,
.sb-form-wrap input[type="tel"]::placeholder,
.sb-form-wrap input[type="email"]::placeholder {
  color: #555;
}

/* ---- テキストエリア ---- */
.sb-form-wrap textarea {
  width: 100%;
  background: #111111;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #f5f0e8;
  font-size: 14px;
  padding: 12px 16px;
  font-family: 'Noto Sans JP', sans-serif;
  min-height: 140px;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.sb-form-wrap textarea:focus {
  outline: none;
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}
.sb-form-wrap textarea::placeholder {
  color: #555;
}

/* ---- セレクトボックス ---- */
.sb-form-wrap select,
.sb-form-wrap .sb-cf7-select {
  width: 100%;
  background: #111111;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  color: #f5f0e8;
  font-size: 14px;
  padding: 12px 40px 12px 16px;
  font-family: 'Noto Sans JP', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  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 d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.sb-form-wrap select:focus,
.sb-form-wrap .sb-cf7-select:focus {
  outline: none;
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

/* ---- ヒントテキスト ---- */
.sb-field-hint {
  font-size: 12px;
  color: #777;
  margin-top: 8px;
  line-height: 1.65;
}
.sb-section-note {
  font-size: 13px;
  color: #888;
  margin-bottom: 16px;
  margin-top: -10px;
  line-height: 1.65;
}

/* ---- チェックボックス（オプション加工）---- */
/* 2カラムグリッド */
.sb-checkbox-grid .wpcf7-checkbox,
.sb-checkbox-grid .sb-cf7-checkbox-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.sb-checkbox-grid .wpcf7-list-item {
  display: block !important;
  margin: 0 !important;
}
.sb-checkbox-grid .wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #f5f0e8 !important;
  padding: 12px 14px !important;
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  transition: border-color 0.2s, background 0.2s !important;
  line-height: 1.4 !important;
}
.sb-checkbox-grid .wpcf7-list-item label:hover {
  border-color: rgba(201,168,76,0.4) !important;
  background: rgba(201,168,76,0.04) !important;
}
.sb-checkbox-grid .wpcf7-list-item input[type="checkbox"] {
  accent-color: #c9a84c !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

/* ---- チェックボックス（オプション商品）3カラムグリッド ---- */
.sb-item-grid .wpcf7-checkbox,
.sb-item-grid .sb-cf7-checkbox-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
}
.sb-item-grid .wpcf7-list-item {
  display: block !important;
  margin: 0 !important;
}
.sb-item-grid .wpcf7-list-item label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  color: #f5f0e8 !important;
  padding: 12px 12px !important;
  background: #111111 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  transition: border-color 0.2s, background 0.2s !important;
  line-height: 1.5 !important;
  min-height: 48px !important;
}
.sb-item-grid .wpcf7-list-item label:hover {
  border-color: rgba(201,168,76,0.4) !important;
  background: rgba(201,168,76,0.04) !important;
}
.sb-item-grid .wpcf7-list-item input[type="checkbox"] {
  accent-color: #c9a84c !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  cursor: pointer !important;
}

/* ---- 写真添付ヒント ---- */
.sb-photo-hint {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.sb-photo-hint-title {
  font-size: 13px;
  font-weight: 700;
  color: #c9a84c;
  margin-bottom: 6px;
}
.sb-photo-hint p {
  font-size: 12px;
  color: #777;
  line-height: 1.7;
  margin: 0;
}

/* ---- 同意セクション ---- */
.sb-consent-section {
  background: transparent !important;
  border: none !important;
  padding: 8px 0 !important;
  text-align: center;
}
.sb-consent-lead {
  font-size: 13px;
  color: #777;
  line-height: 1.9;
  text-align: center;
}
.sb-consent-lead a {
  color: #c9a84c;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sb-consent-lead a:hover {
  color: #e8c870;
}

/* ---- 送信ボタン ---- */
/* LPの .sb-cta-cont の幅制限をリセット */
.lp-sb .sb-cta-cont {
  max-width: 100% !important;
  padding: 0 clamp(16px, 4vw, 48px) !important;
}
.lp-sb .sb-form-area {
  max-width: 100% !important;
}

/* CF7がボタンを<p>で囲むため無害化 */
.sb-submit-wrap p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  display: block !important;
  width: auto !important;
}

.sb-submit-wrap {
  text-align: center;
  margin-top: 32px;
  padding: 0 clamp(16px, 4vw, 48px);
}
.sb-form-wrap input[type="submit"],
.sb-submit-wrap input[type="submit"],
.sb-submit-wrap .wpcf7-submit {
  display: inline-block;
  background: linear-gradient(135deg, #c9a84c, #8b6914);
  color: #0a0a0a !important;
  font-size: 17px;
  font-weight: 700;
  padding: 20px 80px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  letter-spacing: 0.08em;
  font-family: 'Noto Sans JP', sans-serif;
  transition: all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
  box-shadow: 0 4px 20px rgba(201,168,76,0.25);
  -webkit-appearance: none;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
}
.sb-form-wrap input[type="submit"]:hover,
.sb-submit-wrap input[type="submit"]:hover,
.sb-submit-wrap .wpcf7-submit:hover {
  background: linear-gradient(135deg, #e8c870, #c9a84c);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(201,168,76,0.35);
}
.sb-form-wrap input[type="submit"]:active,
.sb-submit-wrap input[type="submit"]:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(201,168,76,0.25);
}

/* ---- バリデーションエラー ---- */
.sb-form-wrap .wpcf7-not-valid {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(231,76,60,0.1) !important;
}
.sb-form-wrap .wpcf7-not-valid-tip {
  display: block;
  color: #e74c3c;
  font-size: 12px;
  margin-top: 6px;
}

/* ---- 送信完了メッセージ ---- */
.sb-form-wrap .wpcf7-response-output {
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 14px;
  margin-top: 16px;
  text-align: center;
}
.sb-form-wrap .wpcf7-mail-sent-ok {
  background: rgba(45,122,58,0.15);
  border: 1px solid rgba(45,122,58,0.4);
  color: #4ab85a;
}
.sb-form-wrap .wpcf7-mail-sent-ng,
.sb-form-wrap .wpcf7-spam-blocked {
  background: rgba(192,57,43,0.15);
  border: 1px solid rgba(192,57,43,0.4);
  color: #e74c3c;
}
.sb-form-wrap .wpcf7-validation-errors {
  background: rgba(230,126,34,0.12);
  border: 1px solid rgba(230,126,34,0.35);
  color: #e67e22;
}

/* ---- ファイルアップロード ---- */
.sb-form-wrap .wpcf7-drag-n-drop-file {
  border: 2px dashed rgba(201,168,76,0.3);
  border-radius: 8px;
  background: #111111;
  color: #f5f0e8;
  transition: border-color 0.2s;
}
.sb-form-wrap .wpcf7-drag-n-drop-file:hover {
  border-color: #c9a84c;
}

/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
  .sb-form-section {
    padding: 22px 18px;
    border-radius: 10px;
  }
  .sb-form-row-half {
    grid-template-columns: 1fr;
  }
  .sb-checkbox-grid .wpcf7-checkbox,
  .sb-checkbox-grid .sb-cf7-checkbox-wrap {
    grid-template-columns: 1fr !important;
  }
  .sb-item-grid .wpcf7-checkbox,
  .sb-item-grid .sb-cf7-checkbox-wrap {
    grid-template-columns: 1fr 1fr !important;
  }
  .sb-submit-wrap input[type="submit"],
  .sb-submit-wrap .wpcf7-submit {
    padding: 18px 40px;
    font-size: 15px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .sb-item-grid .wpcf7-checkbox,
  .sb-item-grid .sb-cf7-checkbox-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 送信ボタン 表示崩れ強制修正 ---- */
.sb-submit-wrap,
.sb-submit-wrap p {
  width: 100% !important;
  text-align: center !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
}
.sb-submit-wrap input[type="submit"],
.sb-submit-wrap .wpcf7-submit {
  display: inline-block !important;
  width: auto !important;
  min-width: 280px !important;
  max-width: 90% !important;
  padding: 20px 60px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}