改造なしで保護・削除するテスト

save_protect.css

/* セーブのリセットCSS */
.save_list {
	display: block;
	table-layout: auto;
	width: auto;
	height: auto;
	border-top: none;
}
.save_list_item {
	display: block;
}
.save_list_item_thumb {
	display: inline;
	width: auto;
	height:auto;
	padding-top:0;
	padding-left:0;
	border-bottom: none;
}
.save_list_item_thumb img {
	width: auto;
	height: auto;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.save_list_item_area {
	display: inline;
	vertical-align: baseline;
	padding: 0;
	border-bottom: none;
}
.save_list_item_date {
	display: inline;
	padding: 0;
	line-height: normal;
}
.save_list_item_text {
	display: inline;
	line-height: normal;
	height: auto;
	overflow: visible;
}
/* セーブのリセットCSS 終わり */


/* セーブCSS */
.save_list {
	width: 70%;
	border-top: 1px solid #ddd;
}
.save_list_item {
 	cursor: pointer;
  	height: 85px;
 	display: flex;
	border-bottom: 1px solid #ddd;
	padding: 6px 10px;
	box-sizing: border-box;
	position: relative;
}
.save_list_item_thumb {
	display: inline-block;
	width: 120px;
	height: 100%;
	text-align: left;
}
.save_list_item_thumb img {
	height: 100%;
}
.save_list_item_area {
	display: inline-block;
 	width: 400px;
	height: 100%;
}
.save_list_item_date {
	display: block;
}
.save_list_item_text {
	display: block;
}
/*削除ボタン*/
.save_del,
.save_del_off {
	position: absolute;
	top: 17px;
 	right:70px;
	display: block;
	width:50px;
	height:50px;
	cursor: pointer;;
	z-index: 100;
	background-image: url(trash.png);
	background-size: contain;
}
.save_del:hover {
	background-image: url(trash_hover.png);
}
.save_del_off {
	background-image: url(trash_off.png);
}
/*保護*/
.save_protect {
	position: absolute;
	top: 17px;
	right:10px;
	display: block;
	width:50px;
	height:50px;
	cursor: pointer;;
	z-index: 100;
	background-size: contain;
}
.save_protect.on {
	background-image: url(lock_on.png);
}
.save_protect.on:hover {
	background-image: url(lock_on_hover.png);
}
.save_protect.off {
	background-image: url(lock_off.png);
}
.save_protect.off:hover {
	background-image: url(lock_off_hover.png);
}
.save_protect_area {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:80px;
}