/* ==========================================
   FIRE詳細シミュレーター
   モバイル最適化
   PC版には影響なし
   ========================================== */

@media (max-width: 580px) {

  /* ----------------------------------
     ページ全体
     ---------------------------------- */

  main {
    padding: 0 8px 20px !important;
  }

  header,
  nav.site-nav,
  main {
    max-width: 420px;
    margin: 0 auto;
  }

  /* ----------------------------------
     レイアウト
     ---------------------------------- */

  .layout,
  .simple-grid {
    display: block !important;
  }

  .stack,
  .result,
  .wide {
    width: 100% !important;
    max-width: 100% !important;
  }

  .stack {
    gap: 8px !important;
  }

  /* ----------------------------------
     カード
     ---------------------------------- */

  .card {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  /* ----------------------------------
     タイトル
     ---------------------------------- */

  .head {
    padding: 8px !important;
  }

  .head h2 {
    font-size: 0.85rem !important;
    margin: 0 !important;
  }

  .head p {
    display: none !important;
  }

  /* ----------------------------------
     入力エリア
     ---------------------------------- */

  .fields,
  .fields.three {
    padding: 6px !important;
    gap: 4px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .fields > div,
  #idecoFields > div,
  #loanFields > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 4px !important;
    margin-bottom: 2px !important;
  }

  /* ----------------------------------
     ラベル
     ---------------------------------- */

  .label {
    width: calc(100% - 90px);

    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  /* ----------------------------------
     入力欄
     ---------------------------------- */

  .iw {
    flex: 0 0 80px;
    width: 80px;
  }

  .iw input,
  .iw select {

    width: 80px !important;

    min-width: 80px !important;
    max-width: 80px !important;

    height: 24px !important;

    font-size: 0.75rem !important;

    padding: 0 22px 0 4px !important;
  }

  .unit {
    font-size: 0.55rem !important;
    right: 4px !important;
  }

  /* ----------------------------------
     トグル
     ---------------------------------- */

  .toggle-wrap {
    padding: 6px !important;
  }

  .toggle-wrap strong {
    font-size: 0.75rem;
  }

  .slider {
    width: 42px !important;
    height: 22px !important;
  }

  .slider:before {
    width: 16px !important;
    height: 16px !important;
  }

  /* ----------------------------------
     説明文
     ---------------------------------- */

  .note {
    padding: 4px 8px !important;
    font-size: 0.6rem !important;
    line-height: 1.25 !important;
  }

  /* ----------------------------------
     ボタン
     ---------------------------------- */

  .actions {
    padding: 6px !important;

    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .actions button {
    width: 100% !important;
  }

  /* ----------------------------------
     結果カード
     ---------------------------------- */

  .result {
    position: static !important;
    margin-top: 8px !important;
  }

  .hero {
    padding: 10px !important;
  }

  .big {
    font-size: 1.5rem !important;
  }

  .metrics {
    grid-template-columns: 1fr 1fr !important;
  }

  .metric {
    padding: 8px !important;
  }

  /* ----------------------------------
     KPI
     ---------------------------------- */

  .insight-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* ------------------------