/* レイアウト修正 - 番号BOXを表示し、PC版のコンテンツを中央寄せ */

/* 番号BOXを強制表示 - v6の非表示設定を上書き */
div.w-20.h-20.flex.items-center.justify-center.bg-\[#8A9A5B\],
div[class*="w-20"][class*="h-20"][class*="bg-"],
div[class*="flex-shrink-0"][class*="text-3xl"],
div.w-6.h-6.flex.items-center.justify-center.bg-\[#8A9A5B\],
[class*="w-20"][class*="h-20"],
[class*="w-6"][class*="h-6"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
}

/* PC版ã®ã¿é©ç"¨ (769px以上) */
@media (min-width: 769px) {
  /* 実績カードの数字のはみ出しを修正 */
  div[class*="border-l-4"] {
    overflow: hidden;
  }
  
  div[class*="border-l-4"] h3,
  div[class*="border-l-4"] p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  
  /* 実績カードの数字サイズを調整 */
  div[class*="border-l-4"] h3[class*="text-"] {
    font-size: 1.25rem !important;
    line-height: 1.2;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
  }
  
  /* 実績カードのパディングと幅を調整 */
  div[class*="border-l-4"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-width: 320px !important;
    max-width: 350px !important;
    flex: 0 0 320px !important;
  }
  
  /* 実績カードの親要素（グリッド）を調整 */
  div.grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    justify-items: center !important;
  }
  
  /* コンテンツ全体の最大幅を制限 */
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* メインコンテンツの幅を大幅に狭くして中央寄せ */
  #root {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
  }
  
  /* セクションの幅を制限して中央寄せ */
  section {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* 番号BOXセクション(01, 02, 03)を縦並びに */
  div.flex.items-start.gap-8,
  div.flex.items-start.gap-3 {
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 800px !important;
    margin: 0 auto !important;
  }
  
  /* コンテンツ部分の幅調整 */
  div.flex.items-start.gap-8 > div,
  div.flex.items-start.gap-3 > div {
    width: 100%;
  }
  
  /* グリッドレイアウトも中央寄せ */
  [class*="grid"] {
    max-width: 900px !important;
    margin: 0 auto !important;
  }
  
  /* 複利シミュレーションのグリッド内要素は幅制限を解除（最優先） */
  [data-compound-interest-section] [class*="grid"] > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* すべてのグリッド内要素の幅制限を解除（フォールバック） */
  [class*="grid"] > * {
    max-width: none !important;
  }
  
  /* カードやコンテンツブロックも中央寄せ（ただしグリッドの子要素は除外） */
  [class*="bg-white"]:not([class*="grid"] > *),
  [class*="bg-[#"]:not([class*="grid"] > *) {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* 緑のボーダーがある白いボックス（縦長になっているセクション）の幅を広げる */
  section > div[class*="bg-white"][class*="border-l-4"] {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* 緑のボーダーがあるセクション全体の幅も調整 */
  section:has(> div[class*="border-l-4"][class*="bg-white"]) {
    max-width: 900px !important;
  }
  
  /* より具体的なセレクタ: 緑ボーダー(#8A9A5B)の白背景・ベージュ背景ボックス */
  div[class*="border-l-4"][class*="bg-white"],
  div[class*="border-l-4"][class*="bg-[#FCFBF9]"],
  div[class*="border-l-4"][class*="bg-[#F"],
  div[class*="border-l-8"][class*="bg-white"],
  div[class*="border-l-8"][class*="bg-[#FCFBF9]"],
  div[class*="border-l-8"][class*="bg-[#F"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* モバイル版 (768px以下) */
@media (max-width: 768px) {
  /* 番号BOXセクションを縦並びに */
  div.flex.items-start.gap-8,
  div.flex.items-start.gap-3 {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
}