.table_item{
  font-size:1.6rem;
  display: flex;
  border-bottom: 1px solid #aaa;
  align-items:center;
}


.table_item .c-button.edit {
	padding: .8rem 1.5rem;
	color: #198754;
	border: none;
	margin-right: .5rem
}
.table_item .c-button.delete {
	vertical-align: middle;
	padding: .2rem 1.5rem;
	color: #dc3545
}

.table_item .c-button {
	border-radius: .5rem
}


.table_item_left,   .table_item_left_contener,   .table_item_right{
  display: contents;
}

.table_item_date {
    flex-shrink: 0;/*コンテンツに合わせてサイズ変動しない*/
    order: 1;
    width:10.5rem;
}
.table_item_amountin {
    flex-shrink: 0;;/*コンテンツに合わせてサイズ変動しない*/
    order: 2;
    width:9rem;
}
.table_item_amountout {
    flex-shrink: 0;;/*コンテンツに合わせてサイズ変動しない*/
    order: 3;
    width:9rem;
}
.table_item_category {
  flex-shrink: 0;;/*コンテンツに合わせてサイズ変動しない*/
  order: 4;
  width:14rem;
}
.table_item_note {
  order: 5;
  flex-grow:1;
}
.table_item_user {
  flex-shrink: 0;;/*コンテンツに合わせてサイズ変動しない*/
  order: 6;
  width:5rem;
}
.table_item_operate {
  flex-shrink: 0;;/*コンテンツに合わせてサイズ変動しない*/
  order: 7;
  width:11rem;
}

.table_item_amountin.itemX {
  text-align:right;
	color: #28a7e0;
}
.table_item_amountout.itemX {
  text-align:right;
	color: #dc3545;
}



.table_item_user,.table_item_operate {
  text-align:center;
}


.itemT {
  /*width: 5rem;*/
  padding: 0.8rem 0.5rem;
  /*text-align:center;*/
  /*border: 2px solid #fff;*/
  background-color:#ccc;
  border: 0.1rem solid #fff;
  text-align:center;
  font-weight:bold;
}
.itemX {
  /*width: 5rem;*/
  padding: 0.8rem 0.5rem;
  /*text-align:center;*/
  /*border: 2px solid #fff;*/
  background-color:#fff;
  border: 0.1rem solid #fff;
}


 input[type="month"] {
    position: relative;
    margin: 0 0.5rem;
    padding: 0.3rem 1rem;
    font-size: 1.8rem;
    font-size: 2.5rem;
    width: 18rem;
    text-align: center;
    cursor: pointer;
}

 #calendarYear {
    position: relative;
    margin: 0 0.5rem;
    padding: 0.3rem 1rem;
    font-size: 1.8rem;
    font-size: 2.5rem;
    width: 18rem;
    text-align: center;
    cursor: pointer;
}


@media screen and (max-width: 780px){

  .pc_only{
    display:none;
  }

.table_item{
  align-items:start;
}

  .table_item_left {
    display: block;
    flex-grow:1;/*伸びるようにする*/

  }
  .table_item_left_contener {
    display: flex;
    align-items:center;
  }
  .table_item_right {
    display: block;
  }

  .table_item_category {
    width:auto;
  }
  .table_item_operate {
    order: -1;
  }

  /*カテゴリが空なら表示しない*/
  .table_item_category:empty{
    display:none;
  }
  /*収入が空なら表示しない*/
  .table_item_amountin:empty{
    display:none;
  }


}