@charset "utf-8";
.photo{
	width:100%;
	height:100%;
	  position: relative;
	  overflow: hidden;
	  text-align: center;
	background-position: center center;
	background-size: cover;
  }
/*///-work-///*/
.work-01 {
  background-image: url(topimages/i001.jpg)
}
.work-02 {
  background-image: url(topimages/i002.jpg)
}
.work-03 {
  background-image: url(topimages/i003.jpg)
}
.work-04 {
  background-image: url(topimages/i004.jpg)
}
.work-05 {
  background-image: url(topimages/i006.jpg)
}
.work-06 {
  background-image: url(topimages/i005.jpg)
}
.work-07 {
  background-image: url(topimages/i009.jpg)
}
.work-08 {
  background-image: url(topimages/i008.jpg)
}
.work-09 {
  background-image: url(topimages/i007.jpg)
}
.work-10 {
  background-image: url(topimages/i010.jpg)
}
.work-11 {
  background-image: url(topimages/i011.jpg)
}
.work-12 {
  background-image: url(topimages/i012.jpg)
}

/*///-work-///*/
  .photo .caption1{
	color:#0A364B;
	  position: absolute;
	  top: 195px;
	  left: 0;
	  z-index: 1;
	  width: 100%;
	  height: 100%;
  }
.photo .caption1-b{
	color:#0A364B;
	  position: absolute;
	  top: 429px;
	  left: 0;
	  z-index: 1;
	  width: 100%;
	  height: 100%;
  }
  .photo .caption1 p{
	color:#0A364B;
	font-size: 1em;
	line-height: 2em;
  }
.photo .caption1-b p{
	color:#0A364B;
	font-size: 1em;
	line-height: 2em;
  }
  .photo .caption2{
	color:#fff;
	  position: absolute;
	  top: 195px;
	  left: 0;
	  z-index: 1;
	  width: 100%;
	  height: 100%;
  }
  .photo .caption2 p{
	color:#fff;
	font-size: 1em;
	line-height: 2em;
  }
  .photo .caption3{
	color:#303F03;
	  position: absolute;
	  top: 195px;
	  left: 0;
	  z-index: 1;
	  width: 100%;
	  height: 100%;
  }
  .photo .caption3 p{
	color:#303F03;
	font-size: 1em;
	line-height: 2em;
  }
  .photo:hover .caption1{
	  top: 30px;
	  background-color:rgba(167, 220, 245, 0.7);
  }
 .photo:hover .caption1-b{
	  top: 30px;
	  background-color:rgba(167, 220, 245, 0.7);
  }
.photo:hover .caption2{
	top: 30px;
	background-color:rgba(0, 130, 177, 0.7);
}
.photo:hover .caption3{
	top: 30px;
	background-color:rgba(238, 229, 149, 0.7);
}
  .photo_wrap{
	  overflow: hidden;
  }
  .photo_wrap .photo{
	  margin: 10px auto;
	  max-width: 400px;
	  width: 100%;}
/*///-1-///*/
  .caption1 > div.cap-info{
    width:80%;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  color: #0A364B;
	  text-align: center;
	  -webkit-transform: translateX(-50%) translateY(-50%);
		  -ms-transform: translateX(-50%) translateY(-50%);
			  transform: translateX(-50%) translateY(-50%);
}
  .caption1 a{
	  display: block;
	  margin-top: 1em;
	  padding: 0.5em 0;
	  border: 1px solid #0A364B;
	  color: #0A364B;
	  text-decoration: none;
	  -webkit-transition: all 0.5s ease;
			  transition: all 0.5s ease;
  }
.caption1-b > div.cap-info{
  width:80%;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  color: #0A364B;
	  text-align: center;
	  -webkit-transform: translateX(-50%) translateY(-50%);
		  -ms-transform: translateX(-50%) translateY(-50%);
			  transform: translateX(-50%) translateY(-50%);}
  .caption1-b a{
	  display: block;
	  margin-top: 1em;
	  padding: 0.5em 0;
	  border: 1px solid #0A364B;
	  color: #0A364B;
	  text-decoration: none;
	  -webkit-transition: all 0.5s ease;
			  transition: all 0.5s ease;
  }
