.tags-nav {
    display: flex;
    justify-content: space-around; /* 均等に分散配置 */
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    background-color: #fafafa;
    width: 100%;
}

/* 1つ1つのタグのまとまり（縦並び設定） */
.tag-item {
    display: flex;
    flex-direction: column; /* アイコンと文字を縦に並べる */
    align-items: center;    /* 横方向のど真ん中に配置 */
    justify-content: center;
    flex: 1; /* 親要素の幅を均等に分ける */
    cursor: pointer;
}

/* アイコン（上段） */
.tag-icon {
    font-size: 28px;
    color: #999;
    margin-bottom: 4px; /* 文字との隙間 */
}

/* テキスト（下段） */
.tag-text {
    font-size: 11px !important; /* 絶対にこのサイズにする魔法（!important） */
    color: var(--text-light);
    text-align: center;
}

:root {
    --primary-color: #d4a017;
    --text-main: #333333;
    --text-light: #777777;
    --bg-gray: #f5f5f5;
    --border-color: #e0e0e0;
    --link-color: #0056b3;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: var(--text-main);
    background-color: #eee;
    line-height: 1.6;
}
.container {
    max-width: 600px; margin: 0 auto; background-color: #ffffff;
    min-height: 100vh; padding-bottom: 70px; box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--border-color);
    background-color: #fff; position: sticky; top: 0; z-index: 100;
}
.logo { font-size: 20px; font-weight: bold; color: var(--primary-color); }
.header-actions { display: flex; gap: 15px; font-size: 14px; color: var(--text-light); }
.tags-nav {
    display: flex; gap: 10px; padding: 10px 16px; overflow-x: auto;
    white-space: nowrap; border-bottom: 1px solid var(--border-color); background-color: #fafafa;
}
.tags-nav span { font-size: 13px; color: var(--text-light); cursor: pointer; }
.breadcrumbs { font-size: 12px; color: var(--text-light); padding: 12px 16px; background-color: #fff; }
main { padding: 0 16px; }
.topic-title { font-size: 22px; font-weight: bold; line-height: 1.4; margin-bottom: 8px; }
.topic-meta-top {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--text-light); margin-bottom: 16px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border-color);
}
.social-icons { display: flex; gap: 8px; }
.social-icons span { background-color: var(--bg-gray); padding: 3px 6px; border-radius: 4px; font-weight: bold; color: #555; }
.author-info { display: flex; align-items: center; margin-bottom: 16px; font-size: 14px; }
.avatar { width: 36px; height: 36px; background-color: #ccc; border-radius: 50%; margin-right: 12px; }
.author-details .name { font-weight: bold; color: var(--text-main); }
.author-details .date { font-size: 12px; color: var(--text-light); }

/* 文章エリア（改行自動反映） */
.article-body, .comment-body {
    font-size: 15px; line-height: 1.8; letter-spacing: 0.02em;
    white-space: pre-wrap; /* 改行をそのまま反映 */
    word-wrap: break-word;
}
.article-body { margin-bottom: 30px; }

.voting-section { background-color: var(--bg-gray); padding: 20px 16px; border-radius: 8px; text-align: center; margin-bottom: 30px; }
.voting-title { font-weight: bold; margin-bottom: 15px; font-size: 15px; }
.vote-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.vote-btn { background-color: #fff; border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 20px; font-size: 13px; display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.vote-btn .count { font-weight: bold; color: var(--primary-color); margin-bottom: 4px; }
.related-topics { border-top: 2px solid var(--primary-color); padding-top: 20px; margin-bottom: 30px; }
.section-title { font-size: 16px; font-weight: bold; margin-bottom: 15px; }
.related-item { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-color); font-size: 14px; }
.related-item a { text-decoration: none; color: var(--link-color); display: block; margin-bottom: 5px; }
.related-meta { font-size: 12px; color: var(--text-light); }

/* コメントセクション */
.comments-section { border-top: 2px solid var(--primary-color); padding-top: 20px; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.comment-item { padding: 16px 0; border-bottom: 1px solid var(--border-color); }
.comment-item.topic-owner { background-color: #fffbe6; padding: 16px; margin: 0 -16px; }
.comment-title { font-weight: bold; font-size: 15px; margin-bottom: 5px; }
.comment-meta { font-size: 12px; color: var(--text-light); margin-bottom: 10px; }
.owner-meta { color: var(--primary-color); font-weight: bold; }

/* 追従フッター */
.sticky-footer {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 600px; background-color: #fff; border-top: 1px solid var(--border-color);
    padding: 12px 20px; display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05); z-index: 100;
}
.sticky-footer span { font-weight: bold; color: var(--text-main); font-size: 15px; }
.reply-btn { 
    background-color: var(--primary-color); color: #fff; border: none; 
    padding: 10px 24px; border-radius: 4px; font-weight: bold; font-size: 14px; 
    cursor: pointer;
    text-decoration: none; /* ★追加: リンクの下線を消す */
    display: inline-block; /* ★追加: リンクをボタンの形として扱う */
    text-align: center;    /* ★追加: 文字を真ん中に配置する */
}

/* ★ 返信（レスへのレス）のデザイン */
.comment-item.is-reply {
    margin-left: 24px; /* 全体を右にズラす（段組み） */
    padding-left: 16px; /* 左の線との隙間 */
    border-left: 4px solid #ccc; /* 左側にグレーの太線を引く */
    background-color: #fbfbfb; /* 背景を少しだけグレーに */
    border-bottom: 1px solid var(--border-color);
}

/* ★ トピ主の返信の場合の特別デザイン */
.comment-item.topic-owner.is-reply {
    border-left: 4px solid var(--primary-color); /* 左の線を黄金色に */
    background-color: #fffbe6; /* 背景を薄い黄金色に */
}