body { font-family: sans-serif;
     background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(ばかスキル背景.png);
      padding: 20px; }
.container { max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
h1 { color: #333; }
#insight-box { margin: 20px 0; padding: 15px; border-left: 4px solid #e74c3c; background: #fff5f5; }
button { padding: 10px 20px; background: #3498db; color: white; border: none; cursor: pointer; }
/* カスタムセレクトのデザイン */
.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
}

.custom-select select {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #08f991; /* 深いネイビー */
    border: none;
    border-radius: 50px; /* 丸みを強調 */
    cursor: pointer;
    appearance: none; /* 標準の矢印を消す */
    text-align: center;
    transition: all 0.3s ease;
}

.custom-select select:hover {
    background-color: #f01919;
    transform: scale(1.02);
}

/* 矢印を自作する場合の装飾 (必要に応じて) */
.custom-select::after {
    content: '▼';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;
}
.header-container {
    display: flex;
    align-items: center; /* 上下中央揃え */
    gap: 20px;          /* タイトルとセレクトボックスの間の余白 */
    flex-wrap: wrap;    /* 画面幅が狭い時に折り返す設定 */
}

/* 既存の .custom-select の横幅を制限して調整 */
.custom-select {
    width: 300px;
}