body {
    background: linear-gradient(160deg, #e6f2e6, #c8d6b9);
}

.card {
    max-width: 400px;
    width: 100%;
}

.btn {
    background: linear-gradient(135deg, #7a4b1f, #b17a3f);
    color: #f5f5e6;
}

.btn:hover {
    color: blanchedalmond;
}

.login-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    /* ロゴと文字の隙間 */
    margin-bottom: 1.2rem;
}

.login-logo {
    width: 150px;
    object-fit: contain;
}

.login-title {
    position: relative;
    font-family: "Merriweather", "Noto Sans JP", serif;
}

.login-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, #3b7a00, #5ea338);
    border-radius: 2px;
}

/* モーダル全体の背景に松の画像を入れる */
#logoModal .modal-content {
    background-image: url('/images/matsu_bg.jpg');
    /* ←松の画像のパス */
    background-size: cover;
    /* 画像を全体にフィット */
    background-position: center;
    /* 中央寄せ */
    color: white;
    /* 文字色は白で読みやすく */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    /* 背景で文字が埋まらないように影を追加 */
    border-radius: 15px;
}