:root { 
    --primary-pink: #db2777; 
    --hover-pink: #be185d; 
    --bg-light: #fdf2f8; 
    --white: #ffffff; 
    --text-main: #4b5563; 
}

/* 1. すべての要素ではみ出しを防止する設定 */
*, *::before, *::after {
    box-sizing: border-box;
}

body { 
    font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif; 
    background: var(--bg-light); 
    margin: 0; 
    padding: 0; 
    color: var(--text-main); 
    line-height: 1.4; 
}

/* --- ヘッダー：線を消し、高さを圧縮してセンタリング --- */
.global-header { 
    background: var(--white); 
    padding: 8px 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000;
    border: none; /* 線を消去 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* 線の代わりに超薄い影 */
}

.header-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 15px;
}

.header-content {
    text-align: center;
}

.system-title { 
    font-size: 0.95rem; 
    color: var(--primary-pink); 
    margin: 0; 
    font-weight: bold;
    line-height: 1.2;
}

.system-title span { 
    font-size: 0.65rem; 
    color: #888; 
    font-weight: normal;
}

.header-nav {
    margin-top: 4px;
}

.nav-link { 
    text-decoration: none; 
    color: #999; 
    font-size: 0.7rem; 
    border: 1px solid #eee; 
    padding: 2px 10px; 
    border-radius: 4px; 
    background: #fff; 
}

.header-spacer { height: 75px; }

/* --- フッター：線を消し、センタリング --- */
.global-footer { 
    text-align: center; 
    padding: 20px 0 30px 0;
    border: none; /* 線を消去 */
}

.footer-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
}

.logout-link { 
    color: #888; 
    text-decoration: none; 
    font-size: 0.8rem; 
    padding: 6px 16px; 
    border: 1px solid #ddd; 
    border-radius: 8px;
    background: #fff;
}

.copyright { 
    font-size: 0.7rem; 
    color: #ccc;
    margin: 0; 
}

/* --- メインコンテンツ領域 --- */
.container { 
    max-width: 500px; /* ★ボタンの幅に合わせて全体をスリムに */
    margin: 0 auto; 
    padding: 0 15px; 
}

.card { 
    background: var(--white); 
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    margin-bottom: 15px; 
}

/* --- ボタン設定：横幅を制限し、中央寄せ --- */
.menu-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中身を中央に寄せる */
    width: 100%;
}

button, .btn { 
    background: var(--primary-pink); 
    color: white; 
    border: none; 
    padding: 15px; 
    border-radius: 12px; 
    cursor: pointer; 
    width: 100%;        /* 親要素に対して100% */
    max-width: 350px;   /* ★ボタンが伸びすぎない最大幅 */
    margin: 8px auto;   /* 中央に配置 */
    font-weight: bold; 
    text-decoration: none; 
    display: block; 
    text-align: center; 
    transition: 0.3s;
    font-size: 1rem;
}

button:hover, .btn:hover { 
    background: var(--hover-pink); 
    transform: translateY(-1px);
}

input, select, textarea { 
    width: 100%; 
    padding: 12px; 
    margin: 5px 0 15px 0; 
    border: 1px solid #ddd; 
    border-radius: 10px; 
    box-sizing: border-box; 
    font-size: 1rem; 
}

hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 15px 0;
    width: 100%;
}