貸借対照表の幅拡張実装計画

現状の問題

/financial-quiz/proportional-animationページで、貸借対照表（BS）と損益計算書（P/L）が並んで表示されているが、左右に余白がある。

現在の設定

要件

• 損益計算書（P/L）の幅: 変更しない（100px維持）
• 貸借対照表（BS）の幅: 水平方向の余白を有効活用して拡張

実装アプローチ

案1: BSを flex-grow で拡張（推奨）

.statements-wrapper 内で BS を flex: 1 にして残りスペースを埋める。

/* ProportionalFinancialStatementsAnimated.vue */

.statements-wrapper {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  width: 100%;  /* 追加: 親要素いっぱいに広げる */
}

.balance-sheet-container {
  /* width: 380px; を削除 */
  flex: 1;  /* 追加: 残りスペースを埋める */
  min-width: 300px;  /* 追加: 最小幅を確保 */
  max-width: 600px;  /* 追加: 最大幅を制限（任意） */
}

.pl-body {
  width: 100px;  /* 維持 */
  flex-shrink: 0;  /* 追加: P/Lは縮まないように */
}

メリット:

• シンプルな変更
• レスポンシブに対応しやすい
• 親コンテナのサイズに応じて自動調整

デメリット:

• 極端に広いコンテナでは BS が間延びする可能性（max-width で制御）

案2: 親から幅を指定（Props追加）

コンポーネントに bsWidth props を追加して、ページ側から制御。

<!-- ProportionalFinancialStatementsAnimated.vue -->
<script setup>
const props = withDefaults(defineProps<{
  // ...既存props
  bsWidth?: string  // 例: '500px', '100%', 'auto'
}>(), {
  bsWidth: '380px'
})
</script>

<style>
.balance-sheet-container {
  width: v-bind('props.bsWidth');
}
</style>

<!-- proportional-animation.vue での使用 -->
<ProportionalFinancialStatementsAnimated
  :bs-width="'100%'"
  ...
/>

メリット:

• ページごとに柔軟に調整可能
• 既存ページへの影響なし（デフォルト値で維持）

デメリット:

• Props が増える
• 実装がやや複雑

案3: CSS変数で制御

.balance-sheet-container {
  width: var(--bs-width, 380px);
}

ページ側で CSS 変数を上書き。

推奨実装（案1ベース）

変更ファイル

1. apps/web/app/components/financial-quiz/ProportionalFinancialStatementsAnimated.vue

変更内容

/* .statements-wrapper */
 .statements-wrapper {
   display: flex;
   gap: 1rem;
   align-items: flex-end;
   box-sizing: border-box;
+  width: 100%;
 }

/* .balance-sheet-container */
 .balance-sheet-container {
   display: flex;
   border: 2px solid #333;
   background: #fff;
   font-family: sans-serif;
-  width: 380px;
+  flex: 1;
+  min-width: 300px;
+  max-width: 550px;
   box-sizing: border-box;
   overflow: hidden;
   transition: height 0.5s ease-out;
 }

/* .pl-body */
 .pl-body {
   display: flex;
   border: 2px solid #333;
   background: #fff;
   width: 100px;
+  flex-shrink: 0;
 }

レスポンシブ対応

既存のメディアクエリは width: calc(75% - 0.25rem) などで対応しているが、flex: 1 を使う場合は以下に変更:

@media (max-width: 768px) {
  .balance-sheet-container {
    flex: 3;  /* 75% 相当 */
    min-width: 200px;
    max-width: none;
  }

  .pl-body {
    flex: 1;  /* 25% 相当 */
    width: auto;
    min-width: 60px;
  }
}

検証項目

• デスクトップ（1920px以上）で BS が適切に拡張されるか
• タブレット（768px-1400px）で崩れないか
• モバイル（768px以下）で既存の比率が維持されるか
• エクスポート機能（1920x1080固定サイズ）に影響がないか
• 複数期間のアニメーションで表示が崩れないか

注意点

1. エクスポート用コンテナ: .export-container 内の ProportionalFinancialStatementsAnimated は固定サイズ（1920x1080）で使用されるため、別途調整が必要な場合あり
2. max-width の値: 550px は目安。実際の見栄えを確認して調整
3. 他ページへの影響: このコンポーネントを使用している他のページ（proportional-animation-qqq.vue など）の表示も確認が必要