@charset "UTF-8";
/* 基本設定 */
:root {
  --primary-color: #E67E45;
  /*見出し・アクセント「ふるさと納税」「地域支援」の温かみを強調します。*/
  --accent-color: #5D4B8E;
  /*サイト内で最も目立ち、クリックを誘発します。*/
  --sub-accent-color: #80B1C5;
  /*hover装飾用　誠実さとクリーンな印象をプラスします*/
  --bg-color: #F7F6F5;
  /*画像のコンクリート壁と自然に繋がります。*/
  --bark-bg-color: #E8E6E3;
  --text-color: #2D2926;
  --bottom-color: #4a3830;
  --gradation-color: linear-gradient(90deg, #80B1C5 0%, #E67E45 100%);
}

.simulation-container {
    max-width: 640px;
    margin: 40px auto;
    padding: 0 20px 80px;
}

/* ヘッダー */
.page-header {
    text-align: center;
    margin-bottom: 30px;
}

/* 入力カード */
.input-card {
    background: #fff;
    padding: 30px;
    border: 1px solid #E0DED9;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-radius: 10px;
}

.input-item {
    margin-bottom: 25px;
}

.input-item label {
    display: block;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 10px;
}

.field-row {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px;
}

.field-row input[type="number"] {
    border: none;
    font-size: 24px;
    width: 100%;
    outline: none;
    font-weight: 500;
}

.unit {
    font-size: 18px;
    margin-left: 10px;
}

select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    font-size: 16px;
    background-color: #fff;
    cursor: pointer;
}

/* ボタン */
.calc-btn {
    width: 100%;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 18px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 4px;
}

.calc-btn:hover {
    background-color: var(--primary-color);
}

/* 結果表示 */
.result-section {
    margin-top: 30px;
    animation: fadeIn 0.5s ease-out;
}

.result-card {
    background: #fff;
    border: 2px solid var(--primary-color);
    padding: 30px;
    text-align: center;
}

.result-label {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
}

.amount-wrap {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.amount {
    font-size: 48px;
    font-weight: bold;
    margin: 0 5px;
}

.currency {
    font-size: 18px;
    font-weight: bold;
}

.divider {
    height: 1px;
    background-color: #E0DED9;
    margin: 20px 0;
}

.disclaimer {
    font-size: 12px;
    color: #888;
    text-align: left;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 詳細用 */

    .input-section h3 {
      font-size: 18px;
      border-left: 5px solid var(--primary-color);
      margin-top: 30px;
      background: #fdf2f2;
      padding: 10px 0 10px 10px;
      margin-bottom: 20px;
    }
        .input-group {
      margin-bottom: 20px;
    }
        label {
      display: block;
      font-weight: bold;
      margin-bottom: 5px;
      font-size: 14px;
    }
        input[type="number"],
    select {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 16px;
    }

    .help-text {
      font-size: 11px;
      color: #777;
      margin-top: 5px;
    }
    /* 家族追加セクション */
    .family-member-row {
      display: flex;
      gap: 10px;
      background: #f9f9f9;
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      align-items: center;
    }

    .btn-add {
      background: #fff;
      border: 1px dashed var(--primary-color);
      color: var(--primary);
      padding: 10px;
      width: 100%;
      cursor: pointer;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .btn-del {
      background: #ddd;
      border: none;
      padding: 10px;
      cursor: pointer;
      border-radius: 4px;
    }