@charset "UTF-8";
/*オレンジ*/
/*背景グレー*/
/*ボーダー*/
/*オレンジ 薄い*/
#contents .wrap {
  width: 1035px;
  position: relative;
  left: -17px;
  margin: 120px auto;
}
#contents .wrap li {
  width: 310px;
  height: 310px;
  margin-bottom: 35px;
  margin-left: 35px;
}
#contents .wrap li:hover {
  cursor: pointer;
}
#contents .wrap li:hover .c1 p {
  filter: alpha(opacity=100);
  opacity: 1.0;
}
#contents .wrap li:hover .libg {
  filter: alpha(opacity=70);
  opacity: 0.7;
}
#contents .wrap li.active {
  width: 655px;
  height: 655px;
  z-index: 10;
}
#contents .wrap li.active .c1 {
  visibility: hidden;
  filter: alpha(opacity=0);
  opacity: 0.0;
  width: 655px;
  height: 655px;
}
#contents .wrap li.active .c2 {
  filter: alpha(opacity=100);
  opacity: 1.0;
  visibility: visible;
  z-index: 200;
}
#contents .wrap li.active .libg {
  width: 655px;
  height: 655px;
}
#contents .wrap li .libg {
  width: 310px;
  height: 310px;
  transition: 0.3s;
  position: relative;
}
#contents .wrap li .li01 {
  background: url(/design/img/system/bg01.jpg) no-repeat center center;
  background-size: cover;
}
#contents .wrap li .li02 {
  background: url(/design/img/system/bg02.jpg) no-repeat center center;
  background-size: cover;
}
#contents .wrap li .li03 {
  background: url(/design/img/system/bg03.jpg) no-repeat center center;
  background-size: cover;
}
#contents .wrap li .li04 {
  background: url(/design/img/system/bg04.jpg) no-repeat center center;
  background-size: cover;
}
#contents .wrap li .li05 {
  background: url(/design/img/system/bg05.jpg) no-repeat center center;
  background-size: cover;
}
#contents .wrap li .li06 {
  background: url(/design/img/system/bg06.jpg) no-repeat center center;
  background-size: cover;
}
#contents .wrap li .li07 {
  background: url(/design/img/system/bg07.jpg) no-repeat center center;
  background-size: cover;
}
#contents .wrap li .li08 {
  background: url(/design/img/system/bg08.jpg) no-repeat center center;
  background-size: cover;
}
#contents .wrap li .c1 {
  text-align: center;
  background: url(/design/img/cmn/mesh.png);
  height: 100%;
  width: 100%;
  position: absolute;
  background: url(/design/img/cmn/mesh3.png);
  transition: 0.3s;
  filter: alpha(opacity=100);
  opacity: 1.0;
  visibility: visible;
}
#contents .wrap li .c1 span {
  width: 200px;
  height: 44px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#contents .wrap li .c1 span.double {
  height: 72px;
}
#contents .wrap li .c1 p {
  display: inline-block;
  padding: 7px 25px;
  border: #ff6600 1px solid;
  color: #fff;
  transition: 0.3s;
  background: #ff6600;
  filter: alpha(opacity=0);
  opacity: 0;
}
#contents .wrap li .c1 p small {
  font-size: 10px;
}
#contents .wrap li .c2 {
  visibility: hidden;
  transition: 0.3s;
  filter: alpha(opacity=0);
  opacity: 0.0;
  text-align: center;
  padding: 20px;
  padding-top: 15px;
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background: url(/design/img/system/bg.png);
}
#contents .wrap li .c2 h4 {
  font-size: 30px;
  font-weight: normal;
}
#contents .wrap li .c2 h4 small {
  font-size: 16px;
}

/*#contents .wrap li:hover .c1 p {
  filter: alpha(opacity=100);
  opacity: 1.0;
}

#contents .wrap li:hover .libg {
  filter: alpha(opacity=70);
  opacity: 0.7;
}
#contents .wrap li .c1 p {
  display: inline-block;
  padding: 7px 25px;
  border: #ff6600 1px solid;
  color: #fff;
  transition: 0.3s;
  background: #ff6600;
  filter: alpha(opacity=0);
  opacity: 0;
}
*/