* {  
    box-sizing: border-box;  
}  

body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    min-height: 100vh;  
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);  
    padding: 20px;  
}  

.container {  
    text-align: center;  
    background: linear-gradient(to bottom right, #ffffff, #e9ecef);  
    padding: 40px;  
    border-radius: 15px;  
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);  
    max-width: 450px;  
    width: 90%;  
    position: relative;  
    overflow: hidden;  
}  

.container::before {  
    content: "";  
    position: absolute;  
    top: -50px;  
    left: -50px;  
    width: 100px;  
    height: 100px;  
    background: radial-gradient(circle, rgba(23, 162, 184, 0.2), transparent);  
    border-radius: 50%;  
    z-index: 0;  
}  

.container::after {  
    content: "";  
    position: absolute;  
    bottom: -50px;  
    right: -50px;  
    width: 100px;  
    height: 100px;  
    background: radial-gradient(circle, rgba(0, 123, 255, 0.2), transparent);  
    border-radius: 50%;  
    z-index: 0;  
}  

h1 {  
    font-size: 2.5em;  
    color: #343a40;  
    margin: 10px 0;  
    position: relative;  
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);  
}  

p {  
    color: #6c757d;  
    margin-bottom: 20px;  
    line-height: 1.6;  
}  

#language-switch {  
    display: flex;  
    justify-content: center;  
    flex-wrap: wrap;  
    margin-bottom: 20px;  
}  

.lang-button {  
    background-color: #007bff;  
    color: white;  
    border: none;  
    padding: 10px 15px;  
    margin: 5px;  
    border-radius: 30px;  
    cursor: pointer;  
    transition: all 0.3s;  
    font-weight: bold;  
    flex: 0 1 auto;  
    min-width: 100px;  
    position: relative;  
    overflow: hidden;  
}  

.lang-button:hover {  
    background-color: #0056b3;  
    transform: scale(1.05);  
    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.4);  
}  

.lang-button.active {  
    background-color: #0056b3;  
    box-shadow: 0 0 10px rgba(0, 86, 179, 0.6);  
}  

.lang-button:after {  
    content: "";  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    width: 0;  
    height: 0;  
    background: rgba(255, 255, 255, 0.3);  
    border-radius: 50%;  
    transform: translate(-50%, -50%);  
    opacity: 0;  
}  

.lang-button:active:after {  
    width: 200px;  
    height: 200px;  
    opacity: 1;  
    transition: all 0.6s;  
}  

.link-buttons {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    margin-top: 20px;  
    position: relative;  
    z-index: 1;  
}  

.link-button {  
    display: block;  
    background: linear-gradient(to right, #17a2b8, #20c997);  
    color: white;  
    text-decoration: none;  
    padding: 14px 20px;  
    margin: 10px 0;  
    border-radius: 8px;  
    width: 100%;  
    max-width: 300px;  
    transition: all 0.3s;  
    font-size: 1.1em;  
    position: relative;  
    overflow: hidden;  
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
}  

.link-button:hover {  
    background: linear-gradient(to right, #138496, #19b389);  
    transform: translateY(-3px);  
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);  
}  

.link-button:active {  
    transform: translateY(-1px);  
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);  
}  

/* リップルエフェクト */  
.link-button:after {  
    content: "";  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    width: 0;  
    height: 0;  
    background: rgba(255, 255, 255, 0.3);  
    border-radius: 50%;  
    transform: translate(-50%, -50%);  
    opacity: 0;  
}  

.link-button:active:after {  
    width: 300px;  
    height: 300px;  
    opacity: 1;  
    transition: all 0.6s;  
}  

/* レスポンシブデザイン */  
@media (max-width: 600px) {  
    h1 {  
        font-size: 1.8em;  
    }  

    .container {  
        padding: 25px 15px;  
    }  

    .link-button {  
        font-size: 0.95em;  
        padding: 12px 15px;  
    }  
    
    /* モバイルでのスクロール対応 */  
    body {  
        align-items: flex-start;  
        padding-top: 40px;  
    }  
}  

/* タブレット対応 */  
@media (min-width: 601px) and (max-width: 900px) {  
    .container {  
        max-width: 550px;  
    }  
    
    .link-button {  
        max-width: 400px;  
    }  
}  

/* ダークモード対応 */  
@media (prefers-color-scheme: dark) {  
    body {  
        background: linear-gradient(135deg, #2c3e50, #1a1a2e);  
    }  
    
    .container {  
        background: linear-gradient(to bottom right, #2c3e50, #1a1a2e);  
        color: #f8f9fa;  
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);  
    }  
    
    h1 {  
        color: #f8f9fa;  
    }  
    
    p {  
        color: #ced4da;  
    }  
}