/* ============================================================
   CoreAX LP コンパクト化パッチ
   - 全セクションの上下余白を圧縮し、本文がより画面内に入るように
   - 既存スタイルに勝つため、必要箇所のみ !important
   ============================================================ */

/* 1. <section> の上下 padding を一括圧縮 */
section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* 2. ヒーロー/最初のセクションは少し狭め */
section[class*="hero"],
section[id*="hero"],
section[id*="Hero"],
section:first-of-type {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* 3. 見出しと前後要素の間隔を圧縮 */
section h1,
section h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  line-height: 1.3 !important;
}
section h3 {
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}
section h4 {
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

/* 4. eyebrow/badge/label と見出しの間を詰める */
section [class*="eyebrow"],
section [class*="Eyebrow"],
section [class*="badge"],
section [class*="Badge"],
section [class*="section-label"],
section [class*="sectionLabel"] {
  margin-bottom: 10px !important;
}

/* 5. セクションのヘッダー部全体（見出し+説明）の下マージン */
section header,
section [class*="section-head"],
section [class*="sectionHead"],
section [class*="section-title"],
section [class*="sectionTitle"],
section [class*="section-header"],
section [class*="sectionHeader"] {
  margin-bottom: 28px !important;
  padding-bottom: 0 !important;
}

/* 6. リード文（見出し直下の説明段落）の余白圧縮 */
section h2 + p,
section h1 + p,
section [class*="section-head"] p,
section [class*="sectionHead"] p,
section [class*="lead"] {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  line-height: 1.7 !important;
}

/* 7. カードグリッド/行コンテナの上余白を圧縮 */
section [class*="grid"],
section [class*="Grid"],
section [class*="cards"],
section [class*="Cards"],
section [class*="row"]:not([class*="arrow"]) {
  margin-top: 24px !important;
}

/* 8. レスポンシブ調整 */
@media (max-width: 1024px) {
  section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}
@media (max-width: 640px) {
  section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  section h1,
  section h2 {
    margin-bottom: 12px !important;
  }
  section header,
  section [class*="section-head"],
  section [class*="sectionHead"] {
    margin-bottom: 20px !important;
  }
}

/* ============================================================
   末尾: 何か壊れた場合は <link rel="stylesheet" href="...compact.css">
   の 1 行を index.html から削除するだけで完全に元に戻ります。
   ============================================================ */

/* ============================================================
   ===== CARD COMPACT STRONG =====
   強度: 思い切り(-40%) + カード自体も一回り小さく見せる
   2026-05-12 追加
   compact.css の末尾に追記してください
   ============================================================ */

/* 1. カード本体の内側 padding を大幅圧縮 + 角丸を控えめに */
section [class*="card"]:not(a):not(button),
section [class*="Card"]:not(a):not(button),
section article,
section [class*="panel"],
section [class*="Panel"],
section [class*="box"]:not([class*="boxshadow"]),
section [class*="Box"] {
  padding: 18px !important;
  border-radius: 12px !important;
}

/* 2. カード内アイコンと見出しの間隔を圧縮 + アイコンサイズも微縮 */
section [class*="card"] [class*="icon"],
section [class*="Card"] [class*="icon"],
section article [class*="icon"],
section [class*="card"] svg:first-child,
section [class*="card"] img:first-child {
  margin-bottom: 8px !important;
  max-width: 48px !important;
  max-height: 48px !important;
}

/* 3. カード内見出し(h3/h4) の margin と font-size */
section [class*="card"] h3,
section [class*="Card"] h3,
section article h3 {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
}
section [class*="card"] h4,
section [class*="Card"] h4,
section article h4 {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 0.95rem !important;
  line-height: 1.35 !important;
}

/* 4. カード内のリード文 */
section [class*="card"] h3 + p,
section [class*="card"] h4 + p,
section [class*="Card"] h3 + p,
section [class*="Card"] h4 + p {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
}

/* 5. カード内バッジ/タグの縦ギャップを圧縮 */
section [class*="badge"] + [class*="badge"],
section [class*="tag"] + [class*="tag"],
section [class*="pill"] + [class*="pill"],
section [class*="chip"] + [class*="chip"],
section [class*="card"] > div + div,
section [class*="card"] [class*="badge"],
section [class*="card"] [class*="tag"] {
  margin-top: 6px !important;
}

/* 6. バッジ自体の padding と font-size を圧縮 */
section [class*="badge"],
section [class*="Badge"],
section [class*="pill"]:not(button),
section [class*="chip"],
section [class*="tag"]:not(input) {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  font-size: 0.82rem !important;
  line-height: 1.3 !important;
}

/* 7. バッジ下の補足説明 */
section [class*="badge"] + p,
section [class*="badge"] + small,
section [class*="pill"] + p,
section [class*="pill"] + small {
  margin-top: 2px !important;
  margin-bottom: 8px !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

/* 8. 注釈テキスト */
section [class*="note"],
section [class*="Note"],
section .option-note {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  font-size: 0.82rem !important;
}

/* 9. カード内グリッド/フレックスの gap を圧縮 */
section [class*="card"] [class*="grid"],
section [class*="card"] [class*="Grid"],
section [class*="card"] [class*="flex"] {
  gap: 6px !important;
  row-gap: 6px !important;
}

/* 10. OPTIONタグ等のコーナーバッジ位置調整 */
section [class*="card"] [class*="corner"],
section [class*="card"] [class*="ribbon"],
section [class*="card"] [class*="OPTION"] {
  top: 12px !important;
  right: 12px !important;
}

/* 11. レスポンシブ調整 */
@media (max-width: 1024px) {
  section [class*="card"]:not(a):not(button),
  section [class*="Card"]:not(a):not(button),
  section article,
  section [class*="panel"],
  section [class*="Panel"] {
    padding: 16px !important;
  }
}
@media (max-width: 640px) {
  section [class*="card"]:not(a):not(button),
  section [class*="Card"]:not(a):not(button),
  section article,
  section [class*="panel"],
  section [class*="Panel"] {
    padding: 14px !important;
    border-radius: 10px !important;
  }
  section [class*="card"] h3,
  section [class*="card"] h4 {
    margin-bottom: 4px !important;
    font-size: 0.95rem !important;
  }
  section [class*="card"] [class*="icon"],
  section [class*="card"] svg:first-child,
  section [class*="card"] img:first-child {
    max-width: 40px !important;
    max-height: 40px !important;
    margin-bottom: 6px !important;
  }
  section [class*="badge"] + [class*="badge"],
  section [class*="pill"] + [class*="pill"] {
    margin-top: 5px !important;
  }
}

/* ============================================================
   ===== CARD COMPACT STRONG END =====
   ロールバック: このブロックを削除すれば前回 compact.css の
   状態(=元の余白)に戻ります。
   ============================================================ */

/* ============================================================
   ===== CARD COMPACT EXTRA =====
   強度: ぎゅっと(さらに圧縮、カード自体が縦に短くなる)
   前回の CARD COMPACT STRONG の上にさらに重ねるレイヤー
   2026-05-12 追加
   compact.css の末尾に追記してください
   ============================================================ */

/* 1. カード本体の内側 padding をさらに圧縮 + min-height 解除 */
section [class*="card"]:not(a):not(button),
section [class*="Card"]:not(a):not(button),
section article,
section [class*="panel"],
section [class*="Panel"],
section [class*="box"]:not([class*="boxshadow"]),
section [class*="Box"] {
  padding: 14px 16px !important;
  border-radius: 10px !important;
  min-height: 0 !important;
}

/* 2. カード同士の縦間隔 / グリッドの行ギャップを圧縮 */
section [class*="grid"],
section [class*="Grid"],
section [class*="cards"],
section [class*="Cards"] {
  row-gap: 16px !important;
  gap: 16px !important;
}
section [class*="card"]:not(a):not(button) + [class*="card"]:not(a):not(button) {
  margin-top: 0 !important;
}

/* 3. アイコンの下マージンと最大サイズ */
section [class*="card"] [class*="icon"],
section [class*="Card"] [class*="icon"],
section article [class*="icon"],
section [class*="card"] svg:first-child,
section [class*="card"] img:first-child {
  margin-bottom: 4px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

/* 4. カード内見出し(h3/h4) */
section [class*="card"] h3,
section [class*="Card"] h3,
section article h3 {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
}
section [class*="card"] h4,
section [class*="Card"] h4,
section article h4 {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  font-size: 0.9rem !important;
  line-height: 1.3 !important;
}

/* 5. リード文 */
section [class*="card"] h3 + p,
section [class*="card"] h4 + p,
section [class*="Card"] h3 + p,
section [class*="Card"] h4 + p {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
}

/* 6. バッジ縦ギャップ */
section [class*="badge"] + [class*="badge"],
section [class*="tag"] + [class*="tag"],
section [class*="pill"] + [class*="pill"],
section [class*="chip"] + [class*="chip"],
section [class*="card"] > div + div,
section [class*="card"] [class*="badge"],
section [class*="card"] [class*="tag"] {
  margin-top: 4px !important;
}

/* 7. バッジ自体 */
section [class*="badge"],
section [class*="Badge"],
section [class*="pill"]:not(button),
section [class*="chip"],
section [class*="tag"]:not(input) {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
}

/* 8. バッジ下の補足説明 */
section [class*="badge"] + p,
section [class*="badge"] + small,
section [class*="pill"] + p,
section [class*="pill"] + small {
  margin-top: 1px !important;
  margin-bottom: 5px !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

/* 9. 注釈テキスト */
section [class*="note"],
section [class*="Note"],
section .option-note {
  margin-top: 2px !important;
  margin-bottom: 4px !important;
  font-size: 0.78rem !important;
  line-height: 1.3 !important;
}

/* 10. カード内グリッド/フレックスの gap */
section [class*="card"] [class*="grid"],
section [class*="card"] [class*="Grid"],
section [class*="card"] [class*="flex"] {
  gap: 4px !important;
  row-gap: 4px !important;
}

/* 11. OPTIONタグ等のコーナーバッジ位置 */
section [class*="card"] [class*="corner"],
section [class*="card"] [class*="ribbon"],
section [class*="card"] [class*="OPTION"] {
  top: 10px !important;
  right: 10px !important;
}

/* 12. レスポンシブ */
@media (max-width: 1024px) {
  section [class*="card"]:not(a):not(button),
  section [class*="Card"]:not(a):not(button),
  section article,
  section [class*="panel"],
  section [class*="Panel"] {
    padding: 12px 14px !important;
  }
  section [class*="grid"],
  section [class*="Grid"] {
    row-gap: 14px !important;
    gap: 14px !important;
  }
}
@media (max-width: 640px) {
  section [class*="card"]:not(a):not(button),
  section [class*="Card"]:not(a):not(button),
  section article,
  section [class*="panel"],
  section [class*="Panel"] {
    padding: 12px !important;
    border-radius: 8px !important;
  }
  section [class*="card"] h3,
  section [class*="card"] h4 {
    margin-bottom: 3px !important;
    font-size: 0.9rem !important;
  }
  section [class*="card"] [class*="icon"],
  section [class*="card"] svg:first-child,
  section [class*="card"] img:first-child {
    max-width: 36px !important;
    max-height: 36px !important;
    margin-bottom: 3px !important;
  }
  section [class*="badge"] + [class*="badge"],
  section [class*="pill"] + [class*="pill"] {
    margin-top: 3px !important;
  }
  section [class*="grid"],
  section [class*="Grid"] {
    row-gap: 12px !important;
    gap: 12px !important;
  }
}

/* ============================================================
   ===== CARD COMPACT EXTRA END =====
   ロールバック: このブロックを削除すれば前回 STRONG 適用時の
   状態に戻ります。
   ============================================================ */




/* ============================================================
   ===== WIDTH FIX =====
   横幅崩壊対策：画面中央の細いカラムに押し込まれる現象を解消
   2026-05-12 追加
   ============================================================ */

/* 1. Tailwind container を画面幅に応じた最大幅に明示固定 */
.container {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. Fusion セクション(.fx-sec)を 1280px に揃える */
.fx-sec {
  max-width: 1280px !important;
}

/* 3. body/main に予期せぬ幅制限が当たっていれば解除 */
html, body {
  max-width: none !important;
  width: 100% !important;
  overflow-x: hidden;
}
main, main#main-content {
  max-width: none !important;
  width: 100% !important;
}

/* 4. section 自体に max-width が当たっていないことを確認 */
section {
  max-width: none !important;
  width: 100% !important;
}

/* ============================================================
   ===== WIDTH FIX END =====
   ロールバック: このブロックを削除すれば従来の Tailwind 標準
   コンテナ幅に戻ります
   ============================================================ */


/* ============================================================
   ===== FULLWIDTH SECTIONS FORCE FIX =====
   特定セクション/div だけ横長になる問題を、JS で対象に
   data 属性を付与した上で、CSS で強制中央寄せ・最大幅1200px。
   2026-05-12 追加（現状はdiv統合構造のためsection+div両対応）
   ============================================================ */

/* 対象要素: 横幅を画面いっぱい使ってもよい（背景色のため） */
[data-coreax-fix-width="true"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 対象要素直下のすべての主要コンテナを1200pxで中央寄せ */
[data-coreax-fix-width="true"] > *,
[data-coreax-fix-width="true"] > div {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 見出し・段落を中央寄せの普通サイズに戻す */
[data-coreax-fix-width="true"] > h2,
[data-coreax-fix-width="true"] h2.fx-reveal {
  text-align: center !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  color: inherit !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
[data-coreax-fix-width="true"] h3 {
  text-align: center !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}
[data-coreax-fix-width="true"] > p.lead,
[data-coreax-fix-width="true"] > p:first-of-type {
  text-align: center !important;
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.7 !important;
  margin-bottom: 32px !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* カードグリッド（複数カードを並べる枠）の処理 */
[data-coreax-fix-width="true"] [class*="grid"],
[data-coreax-fix-width="true"] [class*="Grid"],
[data-coreax-fix-width="true"] .fx-issues,
[data-coreax-fix-width="true"] .fx-features,
[data-coreax-fix-width="true"] .fx-industries,
[data-coreax-fix-width="true"] .fx-flow-wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* カード内のテキストサイズ復帰 */
[data-coreax-fix-width="true"] [class*="card"],
[data-coreax-fix-width="true"] article,
[data-coreax-fix-width="true"] .fx-issue,
[data-coreax-fix-width="true"] .fx-feature,
[data-coreax-fix-width="true"] .fx-industries .item,
[data-coreax-fix-width="true"] .fx-flow {
  font-size: 14px !important;
  text-align: left !important;
}
[data-coreax-fix-width="true"] [class*="card"] h3,
[data-coreax-fix-width="true"] [class*="card"] h4,
[data-coreax-fix-width="true"] article h3,
[data-coreax-fix-width="true"] article h4,
[data-coreax-fix-width="true"] .fx-issue .title,
[data-coreax-fix-width="true"] .fx-feature h3,
[data-coreax-fix-width="true"] .fx-industries .item .biz,
[data-coreax-fix-width="true"] .fx-flow h4 {
  text-align: left !important;
  font-size: 16px !important;
  margin-bottom: 8px !important;
}
[data-coreax-fix-width="true"] [class*="card"] p,
[data-coreax-fix-width="true"] article p,
[data-coreax-fix-width="true"] .fx-issue p,
[data-coreax-fix-width="true"] .fx-feature p,
[data-coreax-fix-width="true"] .fx-industries dd {
  text-align: left !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* レスポンシブ */
@media (max-width: 768px) {
  [data-coreax-fix-width="true"] > *,
  [data-coreax-fix-width="true"] > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [data-coreax-fix-width="true"] [class*="grid"],
  [data-coreax-fix-width="true"] [class*="Grid"],
  [data-coreax-fix-width="true"] .fx-issues,
  [data-coreax-fix-width="true"] .fx-features,
  [data-coreax-fix-width="true"] .fx-industries,
  [data-coreax-fix-width="true"] .fx-flow-wrap {
    grid-template-columns: 1fr !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   ===== FULLWIDTH SECTIONS FORCE FIX END =====
   ロールバック: このブロックを削除すれば前の状態に戻ります。
   ============================================================ */


/* ============================================================
   ===== CTA BANNER CENTER CONTENT =====
   CTAバナーは背景は全幅、中身は1200pxで中央寄せ
   2026-05-12 追加
   ============================================================ */

section[data-coreax-cta-banner="true"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 48px 0 !important;
  box-sizing: border-box !important;
}
section[data-coreax-cta-banner="true"] > * {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
section[data-coreax-cta-banner="true"] .fx-cta-banner,
section[data-coreax-cta-banner="true"] h3,
section[data-coreax-cta-banner="true"] p {
  text-align: center !important;
}
section[data-coreax-cta-banner="true"] .fx-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: center !important;
}
@media (max-width: 768px) {
  section[data-coreax-cta-banner="true"] > * {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  section[data-coreax-cta-banner="true"] .fx-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ============================================================
   ===== CTA BANNER CENTER CONTENT END =====
   ============================================================ */


/* ============================================================
   ===== SOLUTION DIV TEXT COLOR =====
   #solution セクション内の統合divの見出し・リード文を白色に
   (背景が濃紺系のため、暗色文字が見えない問題の修正)
   2026-05-13 追加
   ============================================================ */

/* H2 を白色に */
#solution-issues h2,
#solution-issues h2.fx-reveal,
#solution-capability h2,
#solution-capability h2.fx-reveal {
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* H2 内の <span class="accent"> を目立つ色に */
#solution-issues h2 .accent,
#solution-capability h2 .accent {
  color: #FFD68A !important;  /* 黄系で強調 */
}

/* リード文 (p.lead) を明るい色に */
#solution-issues p.lead,
#solution-issues p,
#solution-capability p.lead,
#solution-capability p {
  color: rgba(255,255,255,.92) !important;
}

/* カード内のテキストは元の色を維持（暗背景の上の白カードのため、card内は影響受けない）*/
#solution-issues [class*="card"] h3,
#solution-issues [class*="card"] h4,
#solution-issues [class*="card"] p,
#solution-issues .fx-issue .title,
#solution-issues .fx-issue .pain,
#solution-issues .fx-issue .gain,
#solution-capability [class*="card"] h3,
#solution-capability [class*="card"] h4,
#solution-capability [class*="card"] p,
#solution-capability .fx-feature h3,
#solution-capability .fx-feature .desc {
  color: inherit !important;
  text-shadow: none !important;
}
/* カード内の小タグ風要素も復帰 */
#solution-issues .fx-issue .title { color: var(--fx-dark, #0a2540) !important; }
#solution-issues .fx-issue .pain { color: #b04a14 !important; }
#solution-issues .fx-issue .gain { color: #006b48 !important; }
#solution-capability .fx-feature h3 { color: var(--fx-dark, #0a2540) !important; }
#solution-capability .fx-feature .desc { color: var(--fx-muted, #5a6478) !important; }
#solution-capability .fx-feature .tags span { color: var(--fx-primary, #0066ff) !important; }

/* ============================================================
   ===== SOLUTION DIV TEXT COLOR END =====
   ロールバック: このブロックを削除すれば元の色に戻ります
   ============================================================ */