body {
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to right, #74ebd5, #ACB6E5, #74ebd5, #ACB6E5); /* Wider gradient for animation */
    background-size: 400% 400%;
    animation: animatedGradient 15s ease infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    color: #333;
}

@keyframes animatedGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

header {
    text-align: center;
    margin-bottom: 20px;
}

#profilePic {
    width: 80px;  /* サイズを小さくし、円形にするため幅と高さを同じに */
    height: 80px; /* サイズを小さくし、円形にするため幅と高さを同じに */
    border-radius: 50%; /* Make it circular */
    border: 3px solid #fff;
    object-fit: contain; /* アスペクト比を維持し、要素内に全体を収める */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin-bottom: 10px;
    background-color: #fff; /* 円の内部を白くする */
}

header h1 {
    font-size: 1.8em;
    color: #fff; /* White text for better contrast on gradient */
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

main {
    width: 100%;
    max-width: 600px; /* Max width for the links container */
    padding: 0 20px 30px; /* Padding: top, right/left, bottom */
}

ul {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

li {
    margin-bottom: 15px; /* Space between link buttons */
}

li a {
    display: block; /* Make the whole area clickable */
    width: 80%; /* Width of buttons */
    max-width: 480px; /* Max width of buttons - INCREASED */
    margin: 0 auto; /* Center buttons */
    padding: 15px;
    background-color: #fff;
    color: #333;
    text-decoration: none;
    border-radius: 25px; /* Rounded corners */
    text-align: center;
    font-size: 1em;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

li a:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

@media (max-width: 600px) {
    #profilePic {
        width: 60px; /* モバイルではさらに小さく */
        height: 60px; /* モバイルではさらに小さく */
        /* object-fit: contain; は継承されます */
    }

    header h1 {
        font-size: 1.5em; /* Slightly smaller heading on mobile */
    }

    li a {
        width: 90%; /* Make buttons wider on small screens */
        padding: 12px; /* Adjust padding for smaller buttons */
        font-size: 0.95em; /* Slightly smaller font for links */
    }

    main {
        padding: 0 10px 30px; /* Reduce L/R padding, maintain bottom padding */
    }
}

/* Styling for the prioritized link */
#priority-link a {
    background-color: #ffc107; /* A distinct yellow/gold color */
    color: #333; /* Dark text for contrast */
    font-weight: bold;
    border: 2px solid #e0a800; /* A slightly darker border */
    animation: pulse 2s infinite; /* Apply the pulse animation */
}

#priority-link a:hover {
    background-color: #e0a800; /* Darken on hover */
    box-shadow: 0 8px 12px rgba(0,0,0,0.2); /* Enhance shadow on hover */
    transform: translateY(-3px); /* Slightly more lift */
}

/* Optional: Add a subtle pulsing animation to the priority link's border or shadow */
@keyframes pulse {
    0% {
        box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    70% {
        box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.villa-link a {
    color: #2E7D32; /* ヴィラリンクの文字色 (緑系) */
}


.neue-link a {
    color: #C62828; /* ノイエリンクの文字色 (赤系) */
}