/*コメントJS*/
.thread-title{margin: 20px  2%;}

 @media screen and (max-width: 768px) {/*pc*/
    .thread-title  {
      font-size: 1.1rem;
    }
    }


/*コメント*/
.co-all{ float: left; width: 94%; margin:5px 3%;}
.co-area-befor,
.co-area-after{ z-index:1;position: relative; float: left; width: 100%; }
.co-area-after{ float: left; width: 100%; height: 100px; line-height: 1.1; }
.co-area-after{ text-align: center; padding:20px 0 0 0; font-size:36px; font-weight: bold; }
.co-area-after-s{ font-size: 16px; }
.co-input{ float: left; width: 100%; margin:5px 0 0 0; padding: 3px 8px; border:#999 solid 1px; font-size: 16px; border-radius: 5px; -webkit-appearance: none; background-color: #fff; border:#333   solid 1px;}
.co-name{   }
.co-txt{ height: 100px; resize: none;}
.co-btn-box{ float: left; width: 100%; height: 55px; }
.co-btn{float: right; width: 30%; height: 35px;  margin:10px 0 0 0;  padding: 7px ; background-color: #000; color: #FFF; border-radius: 5px; text-align: center; font-size: 16px;  }
.co-btn-disable{ float: right; width: 30%; height: 35px;  margin:10px 0 0 0;  padding: 7px ; background-color: #999; color: #FFF; border-radius: 5px; text-align: center; font-size: 16px; display: none; }
/*.co-hist{ float: left; width: 100%; margin:20px 0 0 0;  background-color: #FDF7E8; border:#D8C79B solid 2px; border-radius: 5px; }*/
.co-exp{ float: left; width: 100%; margin:10px 0; padding: 0 5%; color: #756F63; font-size: 12px; }

.co-hist-list{ float: left; width: 96%; margin:10px 2%; border-collapse: collapse; }
.co-hist-list th{ width: 30px; text-align: center; }
.co-hist-list th i{ margin:0; }
.co-hist-list th .fa-trash-alt{ color: #999; }
.co-hist-list th,
.co-hist-list td{ padding: 3px 0px; line-height: 1.3; vertical-align: top; word-break: break-all; }
.co-hist-list td p{ margin: 0 0 5px 0; }
.co-hist-list-td-s{ font-size: 12px; color: #777; }
.co-hist-list-td-pic{ float: left; width: 90%; }
.co-hist-list-td-pic-img{ display: block; max-width: 100%; border:#FFF solid 3px; box-shadow: 2px 2px 5px rgba(0,0,0,0.4); }
.co-hist-list-td-info{ float: left; width: 100%; margin:5px 0 15px 0 ; font-size: 12px; line-height: 1.5; }
.co-hist-list-td-info-i{ margin:0 3px 0 0; }

.co-hist-list-td-good{ color: #FFD1D1;  }
.co-hist-list-td-good-after{ color: #BBBBBB; }

.comment_area{}

.no_comment{
    padding:8px 2%;
}

.comment_navi_area{
    border-top:solid 1px #dfdddd;
    border-bottom:solid 1px #dfdddd;

    font-size: 13px;
    padding:6px 2%;
    margin-top: 10px;
    background-color: #f1f1f1;
    color:#666;

}
.navi_float_left{
    float:left;
    display: flex;padding:3px 0;
    width:60%;
    flex-wrap: wrap;
}
.navi_float_right{
    float:right;
    display: flex;
    width:40%;
}


.comment_sort_button{
        margin-right:3px;
    
        padding:2px 6px;
        border-radius: 3px;
        background-color: #fff;
        
}
.comment_sort_button a{color:inherit;
  text-decoration: none;}


.current_on{
        border:solid 1px #b3b3b3;
    background-color: #313131;
    color:#fff;
    border:solid 1px #888;
}

.current_off{
    border:solid 1px #b3b3b3;
    background-color: #fff;
    color:#666;
    box-shadow:  1px 1px #ddd;
}


.comment_box {
/*    border-bottom:solid 1px #e6e6e6;*/
    padding:12px 2% 6px 2%;
    width:100%;
position: relative;
}
.comment_box + .comment_box{
    border-top:solid 1px #ddd;
}

.com_page_name{font-size: 10px;}
.com_hide{background-color: #ddd;}
.comment_edit{position: absolute;top:5px;right: 5px;}
.comment_view_area{
    margin:5px 0;
    padding-bottom: 24px;

}
.comment_info{
    display: flex;
    align-items: center;
    font-size: 12px;

    color:#777;
}
.comment_txt{
    font-size: 15px;
    padding: 4px  0 6px 0; 
    color:#111;
    word-break: break-all;
    line-height: 1.3;
    font-weight: normal;
}

.comment_name{
    margin-right: 2%;
    font-size: 14px;

}
.comment_id{
    margin-right: 2%;
    font-size: 14px;

}
.comment_bottom{text-align: right;font-size: 13px;}


.good_button{width:15px;}
.good-count{font-size: 10px;}


.comment_bottom button{padding:initial;margin: 0;height: 100%;}
.thumb-up-button {
background-color: #fff;
  color: #A2999A;; /* ボタンのテキストの色 */
  border: none; /* ボタンの境界線をなくす */
padding:0 4px !important;
  text-align: center; /* ボタン内のテキストを中央揃え */
  text-decoration: none; /* テキストの下線をなくす */
  display: inline-block; /* インライン要素として表示 */
  font-size: 16px; /* テキストのフォントサイズ */
 border-radius: 4px; /* ボタンの角を丸める */
  cursor: pointer; /* マウスがボタンの上に来た時にポインターを変更 */
  transition: background-color 0.3s ease; /* ボタンをホバーしたときに背景色を変更する */
}

.thumb-up-button_af {
    
background-color: #fff;
  color: #FF99A7; /* ボタンのテキストの色 */
  border: none; /* ボタンの境界線をなくす */
padding:0 4px !important;
  text-align: center; /* ボタン内のテキストを中央揃え */
  text-decoration: none; /* テキストの下線をなくす */
  display: inline-block; /* インライン要素として表示 */
  font-size: 16px; /* テキストのフォントサイズ */
 border-radius: 4px; /* ボタンの角を丸める */
  cursor: pointer; /* マウスがボタンの上に来た時にポインターを変更 */
  transition: background-color 0.3s ease; /* ボタンをホバーしたときに背景色を変更する */
}

.thumb-up-button i {
  margin-right: 4px; /* ボタンのアイコンとテキストの間に余白を設ける */
}
.thumb-up-button_af i {
  margin-right: 4px; /* ボタンのアイコンとテキストの間に余白を設ける */
}
.fa-thumbs-up::before {
  content: "\f164"; /* フォントアイコンを指定 */
}


/*TOPコメント*/

.comment-box{
        margin:24px 2%;
        background-color: #EDEEF1;
        border-radius: 3px;
        border:solid 2px #333;
        padding:0px;
}

.com-form {width:100%;}
.com-form .com-name {width:100%;
margin: 5px 0 0 0;
padding: 4px 12px;
font-size: 16px;
border-radius: 5px;
border: #ddd solid 1px;
}
.com-name{}
.com-form .com-text {
        height: 90px;
    width:100%;
    font-size: 16px;
  border-radius: 5px;
  -webkit-appearance: none;
/*  background-color: #FDF2F2;*/
border: #333 solid 1px;
  margin: 5px 0 0 0;
  padding: 4px 12px;

}
.sub-rap{width:100%;text-align: center;}

.com-submit{
    width:60%;
    margin:10px 20%;
    background-color: #fefefe;
    font-size: 18px;
    padding: 12px;
    border:0;
    color: #fff;
    font-weight: bold;
}

.comment-box .midashi{
        background-color:#333 ;
        color: #fff;
        padding:4px 2% 6px 2%;
        font-weight: bold;
}

.comment-box .comment-container{
        padding:8px 2%;
}

.comment-box .comment-item{
        padding: 12px 2% 8px 2%;
        margin:10px 0;
        border-top:1px solid #ffce86;
/*padding-top:10px;*/
}

.com-top{
font-size: 12px;color:#888;}
.com-main{

    margin:10px 0;
}

.no_comment{text-align: center;font-weight: bold;font-size: 0.6rem;background-color: #fff;margin:8px 2%;border:solid 1px #888;color:#888;padding:12px;}
 @media screen and (min-width: 768px) {/*pc*/
    .no_comment  {
      font-size: 1.2rem;
    }
    }