ul.image_list{

width: 800px;
margin:0 auto;


}

ul.image_list li {
  /* liが横並びになるようにします。 */
  display: inline-block;
  background : none !important;
  

}


ul.image_list li .image_box {

  /* チェックボックスの親要素にrelativeを指定しておきます。 */
  position: relative;
top:-10px;
width: 112px;
height: 158px;
margin:0 20px 50px 30px;
padding:0;
   font-size: 10px;
   text-align:left;
   box-sizing: content-box;   
   line-height: 0.5em;
   
}


ul.image_list li .image_box p {

width: 110px;
margin-top:-20px;
padding-left:3px;
vertical-align: middle;
font-size: 1em;
line-height: 0.5em;

}

ul.image_list li .image_box p.p2 {

width: 110px;
margin-top:-10px;
padding-left:3px;
vertical-align: middle;
font-size: 1em;
line-height: 0.5em;

}

.image_box img.thumbnail {
  width: 100%;
  height: 100%;
  /* 画像にカーソルを合わせたときに、
  カーソルが指のマークになるようにします。 */
  cursor: pointer;

}

input[type="checkbox"]{
vertical-align:middle;
margin-top:5px;
margin-left:-15px;
padding:0;
width:1.5em;
height:1.5em;

}

input[type="checkbox"].siryo:checked::before {
 
  /* チェックが入った状態だと、枠が表示されるようにします。 */
  border: 3px solid green;
  /* 線をwidthとheightに含めるようにします。 */
  box-sizing: border-box;
  content: "";
    position: absolute;
    top:10px;
    left:10px;
    width: 114px;
    height: 160px;
    vertical-align:middle;
margin:0;
padding:0;
    
}

* html input {
	margin:3px 0;
}


  /* Crome以外 */

input:checked + span:before {
   content: '';
 
  position: absolute;
    top:10px;
    left:10px;
    width: 114px;
    height: 160px;
    margin:0;
padding:0;

  /* チェックが入った状態だと、枠が表示されるようにします。 */
  border: 3px solid green;
 
  /* 線をwidthとheightに含めるようにします。 */
  box-sizing: border-box;
vertical-align:middle;
    
}