.prev_button {
    position: absolute;
    top: 10px;
    right: 10px;
}

.next_button {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.button_column {
    height:500px;
}

.unread {
    color: #ff0000;
}

.hit {
    color: #008800;
}

.commentbase {
    background-color:#dddddd;
}

input[type="search"].my-search {
    -webkit-appearance: searchfield;
}
  
input[type="search"].my-search::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}
  
.image-body {
    background-image: url("../images/bgi.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
}

.image-logo {
    background-image: url("../images/logo.jpg");
    background-position: center;
    height:250px;
}

/* コメントツリー用スタイル */
.comment-tree-item {
    position: relative;
}

.comment-tree-item .comment-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-tree-item .comment-indent {
    display: inline-block;
    width: 20px;
    height: 1em;
    vertical-align: middle;
}

.comment-tree-item .comment-arrow {
    color: #666;
    margin-right: 5px;
}

.comment-tree-item .comment-title {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 深いネスト用の視覚的インジケータ */
.comment-tree-item[data-depth="1"] { border-left: 2px solid #e9ecef; }
.comment-tree-item[data-depth="2"] { border-left: 2px solid #dee2e6; }
.comment-tree-item[data-depth="3"] { border-left: 2px solid #ced4da; }
.comment-tree-item[data-depth="4"] { border-left: 2px solid #adb5bd; }
.comment-tree-item[data-depth="5"] { border-left: 2px solid #6c757d; }

/* 5層以上の場合は最も濃い色を使用 */
.comment-tree-item[data-depth]:not([data-depth="0"]):not([data-depth="1"]):not([data-depth="2"]):not([data-depth="3"]):not([data-depth="4"]):not([data-depth="5"]) {
    border-left: 2px solid #495057;
}