@charset "utf-8";
/* @group Reset */


/* @group Contents */
#contents {
	text-align: left;
}
#contents div#slide-show {
	margin-bottom: 2em;
}
#contents section{
	padding: 0 1em 2em;
}
#contents section section{
	padding: 0 0 1em;
}
#contents section div{
	margin: 0 0 2em 0;
	}
#contents section div ul{
      text-align: center;
	}
#contents section div ul li{
  position: relative;
  width: 47%;
  height: auto;
  margin: 0 1% 10px;
  background: #333;
  display: inline-block;
}
#contents section div ul li div{
  position: relative;
  width: 100%;/*　トリミングしたい枠の幅（固定にしたい場合はサイズを入力）　*/
  padding-top: 75%;/*　トリミングしたい枠の高さ（固定にしたい場合はサイズを入力）　*/
  overflow: hidden;/*　画像が枠からはみ出た部分はトリミング（非表示）する　*/
  margin: 0 auto;
}
#contents section div ul li div img{
/* 画像を上下左右に中央配置する（絶対指定） */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* 画像の最大サイズは枠の1.5倍まで */
  max-width: 150%;
  max-height: 150%;
}

/* @end */

/*500px*/
@media screen and (min-width : 500px) {
}

/*768px*/
@media screen and (min-width : 768px) {

#contents section{
	padding: 0 8em 2em;
}
#contents section figure{
	float: right;
	margin: 0 0 0 1em;
}
#contents section div ul li{
  width: 17%;
}
}

/*1024px*/
@media screen and (min-width : 1024px) {

#contents section{
	padding: 0 12em 3em;
}
}
/* @end */