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


section#staff  #staff_list {
	max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: start;
    -ms-flex-line-pack: stretch;
    -ms-flex-align: start;
    justify-content: center;
    align-items: center;
}
section#staff  #staff_list article{
	width:25%;
	height:250px;
}

section#staff  #staff_list article.blank{
	-webkit-background-size: 15px 15px;
	-moz-background-size: 15px 15px;
	background-size: 15px 15px;
}

section#staff  #staff_list article.occupation p{
	color:white;
	display:block;
	margin:35% 15%;
	text-align:center;
	border-bottom:1px solid;
	font-size:1.5em;
	box-sizing:border-box;
}

section#staff  #staff_list article .inner{
	background-position:top left;
	background-size:auto 100%;
	background-repeat:no-repeat;
	
}

section#staff  #staff_list article#mizuno-t-1 , section#staff  #staff_list article#mizuno-t-1 .inner{
	background-image:url(../leader/image/1mizuno-tadamasa3.jpg);
}
section#staff  #staff_list article#mizuno-k-2 ,section#staff  #staff_list article#mizuno-k-2  .inner{
	background-image:url("../leader/image/2mizuno-katsunari3.jpg");

}
section#staff  #staff_list article#mizuno-t-3 ,section#staff  #staff_list article#mizuno-t-3 .inner{
	background-image:url("../leader/image/3mizuno-tadakiyo2.jpg");
}
section#staff  #staff_list article#matsu-t-4 , section#staff  #staff_list article#matsu-t-4 .inner{
	background-image:url(../leader/image/4matsudaira-tadahusa.jpg);
}
section#staff  #staff_list article#matsu-s-5 , section#staff  #staff_list article#matsu-s-5 .inner{
	background-image:url("../leader/image/5matsudaira-sadamasa3.jpg");
}
section#staff  #staff_list article#inagaki-6 , section#staff  #staff_list article#inagaki-6 .inner{
	background-image:url(../leader/image/6inagaki-sigetsuna2.jpg);
}
section#staff  #staff_list article#abe-7 , section#staff  #staff_list article#abe-7 .inner{
	background-image:url("../leader/image/7abe-masaharu3.jpg");
}
section#staff  #staff_list article#honda-8 , section#staff  #staff_list article#honda-8 .inner{
	background-image:url(../leader/image/8honda-tadayoshi.jpg);
}


section#staff  #staff_list article#miura-9 , section#staff  #staff_list article#miura-9 .inner{
	background-image:url(../leader/image/9miura-akihiro.jpg);
}
section#staff  #staff_list article#doi-10 , section#staff  #staff_list article#doi-10 .inner{
	background-image:url("../leader/image/10doi-toshinobu3.jpg");
}
section#staff  #staff_list article#aki-11 , section#staff  #staff_list article#aki-11 .inner{
	background-image:url(../leader/image/aki-11.jpg);
}
section#staff  #staff_list article#aki-12 , section#staff  #staff_list article#aki-12 .inner{
	background-image:url(../leader/image/aki-12.jpg);
}

section#staff  #staff_list article img{
    z-index:101;
    position:absolute;
}

section#staff  #staff_list article:hover .hover_inner{
    background-color:rgba(0,0,0,0.5);
    display:block;
    height:250px;
          box-sizing:border-box;
    padding:5%;
    position:relative;
  }
  
  section#staff  #staff_list article:hover .hover_inner p{
    border:1px solid;
     top:5%;
     left:5%;
     display:block;
     width:90%;
    height:90%;
    color:rgba(255,255,255,0.7);
    position:absolute;
              box-sizing:border-box;
			  font-size:1.3em;
			  line-height:1.7em;
  }
    section#staff  #staff_list article .hover_inner span, section#staff  #staff_list article .hover_inner a{
        display:none;
    }
	
  section#staff  #staff_list article:hover .hover_inner span{
      color:white;
      position:absolute;
      top:30%;
      font-size:1.5em;
      letter-spacing:0.1em;
	  line-height:1.7em;
      left:24%;
      text-align:center;
      display:inline;
 }
  
  
 
  
    section#staff  #staff_list article#kunihiro:hover .hover_inner span,  section#staff  #staff_list article#hisada:hover .hover_inner span ,
	  section#staff  #staff_list article#oohashi:hover .hover_inner span ,  section#staff  #staff_list article#umeda:hover .hover_inner span {
    /*  left:31%;*/ text-align:center;
	}
  
  
    section#staff  #staff_list article:hover .hover_inner a{
      color:white;
      position:absolute;
      top:50%;
      font-size:0.8em;
      letter-spacing:0.1em;
      left:20%;
      text-align:center;
      border:1px solid;
      padding:1% 8%;
      display:inline;
  
  }
  
   section#staff  #staff_list article:hover .hover_inner small{
	   font-size:small;
	  color:white;
      position:absolute;
   
      letter-spacing:0.1em;
  /*    left:20%;*/
      text-align:center;

  }
  

