@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

body {
    font-family: 'Noto Sans JP', sans-serif;
    background: linear-gradient(135deg, #1e3a8a, #4c1d95);
    background-attachment: fixed;
    color: #f8fafc; /* 明るい文字色 */
}

h1, h2, h3, h4, h5, h6 {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- Glassmorphism Effect --- */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* --- Navigation Bar --- */
.navbar.bg-dark {
    background: rgba(0, 0, 0, 0.5) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Cards and Jumbotron --- */
.card, .p-5.mb-4 {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px_30px rgba(0, 0, 0, 0.1);
    border-radius: 1rem; /* 角を丸く */
}

.card-header {
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.card-body, .card-header, .card-footer {
    color: #f8fafc;
}

/* --- Forms --- */
.form-control {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}

.form-control:focus {
    background-color: rgba(0,0,0,0.3);
    border-color: #a5b4fc;
    box-shadow: 0 0 0 0.25rem rgba(165, 180, 252, 0.25);
    color: #fff;
}

.form-control::placeholder {
    color: #9ca3af;
}

/* --- Links and Buttons --- */
a {
    color: #a5b4fc;
}
a:hover {
    color: #c7d2fe;
}

.list-group-item {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f8fafc;
}
.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

/* Jumbotronの文字色を調整 */
.p-5.mb-4 p {
    color: #e2e8f0;
}