@charset "utf-8";
/* CSS Document */

/*
#main
----------------*/
#main{
	width:900px;
	margin:0 auto;
	padding:30px;
	/*background:#f0f0f0;*/
}

h1{
	font-size:2.0em;
	margin:20px 0;
}

h2{
	font-size:1.5em;
	text-align:left;
	border-bottom:1px #000 solid;
	margin:20px 0;
}

/*
#name
----------------*/
#name ul{
	overflow:hidden;
}

#name li{
	float:left;
	width:250px;
	margin:10px;
	padding:10px;
	border:#000 1px solid;
}

.name-image{
	float:left;
	width:80px;
	/*background:#87cefa;*/

}

.name-text{
	float:right;
	width:170px;
	margin:0 auto;
	padding-top:10px;
	/*background:#ffefd5;*/
}

.name-text h3{
	font-size:1.2em;
	padding-bottom:10px;
}

/*=================================
ヒロトの担当
===================================*/

/*
#why
----------------*/
#why p{  
       margin: 10px;
       text-align: left;
}

.hiroto:before{
	content: ""; 
	display:inline-block;
	width: 50px;
	height: 50px;
	margin-right: 5px;
	background: url(../image/hiroto.png) no-repeat;
	position: relative;
	background-size: 100%;
}  

.rin:before{
	content: "";
	display: inline-block;
	width:50px;
	height:50px;
	margin-right: 5px;
	background:url(../image/rin.png) no-repeat;
	position:relative;
	bottom: -5px;
	background-size: 100%;
}

.kotaro:before{
	content:"";
	display:inline-block;
	width:50px;
	height:50px;
	margin-right:5px;
	background:url(../image/kotaro.png) no-repeat;
	position:relative;
	bottom:-5px;
	background-size: 100%;
}
/*==ここまで==========================*/

/*
#schedule
----------------*/
table{
	width:300px;
	margin:0 auto;
}

/*=================================
リンの担当
===================================*/

/*
#kansou
----------------*/
#kansou p{
	margin:10px;
	text-align:left;
}

/*=================================
コタローの担当
===================================*/

/*
#photo
----------------*/
#photo{
	overflow:hidden;
}

.pic{
	float:left;
	margin:5px;
	overflow:hidden;
}

.photo1 img{
  	transition: 0.5s;
}
 
.photo1 img:hover{
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		transform: rotateY(180deg);
}
.photo2 img{
  	transition: 0.3s;
}
 
 
.photo2 img:hover{
		-webkit-transform: scale(2.2);
		-moz-transform: scale(2.2);
		-ms-transform: scale(2.2);
		-o-transform: scale(2.2);
		transform: scale(2.2);
}

figure {
  position: relative;
  overflow: hidden;
  width: 290px;
}
figcaption {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
}
figure:hover figcaption {
  top: 0;
  left: 0;
}

figure h3{
	padding: 70px 0 5px;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

figure p{
	color: #fff;
    text-align: center;
}