/* ランディングページ専用スタイル */
:root{
    --gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body{
    padding:0;
}

.hero{
    background:var(--gradient);
    color:#fff;
    padding:60px 24px;
    text-align:center;
    margin-bottom:40px;
}

.hero h1{
    font-size:42px;
    margin-bottom:16px;
    font-weight:700;
}

.hero p{
    font-size:18px;
    opacity:0.95;
    max-width:600px;
    margin:0 auto;
}

.wrapper{
    padding:0 24px 60px;
}

.card{
    margin-bottom:24px;
}

h2{
    font-size:24px;
    color:var(--primary);
    margin-bottom:20px;
    padding-bottom:10px;
    border-bottom:3px solid var(--accent);
}

h3{
    font-size:18px;
    color:#34495e;
    margin-top:20px;
    margin-bottom:12px;
}

p{
    font-size:15px;
    margin-bottom:12px;
}

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:20px;
    margin-top:24px;
}

.feature{
    background:#f8f9fa;
    padding:20px;
    border-radius:8px;
    border-left:4px solid var(--accent);
}

.feature h3{
    font-size:16px;
    margin-top:0;
    color:var(--primary);
}

.feature p{
    font-size:14px;
    margin-bottom:0;
}

.cta{
    text-align:center;
    margin-top:40px;
    padding:30px;
    background:#f6fbff;
    border-radius:var(--radius);
}

.cta p{
    font-size:16px;
    margin-bottom:20px;
}

.links{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
}

.btn{
    display:inline-block;
    padding:12px 24px;
    background:var(--accent);
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    font-weight:500;
    transition:background 0.3s;
}

.btn:hover{
    background:#2980b9;
    text-decoration:none;
}

.btn-secondary{
    background:transparent;
    color:var(--accent);
    border:2px solid var(--accent);
}

.btn-secondary:hover{
    background:var(--accent);
    color:#fff;
}

.footer{
    text-align:center;
    padding:40px 24px;
    color:var(--muted);
    font-size:14px;
}

.footer a{
    margin:0 8px;
}

ul{
    margin-left:20px;
    margin-bottom:12px;
}

li{
    font-size:15px;
    margin-bottom:8px;
}

@media (max-width:700px){
    .hero h1{
        font-size:32px;
    }
    
    .hero p{
        font-size:16px;
    }
    
    h2{
        font-size:20px;
    }
    
    .features{
        grid-template-columns:1fr;
    }
    
    .links{
        flex-direction:column;
    }
    
    .btn{
        width:100%;
    }
}