@charset "utf-8";
/*
* CSS for Introduce Case Index
*
* @version			0.0.1
* @lastmodified 2018/11/08
* @link					https://www.landcomp.co.jp/
* @copyright		Copyright 2018, LAND COMPUTER Co.,Ltd.All rights reserved.
*------------------------------------------------------------------------- */

/* INDEX ================================================================= */
div.caption {
  padding: 6px 4px;
  overflow: hidden;
  background: linear-gradient(#f0f8ff, #BDD7EE);
}
div.caption span.title {
  display: inline-block;
  padding: 4px 4px;
}
div.caption .cancel {
  display: inline-block;
  float: right;
  cursor: pointer;
  font-size: 0.9em;
  padding: 4px 4px 2px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background: linear-gradient(#fff, #eee 66%, #bbb);
}
div#filterBox {
  margin-bottom: 10px;
}
div#filterBox ul {
  padding: 5px;
  background-color: #f3f6f9;
}
ul.caseIndexCol ,
ul.rollList {
	list-style: none;
	display: -webkit-inline-box;    /* android */
	display: -webkit-flex;          /* Safari */
	display: -moz-flex;             /* mogira */
  display: -ms-flex;              /* IE10 */
  display: -o-flex;               /* opera */
	display: flex;
  -webkit-box-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-box-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

ul.caseModel.col3 li {
  width: 50%;
  margin: 5px 0;
}
@media all and (min-width :480px) {
  ul.caseModel.col3 li {
    width: 33%;
    min-width: 7.5em;
  }
}
div#summary {
  margin-bottom: 5px;
}
#summary span {
  font-weight: bold;
}

/* INDEX MENU ------------------------------ */
ul.caseIndexCol li {
	box-sizing: border-box;
	position: relative;
  margin-right: 0;
	margin-bottom: 20px;
	vertical-align: top;
	line-height: normal;
  width: 100%;
}
ul.caseIndexCol li a {
	display: block;
}
ul.caseIndexCol li a img.new {
	position: absolute;
	top: 0;
	right: 0;
	width: auto;
}
ul.caseIndexCol li a img {
	width: 100%;
}
ul.caseIndexCol li span {
	display: block;
	font-size: 0.9rem;
	margin-top: -4px;
}
ul.caseIndexCol li span.name {
	display: block;
	font-size: 0.88em;
	margin-top: 0;
}
@media all and (min-width :320px) {
	ul.caseIndexCol li {
		width: 49.00%;
		margin-right: 2.00%;
	}
	ul.caseIndexCol li:nth-child(2n) {
		margin-right: 0;
	}
}
@media all and (min-width :480px) {
	ul.caseIndexCol.col3 li {
		width: 32.00%;
		margin-right: 2.00%;
	}
	ul.caseIndexCol.col3 li:nth-child(2n) {
		margin-right: 2.00%;
	}
	ul.caseIndexCol.col3 li:nth-child(3n) {
		margin-right: 0;
	}
  ul.caseIndexCol.col3 li:last-child {
    margin-right: auto;
  }
}