@charset "utf-8";

/* --------------------------------
   □ general
-------------------------------- */ 
	.contents .accentArea:before{
		background-image: url("./../img/staff/accent.jpg");
	}
li{list-style:none;}	

/* --------------------------------
   □ #staffList
-------------------------------- */ 

/* --------------------------------
   □ lists
-------------------------------- */ 
	.contents .lists .group{
		margin-bottom:40px;
	}

	.contents .lists .group h2{
		position:relative;
		color:#6a0e2c;
		text-align:center;
		margin-bottom:33px;
	}
	.contents .lists .group h2 em{
		position:relative;
		display:inline-block;
		padding:0 29px;
		line-height:1.1;
		background:#f1f1f3 url(./../img/common/background.jpg) 0 0 repeat;
		font-size:200%;
		font-weight:500;
	}
	
	.contents .lists .group h2:before{
		position:absolute;

		content:"";
		width:100%;
		height:3px;
		top:60%;
		left:0;
		background:#6a0e2c;
	}
	
	.contents .lists .group h2 em span.en{
		display:block;
		font-size:43%;
		margin-bottom:11px;
		text-align:center;
	}

	.contents .lists .group ul.list{
		overflow:hidden;
		margin:0 auto;
		width:100%;
	}
	
	.contents .lists .group ul.list.user2{
		width:67%;
	}
	
	.contents .lists .group ul.list.user1{
		width:33.3%;
	}
	
	.contents .lists .group ul.list li{
		width:33%;
		margin-right:0.5%;
		float:left;
		margin-bottom:69px;
	}
	.contents .lists .group ul.list li:nth-child(3n){
		margin-right:0;
	}

	.contents .lists .group ul.list.user2 li{
		width:49%;
	}
	.contents .lists .group ul.list.user2 li:nth-child(3n){
		margin-right:0.5%;
	}
	.contents .lists .group ul.list.user2 li:nth-child(2n){
		margin-right:0;
	}
	
	.contents .lists .group ul.list.user1 li{
		width:100%;
	}
	.contents .lists .group ul.list li > a{
		position:relative;
		display:block;
		text-decoration:none;
		transition: all 300ms 0s ease;
		color:#333;
	}

	.contents .lists .group ul.list li > a p.vertical{
		position:absolute;
		top:8px;
		left:15px;
		font-weight:600;
		z-index:3;
		transition: all 300ms 0s ease;
	}
	
	.contents .lists .group ul.list li > a:before{
		position:absolute;
		top:13%;
		left:67%;
		z-index:1;
		content:url(./../img/staff/interview.png);
		transition: all 300ms 0s ease;

	}
	
	
	.contents .lists .group ul.list li.confirmed > a:before{

		animation-name: animation-down;
		-webkit-animation-name: animation-down;
	
		animation-duration: 1.5s;	
		-webkit-animation-duration: 1.5s;
	}
	
	.contents .lists .group ul.list li > a img{
		transition: all 300ms 0s ease;
	}
	.contents .lists .group ul.list li > a:hover{
		background:#fff;
	}
	.contents .lists .group ul.list li > a:hover img{
		opacity:0.9;
	}
	
	.contents .lists .group ul.list li > a:hover p.vertical{
	}

	.contents .lists .group ul.list li > a:hover:before{
		top:10%;
		transform: scale(1.04);
	}
	
	.contents .lists .group ul.list li dl dt{
		overflow:hidden;
		position:relative;
		display:table;
		width:100%;
		height:264px;
		text-align:center;
		background:#e2e2e3;
		margin-bottom:21px;
	}
	.contents .lists .group ul.list li dl dt span{
		display:table-cell;
		width:100%;
		height:100%;
		text-align:center;
		vertical-align:bottom;
	}
		.contents .lists .group ul.list li dl dt img{
		}
	
	.contents .lists .group ul.list li dl dd{
		text-align:center;
		color:#60132c;
		padding-bottom:15px;
	}
	.contents .lists .group ul.list li dl dd p{
		text-align:center;
	}
	.contents .lists .group ul.list li dl dd p.class{
		font-size:87%;
		line-height:1.3;
		margin-bottom:12px;
	}
	.contents .lists .group ul.list li dl dd p.class small{
		display:block;
		text-align:center;
	}
	.contents .lists .group ul.list li dl dd p.name{
		position:relative;
		padding-bottom:12px;
		text-align:center;
	}
	.contents .lists .group ul.list li dl dd p.name:before{
		position:absolute;
		left:50%;
		bottom:0;
		background:#60132c;
		width:30px;
		height:1px;
		margin-left:-15px;
		content:"";
	}
	.contents .lists .group ul.list li dl dd p.name em{
		font-size:134%;
		line-height:1.1;
		margin-bottom:6px;
	}
	.contents .lists .group ul.list li dl dd p.name span.ruby{
		font-size:68%;
		display:block;
		text-align:center;
		color:#969696;
	}
	.contents .lists .group ul.list li dl dd p.name .sns{
		position:absolute;
		top:0;
		left:50%;
		margin-left:3em;
	}
	.contents .lists .group ul.list li dl dd p.hobby{
		font-size:87%;
		line-height:1.3;
		margin-bottom:0;
	}
	
	
