body {
    font-family: sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    color: #333;
}

.container {
    max-width: 450px;
    margin: 0 auto;
    background: white;
    min-height: 100vh;
    padding: 20px;
}

header { text-align: center; padding: 20px 0; }
.date-badge { background: #333; color: #fff; font-size: 0.75rem; padding: 4px 10px; border-radius: 4px; }
.main-points { color: #f30; font-size: 2.8rem; font-weight: bold; }

/* カードスタイル */
.action-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
}

.section-title { font-size: 1rem; color: #002b5b; border-left: 4px solid #ffcc00; padding-left: 8px; margin-bottom: 10px; text-align: left; }
.small-info { font-size: 0.8rem; color: #666; margin-bottom: 12px; text-align: left; }

/* ボタン・コピー機能 */
.btn-primary {
    display: block; background: #ffcc00; color: #333; text-decoration: none; 
    font-weight: bold; padding: 14px; border-radius: 8px; box-shadow: 0 3px 0 #ccaa00;
}

.copy-box { display: flex; background: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
#referralCode { flex: 1; border: none; background: transparent; padding: 10px; font-size: 1.1rem; text-align: center; font-weight: bold; width: 50%; }
#copyBtn { background: #333; color: white; border: none; padding: 10px 15px; cursor: pointer; font-weight: bold; }
#copyBtn.success { background: #28a745; }
.copy-message { display: none; color: #28a745; font-size: 0.8rem; margin-top: 5px; font-weight: bold; }

/* 【修正】崩れにくいリストレイアウト */
.point-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 項目間の隙間 */
}

.point-row {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
}

.point-row.destaque {
    background: #fff9e6;
    border: 1px solid #ffcc00;
}

.point-left {
    flex: 0 0 90px; /* 幅を固定（崩れ防止） */
    border-right: 1px solid #eee;
    text-align: center;
}

.point-left .val { font-size: 1.2rem; font-weight: bold; color: #f30; }
.point-left .unit { font-size: 0.7rem; color: #f30; margin-left: 2px; }

.point-right {
    flex: 1; /* 残りの幅をすべて使う */
    padding-left: 12px;
}

.point-right strong { font-size: 0.85rem; display: block; margin-bottom: 2px; }
.point-right p { font-size: 0.75rem; color: #777; margin: 0; line-height: 1.3; }

footer { text-align: center; font-size: 0.7rem; color: #999; margin-top: 30px; }