body {
    font-family: Arial, sans-serif; /* 見やすいフォントを設定 */
    line-height: 1.6;
    margin: 0;
    padding-top: 60px;
    background-color: #f4f4f4; /* わずかにグレーの背景 */
    color: #333; /* 文字色 */
}

/*常にブラウザの上部に固定*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #666; /* 背景色 */
    color: white; /* 文字色 */
    padding: 15px 20px;
    z-index: 1000; /* 他の要素の上に表示 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 影を付けて浮いているように見せる */
    /* Flexboxで中身のレイアウトを調整 */
    display: flex;
    justify-content: space-between; /* 左右中央の要素を均等に配置 */
    align-items: center;
}

/* ヘッダーの子要素（戻るボタン、タイトルなど） */
header .header-left,
header .header-right {
    /* 戻るボタンや右側の要素のためのスペース。
    Flexアイテムの比率を調整して中央のタイトルを押し出す */
    flex: 1;
    min-width: 50px; /* 必要に応じて最小幅を設定 */
}

header .header-left a {
    color: white; /* リンクの色をヘッダーの文字色に合わせる */
    text-decoration: none; /* 下線を非表示にする */
    font-weight: bold; /* 少し強調する */
}

/* 中央のタイトル */
header .header-center {
    /* 中央のタイトルは flex: 1; よりも高い比率にし、目立たせる */
    flex: 2;
    text-align: center; /* タイトルを中央寄せ */
    font-size: 1.2em;
    font-weight: bold;
    /* ページのタイトルにリンクを貼る場合はここで色などを調整 */
}

section {
    padding: 20px;
    margin: 20px auto 20px auto;
    max-width: 800px; /* 内容の幅を制限して読みやすくする */
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

body > section:last-of-type {
    margin-bottom: 60px;
}

section p {
    margin: 2px;
}

h3 {
    padding: 2px 10px 2px 10px;
    border-left: 5px solid #007bff; /* ポイントカラー（青）を左端に */
}

/*--------------------------------*
 | Skill_Career
 *--------------------------------*/
.skill-list {
    display: block;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    transition: transform 0.2s;
    /*border-left: 5px solid #4CAF50;*/
}

.skill-list:hover {
    transform: translateY(-3px);
}

.skill-category {
    margin: 0 0 2px 0;
    padding: 0px;
    color: #333;
    font-size: small;
    /*border-bottom: 1px solid #eeeeee;*/
}

.item-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #ccc;
}

.item-skill {
    background-color: #f0f0f0;
    color: #555;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: xx-small;
    font-weight: 500;
    text-decoration: none;
}

/*--------------------------------*
 | Watchlist
 *--------------------------------*/
.sticky-category {
    position: sticky;
    top: 60px;
    z-index: 500;
    
    text-align: center;
    margin: 0px auto 20px;
    padding: 4px 0;
    font-size: 1.5em;
    color: white;
    background-color: #555;
    border-left: 0px;
    border-bottom: 3px double #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 900px;
}

.watchlist ul {
    padding-inline-start: 0px;
}

.item-list {
    display: block;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    transition: transform 0.2s;
    border-left: 5px solid #4CAF50;
}

.item-list:hover {
    transform: translateY(-3px);
}

.item-title {
    margin: 0 0 2px 0;
    padding-bottom: 5px;
    color: #333;
    font-size: small;
    border-bottom: 1px solid #eeeeee;
}

.item-comment {
    margin: 0px;
    font-size: x-small;
    color: #333;
    line-height: 1.5;
}

.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #ccc;
}

.item-copyright {
    background-color: #e3f2fd;
    color: #1565c0 !important;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #90caf9;
    font-size: xx-small;
    font-weight: 500;
    text-decoration: none;
}

.item-tag {
    background-color: #f0f0f0;
    color: #555;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: xx-small;
    font-weight: 500;
    text-decoration: none;
}

.item-tag-recommend {
    background-color: #fff9c4;
    color: #fbc02d !important;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #fdd835;
    font-size: xx-small;
    font-weight: 500;
    text-decoration: none;
}

/*--------------------------------*
 | Footer
 *--------------------------------*/
.footer-bar {
    position: fixed;
    bottom: 0; /*常にブラウザの下部に固定*/
    left: 0;
    width: 100%;
    /* デザイン */
    background-color: #333; /* 濃いグレー */
    color: white;
    padding: 10px 20px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* 上部に影 */
    z-index: 900; /* ヘッダーより下に、コンテンツより上に */
    /* 中身の配置 */
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.active-filter-tag-list {
    display: flex;
    gap: 10px;
}

/* 選択中のフィルタリングタグのデザイン */
.active-filter-tag {
    background-color: #f0f0f0;
    color: #555;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: xx-small;
    font-weight: 500;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.active-filter-tag:hover {
    background-color: #909090;
}