/*///-2-///*/
  .caption2 > div.cap-info{
    width:80%;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  color: #ffffff;
	  text-align: center;
	  -webkit-transform: translateX(-50%) translateY(-50%);
		  -ms-transform: translateX(-50%) translateY(-50%);
			  transform: translateX(-50%) translateY(-50%);}
  .caption2 a{
	  display: block;
	  margin-top: 1em;
	  padding: 0.5em 0;
	  border: 1px solid #ffffff;
	  color: #ffffff;
	  text-decoration: none;
	  -webkit-transition: all 0.5s ease;
			  transition: all 0.5s ease;
  }
/*///-3-///*/
  .caption3 > div.cap-info{
    width:80%;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  color: #303F03;
	  text-align: center;
	  -webkit-transform: translateX(-50%) translateY(-50%);
		  -ms-transform: translateX(-50%) translateY(-50%);
			  transform: translateX(-50%) translateY(-50%);}
  .caption3 a{
	  display: block;
	  margin-top: 1em;
	  padding: 0.5em 0;
	  border: 1px solid #303F03;
	  color: #303F03;
	  text-decoration: none;
	  -webkit-transition: all 0.5s ease;
			  transition: all 0.5s ease;
  }
  .caption1 a:hover,.caption1-b a:hover,.caption2 a:hover,.caption3 a:hover{
	  background-color: rgba(255, 255, 255, 0.5);
	  cursor: pointer;
  }
  .photo div.cap-info p {
	  line-height:1.2em;
	  padding:0;
	  margin:5px 0;
  }
.photo div p {
  font-weight: bold;
  }
.photo div.cap-info p {
  font-weight: normal;
  }
  .top-box-ttl-01,.caption-bg-01 {
	  font-size: 1em;
    font-weight: bold;
	  color:#0A364B;
	  background-color:#62CCFF;
	  padding:5px 0;
  }
  .top-box-ttl-02,.caption-bg-02 {
	font-size: 1em;
  font-weight: bold;
	color:#fff;
	background-color:#00A8E5;
	padding:5px 0;
}
.top-box-ttl-03,.caption-bg-03 {
	font-size: 1em;
  font-weight: bold;
	color:#303F03;
	background-color:#FFE502;
	padding:5px 0;
}
  /*///-
  .top-box-ttl-01,.caption-bg-01 {
	  font-size: 1em;
    font-weight: bold;
	  color:#0A364B;
	  background-color:#A7DCF5;
	  padding:5px 0;
  }
  .top-box-ttl-02,.caption-bg-02 {
	font-size: 1em;
  font-weight: bold;
	color:#fff;
	background-color:#0083B1;
	padding:5px 0;
}
.top-box-ttl-03,.caption-bg-03 {
	font-size: 1em;
  font-weight: bold;
	color:#303F03;
	background-color:#eee595;
	padding:5px 0;
}
-///*/

@media screen and (max-width: 1366px) {
    div.photo p {
    font-size:14px;
}
    .top-box-ttl-01,.caption-bg-01 {
	  font-size: 0.7em;
	  color:#0A364B;
	  background-color:#A7DCF5;
	  padding:5px 0;
  }
  .top-box-ttl-02,.caption-bg-02 {
	font-size: 0.7em;
	color:#fff;
	background-color:#0083B1;
	padding:5px 0;
}
.top-box-ttl-03,.caption-bg-03 {
	font-size: 0.7em;
	color:#303F03;
	background-color:#eee595;
	padding:5px 0;
}
}

@media screen and (max-width: 480px) {
  .photo{
	width:100%;
	height:200px;
  }
  div.photo p {
    font-size:12px;
}
  .top-box-ttl-01,.caption-bg-01 {
	  font-size: 0.5em;
	  color:#0A364B;
	  background-color:#A7DCF5;
	  padding:5px 0;
  }
  .top-box-ttl-02,.caption-bg-02 {
	font-size: 0.5em;
	color:#fff;
	background-color:#0083B1;
	padding:5px 0;
}
.top-box-ttl-03,.caption-bg-03 {
	font-size: 0.5em;
	color:#303F03;
	background-color:#eee595;
	padding:5px 0;
}
}