section#staff  #staff_list:after{
	content:"";
	clear:both;
	display:block;
}

section#staff article#ocean{
	background-image:none;
}

section#staff article.three_lineup div{
	float:left;
	width:47%;
	margin-right:3%;
}
section#staff article#ocean div:nth-child(2n) img{
	 width:50%;
}
section#staff article#outdoor div:nth-child(2n) img{
	 width:60%;
}
section#staff article#cafe div:nth-child(2n) img{
	 width:35%;
}
section#staff article.three_lineup div:nth-child(2n) p{
	padding-top:1%;
}
section#staff article.three_lineup img{
	width:80%;
	max-width:350px;
}
section#staff article.three_lineup :after{
	content:"";
	clear:both;
	display:block;

}

.i {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;

width: 25%;
height: 120px;
box-shadow:0px 0px 1px 0px black inset;
transition: height .3s;

background-repeat:no-repeat;
background-position:center top;
background-size:auto 250px;　/*藩主の画像サイズ*/
}
.i > p {
text-align:center;
}


/*この数字はopenした時に開く、バックスペース。
カードの方ではない。250pxの差をつける*/
section#staff  #staff_list article.open{

	height:670px; 
}

.i > .inner {
	position: absolute;
	overflow: hidden;
	left: 2px;
	background-color: white;
	width: 100%;
	height: 0;
	margin-top: 250px;
	transition: height .25s;

}

.i > .inner img{
	width:30%;
	float:left;
}

.i > .inner p{
	float:right;
	width:55%;
	display:block;
	padding:4% 3%;
	/*padding-right:3%;*/
	box-sizing:border-box;
	font-size:0.9em;
	line-height:1.9em;
}

.i > .inner p big{
	font-size:2em;
	border-bottom:1px solid;
	display:block;
	margin-bottom:2%;
}
.i > .inner p big b{
	float:right;
	font-size:0.5em;
    line-height: 2;
	padding-bottom:-3%;
	
}

.i > .inner p span{
	display:block;
	padding-top:2%;
	font-weight:600;
}

.i > .inner p span:before{
	content:"資格：";
}

.i.open > .inner {
height:420px;　/*カードの縦の大きさ*/
}



@media only screen and (max-width: 890px) {
	.i > .inner p {
    width: 95%;
	padding:5%;
	
	}
	

	
	section#staff #staff_list article .inner {
    background:white!important;
	}



	
	section#staff article .inner p{
	font-size:0.9em;
	line-height:1.7em;
}
.i > .inner p big {
    font-size: 1.5em;
}
}
@media only screen and (max-width: 800px) {

section#staff #staff_list article {
width:25%;
box-sizing:border-box;
}
section#staff #staff_list article.open {
    height: 650px;

}
.i.open > .inner {
    height: 400px;
	
}

	.i > .inner p {
		float:none;
    width: 95%;
	padding: 5%;
	}
	
	

	
}



	  section#staff  #staff_list article:hover .hover_inner span{
  
      top:40%;
      font-size:1.2em;
	  line-height:1.5em;
	  letter-spacing:0;
   

 }
  

  
	
	
	}
	
	@media only screen and (max-width: 780px) {
	.i > .inner p {
    width: 95%;
	padding: 5% ;
	}
	
	

}
	@media only screen and (max-width: 690px) {
	.i > .inner p {
    width: 95%;
	padding: 5% ;
	}
	
}



	@media only screen and (max-width: 600px) {
		section#staff #staff_list article {
width:33.333%;

}
section#staff #staff_list article .inner {
    background:white!important;
	}
	section#staff #staff_list article.open {
    height: 650px;
}
.i.open > .inner {
    height: 400px;
}
section#staff article .inner p{
	    width:100%;
	font-size:0.9em;
		text-align:left;
	padding:3%;
}


	}
	
		@media only screen and (max-width: 400px) {
		section#staff #staff_list article {
width:50%;
}

	section#staff #staff_list article.open {
    height: 760px;
}
.i.open > .inner {
    height: 510px;
}
		}
		@media only screen and (max-width: 350px) {
				section#staff #staff_list article.open {
    height: 800px;
}
.i.open > .inner {
    height: 550px;
}

	  section#staff  #staff_list article:hover .hover_inner span{
  
      top:40%;
      font-size:1em;
	  line-height:1.5em;
	  left:15%;

	 
   

 }

		}

@media only screen and (max-width: 950px) {
section article .inner {
	width:90%;
	margin:0 auto;
}


}

@media only screen and (max-width: 680px) { 


section article .inner {
	width:100%;
	margin:0 auto;
}

section#staff article .inner big img {
    width: 100%!important;
	    margin-bottom: 2%;
}

section#staff article.three_lineup img{
	width:100%;
}

section#staff article.three_lineup {
    padding:3%;
	box-sizing:border-box;
	height: 17em;
}

section#staff article{
	width:100%;
	height:auto;
}


section#staff article .inner img:nth-of-type(2n){
    width:65px;
    padding-right:10px;
}
}