@charset "utf-8";
/**********コンテンツ***********/

#contents_back{
  width:100%;
  height:400px;
  margin-top:4px;
  background-color:#F9FF9C;
  }
  
#contents_back img{
  }

#main_container {
	margin: 0 auto;
	width: 980px;
  height:400px;
	text-align: center;
}

#main_container ul {
	margin: 0 auto;
	width: 980px;
	text-align: left;
}

#main_container ul li {
	margin: 0px;
	width: 140px;
  height:100px;
	text-align: left;
	float: left;
	display: none;
	overflow: hidden;
}

/* =======================================
	ClearFixElements
======================================= */
#main_container ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#main_container ul {
	display: inline-block;
	overflow: hidden;
}
  
#contents{
  width:980px;
  height:400px;
  margin:0 auto;
  }
  
#concept_back{
  width:100%;
  height:187px;
  background-color:#fff;
  }
  
#concept{
  width:980px;
  margin:0 auto;
  }
  
#concept_title{
  font-size:40px;
  color:#9A9A9A;
  padding-top:23px;
  text-align:center;
  }

#concept_title .web{
  font-size:48px;
  color:#A70B0E;
  }
  
#concept_title .logo{
  font-size:48px;
  color:#2542B4;
  }
  
#concept_title .banner{
  font-size:48px;
  color:#115819;
  }
  
#concept_txt{
  width:950px;
  font-size:18px;
  text-align:center;
  margin:0 auto;
  padding-top:10px;
  }
  
#contents_nav_back{
  width:100%;
  background-color:#C0D9FF;
  }
  
.contents_nav{
  width:840px;
  margin:0 auto;
  }

.contents_nav ul{
  width:840px;
  }

.contents_nav ul li{
  float:left;
  width:210px;
  height:280px;
  }

.contents_nav ul .con_nav{
  width:210px;
  height:280px;
  margin:0 auto;
  }

.contents_nav ul .con_nav a{
  display: block;
  }
	
.contents_nav ul .con_nav img{
  border: none;
  }
  
.contents_nav ul .con_nav a:hover{
  background: none;
  }

.contents_nav ul .con_nav a:hover img{
  visibility: hidden;
  }

.figure {
  position: relative;
  overflow: hidden;
  width: 210px;
  }

.figcaption {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 210px;
  height: 280px;
  padding-right:20px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
  }

.figcaption a{
  display:block;
  width:210px;
  height:280px;
  font-size:14px;
  text-align:left;
  text-decoration:none;
  color:#fff;
  padding:110px 0 0 18px;
  }

.figcaption a span{
  font-size:17px;
  }

.figcaption a{
  display:block;
  width:210px;
  height:280px;
  }

.figure:hover .figcaption {
  top: 0;
  left: 0;
  }

.figure2 {
  position: relative;
  overflow: hidden;
  width: 210px;
  }

.figcaption2 {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 2;
  width: 210px;
  height: 280px;
  padding-right:20px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
  }

.figcaption2 a{
  display:block;
  width:210px;
  height:280px;
  font-size:14px;
  text-align:left;
  text-decoration:none;
  color:#fff;
  padding:110px 0 0 18px;
  }

.figcaption2 a span{
  font-size:17px;
  }

.figcaption2 a{
  display:block;
  width:210px;
  height:280px;
  }

.figure2:hover .figcaption2 {
  top: 0;
  left: 0;
  }

.figure3 {
  position: relative;
  overflow: hidden;
  width: 210px;
  }

.figcaption3 {
  position: absolute;
  top: 0;
  right: 100%;
  z-index: 2;
  width: 210px;
  height: 280px;
  padding-left:20px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
  }

.figcaption3 a{
  display:block;
  width:210px;
  height:280px;
  font-size:14px;
  text-align:left;
  text-decoration:none;
  color:#fff;
  padding:110px 0 0 18px;
  }

.figcaption3 a span{
  font-size:17px;
  }

.figcaption3 a{
  display:block;
  width:210px;
  height:280px;
  }

.figure3:hover .figcaption3 {
  top: 0;
  right: 0;
  }
  
.figure4 {
	position: relative;
	overflow: hidden;
	width: 210px;
}
.figcaption4 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transform: rotate(90deg) scale(0);
	transform: rotate(90deg) scale(0);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}

.figure4:hover .figcaption4 {
	-webkit-transform: rotate(360deg) scale(1);
	transform: rotate(360deg) scale(1);
	opacity: 1;
}

.fig4_title{
  font-size:17px;
  color:#fff;
  padding:150px 0 0 15px;
  }
  
.fig4_txt{
  font-size:14px;
  color:#fff;
  padding-left:15px;
  }

.figure5 {
	position: relative;
	overflow: hidden;
	width: 210px;
}

.figcaption5 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transform: rotate(90deg) scale(3);
	transform: rotate(90deg) scale(3);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}

.figure5:hover .figcaption5 {
	-webkit-transform: rotate(360deg) scale(1);
	transform: rotate(360deg) scale(1);
	opacity: 1;
}