/* --------------------------------
   □ #staffDetails
-------------------------------- */ 
	.contents .details{
		padding-top:40px;
	}	
	
	
	/* --------------------------------
	   □ .head
	-------------------------------- */ 
	.contents .details .head{
		box-sizing:border-box;
		position:relative;
		min-height:487px;
		margin-bottom:75px;
		padding:87px 0 0 71px;
		color:#60132c;
	}
	
	.contents .details .head:after{
		clear:both;
		content:"";
		display:block;
	}

	.contents .details .head:before{
		position:absolute;
		top:0;
		left:0;
		width:757px;
		height:488px;
		background:#edead7;
		content:"";
	}
	.contents .details .head > p.image{
		position:absolute;
		top:-118px;
		right:0;
		margin:0;
	}
	
	.contents .details .head .explain{
		position:relative;
		width:650px;
		z-index:1;
	}
	
	.contents .details .head .explain p.interview{
		margin-bottom:37px;
	}
	.contents .details .head .explain h2{
		font-size:250%;
		font-weight:600;
		line-height:1.3;
		margin-bottom:28px;
		text-shadow: 
			#fff 1px 1px 0, #fff -1px -1px 0,/*右下、左上*/
			#fff -1px 1px 0, #fff 1px -1px 0,/*右上、左下*/
			#fff 0px 1px 0, #fff  0-1px 0,/*右、左*/
			#fff -1px 0 0, #fff 1px 0 0;/*上、下*/
	}

	.contents .details .head p.class{
		font-size:87%;
		line-height:1.3;
		margin-bottom:12px;
	}
	.contents .details .head p.class small{
	}
	.contents .details .head p.name{
		position:relative;
	}

	.contents .details .head p.name em{
		font-size:134%;
		line-height:1.1;
		margin-bottom:6px;
	}
	.contents .details .head p.name span.ruby{
		font-size:68%;
		display:block;
		color:#969696;
	}


	.contents .details .body{
		padding: 0 120px;
	}

	.contents .details .body .leadArea{
		margin-bottom: 78px;

	}
	.contents .details .body .leadArea p{
		line-height: 1.8;
	}

	.contents .details .body section h3{
		font-size: 193%;
		font-weight: 700;
		color: #60132c;
		padding-bottom:15px;
		border-bottom:1px solid #60132c;
		margin-bottom:50px;
	}


	.contents .details .body .division{
		margin-bottom: 78px;
	}

	.contents .details .body .division p.image{
		margin-bottom: 40px;
		text-align: center;
	}
	.contents .details .body .division p.image span{
		display: block;
		margin: 10px 0 0 0;
		text-align: center;
		color:#808080;
		font-size:84%;
	}
	.contents .details .body .division p.image img{
		max-width: 100%;
	}
	.contents .details .body .division dl dt{
		font-size: 143%;
		font-weight: 700;
		color: #60132c;
		margin-bottom: 24px;
	}

	.contents .details .body dl dd,
	.contents .details .body dl p{
		line-height: 1.8;
	}

	.contents .details .body dl dd{
		margin-bottom:1.8em;
	}
	.contents .details .body dl dd:last-child{
		margin-bottom:0;
	}


	.contents .details .body dl p{
		margin-bottom: 1.4em;
	}
	.contents .details .body dl p:last-child{
		margin-bottom: 0;
	}

	.contents .details .body dl p em{
		color: #60132c;
	}
	.contents .details .body .buttonStyle{
		text-align:center;
	}
	.contents .details .body .buttonStyle a{
		padding:15px 40px;
		border-radius:40px;
	}

