/* 共通スタイル - CSS変数と基本スタイル */
:root{
    --bg:#fdf8e7;
    --card:#ffffff;
    --primary:#2c3e50;
    --accent:#3498db;
    --muted:#7f8c8d;
    --text:#333;
    --radius:12px;
    --pad:36px;
    --maxw:900px;
    --line:1.8;
    --border:#ecf0f1;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html,body{
    height:100%;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:var(--line);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{
    color:var(--accent);
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

.wrapper{
    max-width:var(--maxw);
    margin:0 auto;
}

.card{
    background:var(--card);
    padding:var(--pad);
    border-radius:var(--radius);
    box-shadow:0 6px 20px rgba(0,0,0,0.07);
}

@media (max-width:700px){
    :root{
        --pad:20px;
    }
}