body{
    font-family:"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
    background:#f5f7fa;
    margin:0;
    color:#333;
    line-height:1.8;
}

.container{
    max-width:900px;
    margin:40px auto;
    background:white;
    padding:40px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

h1{
    font-size:30px;
    margin-bottom:20px;
    border-bottom:3px solid #3a7bd5;
    padding-bottom:10px;
}

h2{
    margin-top:40px;
    font-size:22px;
    border-left:6px solid #3a7bd5;
    padding-left:12px;
}

ul{
    background:#f0f6ff;
    padding:20px 30px;
    border-radius:6px;
}

.summary{
    background:#fff6e5;
    padding:20px;
    border-radius:6px;
    margin-top:40px;
}

.point{
    font-weight:bold;
    color:#3a7bd5;
}

.toc{
    background:#eef5ff;
    padding:20px;
    border-radius:6px;
    margin:30px 0;
}

.toc ul{
    background:none;
    padding-left:20px;
}

.recruit{
    margin-top:40px;
    padding:25px;
    background:#f2fff4;
    border-left:6px solid #2fa84f;
    border-radius:6px;
}

.recruit a{
    font-weight:bold;
    color:#2fa84f;
    text-decoration:none;
}

.recruit a:hover{
    text-decoration:underline;
}

.related{
    margin-top:40px;
    padding:25px;
    background:#fff4f4;
    border-left:6px solid #e53e3e;
    border-radius:6px;
}

.related a{
    font-weight:bold;
    color:#e53e3e;
    text-decoration:none;
}

.related a:hover{
    text-decoration:underline;
}

/* グラフ全体のコンテナ */
.graph {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

/* 棒グラフの基本スタイル */
.bar {
    background-color: #4CAF50; /* グラフの色（緑系） */
    color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    box-sizing: border-box;
    transition: width 1s ease-in-out; /* 動きをつける場合 */
}

.bar {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); /* 青系グラデーション */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

/* マウスホバーで色を変える演出（任意） */
.bar:hover {
    background-color: #45a049;
    opacity: 0.9;
}