@media only screen and
(max-width : 767px) {
	
	
	
/* --------------------------------
   □ #staffList
-------------------------------- */ 

/* --------------------------------
   □ lists
-------------------------------- */ 
	.contents .lists .group{
		margin-bottom:8%;
	}

	.contents .lists .group h2{
		margin-bottom:8%;
	}
	.contents .lists .group h2 em{
		padding:0 3%;
		font-size:150%;
	}
	
	.contents .lists .group h2:before{
		height:2px;
		top:60%;
	}
	
	.contents .lists .group h2 em span.en{
		font-size:43%;
		margin-bottom:4px;
	}

	.contents .lists .group ul.list{
		width:auto;
	}
	
	.contents .lists .group ul.list.user2{
		width:auto;
	}
	
	.contents .lists .group ul.list.user1{
		width:auto;
	}
	
	.contents .lists .group ul.list li{
		width:auto;
		margin-right:0;
		float:none;
		margin-bottom:7%;
	}

	.contents .lists .group ul.list.user2 li{
		width:auto;
	}
	.contents .lists .group ul.list.user2 li:nth-child(3n){
		margin-right:0;
	}
	.contents .lists .group ul.list.user2 li:nth-child(2n){
		margin-right:0;
	}
	
	.contents .lists .group ul.list.user1 li{
		width:auto;
	}
	.contents .lists .group ul.list li > a{
	}
	
	.contents .lists .group ul.list li dl dt{
		margin-bottom:2%;
	}

	.contents .lists .group ul.list li dl dd{
		padding-bottom:2%;
	}
	.contents .lists .group ul.list li dl dd p.class{
		margin-bottom:1.5%;
	}
	.contents .lists .group ul.list li dl dd p.name{
		padding-bottom:1.5%;
	}

/* --------------------------------
   □ #staffDetails
-------------------------------- */ 
	.contents .details{
		padding-top:0;
	}	
	
	
	/* --------------------------------
	   □ .head
	-------------------------------- */ 
	.contents .details .head{
		box-sizing:border-box;
		position:relative;
		min-height:487px;
		margin-bottom:8%;
		padding:8% 0 0 8%;
		color:#60132c;
	}
	
	.contents .details .head:before{
		position:absolute;
		top:0;
		left:0;
		width:90%;
		height:80%;
		background:#edead7;
		content:"";
	}
	.contents .details .head > p.image{
		position:relative;
		top:0;
		right:0;
		margin:0;
	}
	
	.contents .details .head .explain{
		position:relative;
		width:auto;
		z-index:1;
	}
	
	.contents .details .head .explain p.interview{
		margin-bottom:3%;
	}
	.contents .details .head .explain h2{
		font-size:150%;
		margin-bottom:3%;
	}

	.contents .details .head p.class{
		margin-bottom:1.5%;
	}

	.contents .details .body{
		padding: 0 0;
	}

	.contents .details .body .leadArea{
		margin-bottom: 8%;

	}
	.contents .details .body .leadArea p{
		line-height: 1.8;
	}

	.contents .details .body section h3{
		font-size: 133%;

		padding-bottom:2%;
		margin-bottom:5%;
	}


	.contents .details .body .division{
		margin-bottom: 7%;
	}

	.contents .details .body .division p.image{
		margin-bottom: 4%;
	}
	.contents .details .body .division p.image span{
		margin: 1% 0 0 0;
	}

	.contents .details .body .division dl dt{
		font-size: 120%;
		margin-bottom: 3%;
	}


	.contents .details .body .buttonStyle a{
		padding:10px 40px;
	}


}