/* フロントページ共通CSS */
:root {
    --bs-body-color: #222;
}

/* モーダルの境界線を削除 */
.modal-content .modal-header {
    border-bottom: none;
}
.modal-content .modal-footer {
    border-top: none;
}


/* モーダルのエラーメッセージカスタマイズ */
.modal-content .alert-danger {
    border: none;
}
.modal-content .alert {
    margin-bottom: 0;
}

.centered-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px;
}

.error-message {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 16px;
    margin: 24px 0;
    color: #721c24;
    text-align: center;
    font-weight: bold;
}

.alert-message {
    background: #ffe9eb;
    border: 2px solid #ce380e;
    border-radius: 10px;
    padding: 14px 24px;
    margin: 24px 0;
    color: #ce380e;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.info-message {
    background: #ffffff;
    border: 2px solid #37dd5d;
    border-radius: 10px;
    padding: 14px 24px;
    margin: 24px 0;
    color: #37dd5d;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-message::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #37dd5d;
    color: #ffffff;
}

body {
    color: #222;
}