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

#topimg{
	position:relative;
	height:auto;
	width:100%;
	/*background:url(../img/person/index/top.jpg) center no-repeat;*/
	}

#topimg h3.catch{
	text-align:center;
	position:absolute;
	top:45%;
	left:0;
	right:0;
	margin:0 auto;}

#person #topimg .textbox{
	width:720px;
	height: auto;
	background-color: rgba( 163, 62, 156, 0.8 );
	padding:3vw;
	font-size:1.6rem;
	color:#FFF;
	position:absolute;
	bottom:-160px;
	left:0;
	right:0;
	margin:0 auto;}

#person #topimg .textbox p + p{
	margin-top:2rem;}

#person .wrap{
	width:100%;
	margin-top:100px;
	padding-left:0;
	padding-right:0;}

.people{
	display:block;
	width:80%;
	padding:60px 20px;
	margin-top:80px;}

.people h3{
	font-size:2.4vw;
	line-height:1.3;
	margin:0 0 20px;
	color:#FFF;
}

a.people{
	color:#000;}

a.people:hover h3 span{
	background:#f4901e;
	-webkit-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
	}


.people.kasai{background:url(../img/person/index/kasai.jpg) no-repeat; background-size:cover;}
.people.izawa{background:url(../img/person/index/izawa.jpg) no-repeat; background-size:cover;}
.people.takagi{background:url(../img/person/index/takagi.jpg) no-repeat; background-size:cover;}
.people.hayashi{background:url(../img/person/index/hayashi.jpg) no-repeat; background-size:cover;}
.people.tanibayashi{background:url(../img/person/index/tanibayashi.jpg) no-repeat; background-size:cover;}
.people.iki{background:url(../img/person/index/iki.jpg) no-repeat; background-size:cover;}

.people.left{text-align:right;}
.people.right{text-align:left; margin-left:auto;}

.people .textbox{
	position:relative;
	width:50%;}

.people.left .textbox{margin-left:auto;}
.people.right .textbox{margin-right:auto;}

.people p{
	width:90%;
	text-align:left;}

.people.left p{
	margin-left:auto;
	margin-right:0;}
.people.right p{
	margin-left:0;
	margin-right:auto;}


.people p:last-of-type{margin-top:20px;}

.people.left p:last-of-type{text-align:right !important;}
.people.right p:last-of-type{text-align:left;}

.people h3 span{
	display:inline-block;
	background:#000;
	margin:5px 0;
	padding:0 10px;
	}

.people .occupation{
	display:inline-block;
	background:#a0a0a0;
	color:#FFF;
	padding:0 10px;
	margin-bottom:5px;}

.people .name{
	font-size:2.6vw;
	font-weight:bold;
	line-height:1.2;}

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

#person  p{
	font-size:1.2rem;
	text-align:left;}

#person  #topimg h3.catch{
	width:60%;
	top: 45%;
	right:0;
	left:0;
	margin: auto;}

#person #topimg .textbox{
	width:500px;
	padding:30px;
}

#person  #topimg .wrap{
	position: relative;
    width: 100%;
    padding: 50px 20px 25px;
	top:0;
	right:0;
	}

.people.kasai{background-position:100% center;}
.people.izawa{background-position:30% center;}
.people.takagi{background-position:80% center;}
.people.hayashi{background-position:50% center;}
.people.tanibayashi{background-position:70% center;}
.people.iki{background-position:50% center;}

.people{
	width:100%;}

.people h3{
	font-size:2.4rem;
}


}

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

#person  #topimg h3.catch{
	width:80%;
	top: 20%;}

#person #topimg .textbox{
	width:100%;
	padding:20px;
	font-size:1.6rem;
	position:relative;
	bottom:0;}


#person .wrap{
	margin-top:0;}

.people.kasai{
	margin-top:20px;}

.people{
	padding:100px 20px 10px;
	margin-top:50px;}

.people.kasai{background-position:67% center;}
.people.izawa{background-position:40% center;}
.people.takagi{background-position:65% center;}
.people.hayashi{background-position:58% center;}
.people.tanibayashi{background-position:55% center;}
.people.iki{background-position:50% center;}

.people h3{
	margin:0 0 10px;
}

.people p{
	font-size:1rem !important;}

.people p:last-of-type{margin-top:10px;}

.people .textbox{
	position:relative;
	width:80%;}

.people h3{
	font-size:1.4rem;
}

}