/* カスタムラジオボタンのスタイル */
.radio-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ラジオボタンの列を中央揃え */
.col-3 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-radio {
    display: none;
}

/* 新しいカスタムラジオボタンのスタイル（admin-save-file用） */
.form-check-input.custom-radio + .form-check-label::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 8px;
    vertical-align: middle;
    transition: all 0.3s ease;
}

/* 選択状態のスタイル */
.form-check-input.custom-radio:checked + .form-check-label::before {
    background-color: #6495ed;
    border-color: #6495ed;
}

.form-check-input.custom-radio:checked + .form-check-label::after {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

/* ラベルを相対位置に */
.form-check-label {
    position: relative;
    cursor: pointer;
    font-size: 18px;
    color: #333;
}

/* ホバー効果 */
.form-check-input.custom-radio + .form-check-label:hover::before {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* フォーカス効果 */
.form-check-input.custom-radio:focus + .form-check-label::before {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* 元のradio-label-adminスタイル（既存のコードを保持） */
.radio + .radio-label-admin {
    width: 50px;
    height: 50px;
    border-color: #b3e6fc; 
    background-color: #f8f9fa;
}

.radio-label-admin {
    display: flex;
    width: 42px;
    height: 42px;
    border: 3px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.radio-label {
    display: inline-block;
    width: 42px;
    height: 42px;
    border: 3px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* 分類1（当てはまる）のラジオボタン */
.radio-left1 + .radio-label {
    width: 50px;
    height: 50px;
    border-color: #b3e6fc; 
    background-color: #f8f9fa;
}

.radio-left1:checked + .radio-label {
    background-color: #b3e6fc;
    border-color: #b3e6fc;
}

.radio-middle-left1 + .radio-label {
    border-color: #6dc3fc; /* 中程度の青 */
    background-color: #f8f9fa;
}

.radio-middle-left1:checked + .radio-label {
    background-color: #6dc3fc;
    border-color: #6dc3fc;
}

.radio-middle-right1 + .radio-label {
    border-color: #6fa5f5; /* 濃い青 */
    background-color: #f8f9fa;
}

.radio-middle-right1:checked + .radio-label {
    background-color: #6fa5f5;
    border-color: #6fa5f5;
}

.radio-right1 + .radio-label {
    width: 50px;
    height: 50px;
    border-color: #4e76fc; /* 最も濃い青 */
    background-color: #f8f9fa;
}

.radio-right1:checked + .radio-label {
    background-color: #4e76fc;
    border-color: #4e76fc;
}

/* 分類2（ティールグリーン）のラジオボタン */
.radio-left2 + .radio-label {
    width: 50px;
    height: 50px;
    border-color: #b2f0e4 !important; /* パステルティール */
    background-color: #f8f9fa;
}

.radio-left2:checked + .radio-label {
    background-color: #b2f0e4 !important;
    border-color: #b2f0e4 !important;
}

.radio-middle-left2 + .radio-label {
    border-color: #66d9c5 !important; /* 中間ティール */
    background-color: #f8f9fa;
}

.radio-middle-left2:checked + .radio-label {
    background-color: #66d9c5 !important;
    border-color: #66d9c5 !important;
}

.radio-middle-right2 + .radio-label {
    border-color: #40c4aa !important; /* 基準カラー */
    background-color: #f8f9fa;
}

.radio-middle-right2:checked + .radio-label {
    background-color: #40c4aa !important;
    border-color: #40c4aa !important;
}

.radio-right2 + .radio-label {
    width: 50px;
    height: 50px;
    border-color: #2a8d76 !important; /* 濃いティール */
    background-color: #f8f9fa;
}

.radio-right2:checked + .radio-label {
    background-color: #2a8d76 !important;
    border-color: #2a8d76 !important;
}

/* 分類3（アンバー）のラジオボタン */
.radio-left3 + .radio-label {
    width: 50px;
    height: 50px;
    border-color: #ffe4b3 !important; /* パステルアンバー */
    background-color: #f8f9fa;
}

.radio-left3:checked + .radio-label {
    background-color: #ffe4b3 !important;
    border-color: #ffe4b3 !important;
}

.radio-middle-left3 + .radio-label {
    border-color: #ffcc80 !important; /* 中間アンバー */
    background-color: #f8f9fa;
}

.radio-middle-left3:checked + .radio-label {
    background-color: #ffcc80 !important;
    border-color: #ffcc80 !important;
}

.radio-middle-right3 + .radio-label {
    border-color: #ffb74d !important; /* 基準カラー */
    background-color: #f8f9fa;
}

.radio-middle-right3:checked + .radio-label {
    background-color: #ffb74d !important;
    border-color: #ffb74d !important;
}

.radio-right3 + .radio-label {
    width: 50px;
    height: 50px;
    border-color: #e68a00 !important; /* 濃いアンバー */
    background-color: #f8f9fa;
}

.radio-right3:checked + .radio-label {
    background-color: #e68a00 !important;
    border-color: #e68a00 !important;
}

/* 分類4（ライラックパープル）のラジオボタン */
.radio-left4 + .radio-label {
    width: 50px;
    height: 50px;
    border-color: #e0d4f7 !important; /* パステルライラック */
    background-color: #f8f9fa;
}

.radio-left4:checked + .radio-label {
    background-color: #e0d4f7 !important;
    border-color: #e0d4f7 !important;
}

.radio-middle-left4 + .radio-label {
    border-color: #c5a9f2 !important; /* 中間ライラック */
    background-color: #f8f9fa;
}

.radio-middle-left4:checked + .radio-label {
    background-color: #c5a9f2 !important;
    border-color: #c5a9f2 !important;
}

.radio-middle-right4 + .radio-label {
    border-color: #9575cd !important; /* 基準カラー */
    background-color: #f8f9fa;
}

.radio-middle-right4:checked + .radio-label {
    background-color: #9575cd !important;
    border-color: #9575cd !important;
}

.radio-right4 + .radio-label {
    width: 50px;
    height: 50px;
    border-color: #6b4fa3 !important; /* 濃いライラック */
    background-color: #f8f9fa;
}

.radio-right4:checked + .radio-label {
    background-color: #6b4fa3 !important;
    border-color: #6b4fa3 !important;
}


/* ホバー効果 */
.radio-label:hover {
    transform: scale(1.1);
}

/* フォーカス効果 */
.custom-radio:focus + .radio-label {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    /* 新しいカスタムラジオボタンのレスポンシブ対応 */
    .form-check-input.custom-radio + .form-check-label::before {
        width: 30px;
        height: 30px;
    }

    .form-check-input.custom-radio:checked + .form-check-label::after {
        font-size: 14px;
        left: 3px;
    }

    .form-check-label {
        font-size: 14px;
    }

    /* 元のラジオボタンのレスポンシブ対応 */
    .radio-left1 + .radio-label {
        width: 40px;
        height: 40px;
    }

    .radio-middle-left1 + .radio-label {
        width: 32px;
        height: 32px;
    }

    .radio-middle-right1 + .radio-label {
        width: 32px;
        height: 32px;
    }

    .radio-right1 + .radio-label {
        width: 40px;
        height: 40px;
    }

    .radio-left2 + .radio-label {
        width: 40px;
        height: 40px;
    }

    .radio-middle-left2 + .radio-label {
        width: 32px;
        height: 32px;
    }

    .radio-middle-right2 + .radio-label {
        width: 32px;
        height: 32px;
    }

    .radio-right2 + .radio-label {
        width: 40px;
        height: 40px;
    }

    .radio-left3 + .radio-label {
        width: 40px;
        height: 40px;
    }

    .radio-middle-left3 + .radio-label {
        width: 32px;
        height: 32px;
    }

    .radio-middle-right3 + .radio-label {
        width: 32px;
        height: 32px;
    }

    .radio-right3 + .radio-label {
        width: 40px;
        height: 40px;
    }

    .radio-left4 + .radio-label {
        width: 40px;
        height: 40px;
    }

    .radio-middle-left4 + .radio-label {
        width: 32px;
        height: 32px;
    }

    .radio-middle-right4 + .radio-label {
        width: 32px;
        height: 32px;
    }

    .radio-right4 + .radio-label {
        width: 40px;
        height: 40px;
    }

    /* モバイルでも中央揃えを維持 */
    .col-3 {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}