@charset "UTF-8";
/*------------------------
後続ページタイトル
------------------------*/
/*--------共通--------*/
#top-ttl{
	background: url(/file/img/contents/staff/pagettl_staff_pc.jpg) no-repeat;
	background-size: cover;
}
.img img{
	width: 100%;
	height: 100%;
}
.textarea{
	text-align: justify;
}

/*--------sp--------*/
@media screen and (max-width:767px) {
	#top-ttl {
	background: url(/file/img/contents/staff/pagettl_staff_pc.jpg) no-repeat;
	background-size: cover;
	background-position: top;
}
}

/*------------------------
スタッフ一覧
------------------------*/
#staff .top-block{
	background: #f2f0a1;
}
#staff .top-block .image img {
	object-fit: cover;
}
#staff .top-block .text-wrap .name-wrap h1 {
	font-weight: 600;
	line-height: 1;
}
#staff .top-block .text-wrap .name-wrap .en {
	color: #bf9bde;
	letter-spacing: .04em;
	line-height: 1;
}

/* メッセージ */
#staff .contents .text-wrap h2 {
	font-weight: bold;
	position: relative;
}
#staff .contents .text-wrap h2::after{
	content: "";
	background: #fcaebb;
	position: absolute;
	left: 0;
}
#staff .contents .img img{
	object-fit: cover;
}

/* 自由記述 */
#staff .free {
	background: #f7f5ef;
}
#staff .free h3 {
	font-weight: 600;
	display: flex;
	align-items: center;
}
#staff .free h3::before{
	content: "";
	background: var(--green);
	display: inline-block;
	border-radius: 10px;
}
#staff .free .flex-box .text-wrap .link a {
	color: var(--green);
	text-decoration: underline;
	display: flex;
	align-items: center;
	position: relative;
}
#staff .free .flex-box .text-wrap .link a::before{
	content: '';
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border-radius: 50%;
	flex-shrink: 0;
}
#staff .free .flex-box .text-wrap .link a::after{
	position: absolute;
	content: "";
	display: inline-block;
	background: url(/file/img/common/arrow-green.svg) no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 1;
}
/*--------pc--------*/
@media screen and (min-width:768px) {
	#staff .inner{
		padding: 65px 0 100px;
		width: 1000px;
	}
	#staff .top-block {
		margin-bottom: 60px;
		display: flex;
	}
	#staff .top-block .img {
		width: 400px;
		height: auto;
	}
	#staff .top-block .text-wrap {
		padding: 60px 40px;
		flex: 1;
	}
	#staff .top-block .text-wrap .name-wrap h1 {
		font-size: 32px;
		margin-bottom: 12px;
	}
	#staff .top-block .text-wrap .name-wrap .en {
		font-size: 15px;
		margin-bottom: 30px;
	}
	#staff .top-block .text-wrap table tr th,
	#staff .top-block .text-wrap table tr td  {
		font-size: 17px;
		line-height: 1.2;
		padding: 15px 0;
		border-bottom: 1px solid #fff;
	}
	#staff .top-block .text-wrap table tr th{
		width: 150px;
	}

	/* メッセージ */
	#staff .contents {
		display: flex;
		margin-bottom: 45px;
	}
	#staff .contents .text-wrap {
		flex: 1;
	}
	#staff .contents .text-wrap h2 {
		font-size: 26px;
		margin-bottom: 45px;
	}
	#staff .contents .text-wrap h2::after{
		width: 80px;
		height: 3px;
		bottom: -20px;
	}
	#staff .contents .text-wrap .textarea p {
		font-size: 17px;
		line-height: 1.765;        
		letter-spacing: .05em;
	}
	#staff .contents .text-wrap .textarea p:not(:last-child){
		margin-bottom: 25px;
	}
	#staff .contents .img {
		width: 376px;
		height: 356px;
		margin-left: 60px;
	}
	
	/* 自由記述 */
	#staff .free {
		border-radius: 15px;
		padding: 40px;
	}
	#staff .free h3 {
		font-size: 24px;
		margin-bottom: 20px;
	}
	#staff .free h3::before{
		height: 23px;
		width: 6px;
		margin-right: 10px;
	}
	#staff .free h3 span{
		flex: 1;
	}
	#staff .free .flex-box .img {
		width: 270px;
		height: 366px;
		margin-right: 50px;
	}
	#staff .free .flex-box .text-wrap {
		flex: 1;
	}
	#staff .free .flex-box .text-wrap .textarea {
		font-size: 16px;
		letter-spacing: .05em;
		line-height: 1.625;
		margin-bottom: 25px;
	}
	#staff .free .flex-box .text-wrap .link a {
		font-size: 16px;
	}
	#staff .free .flex-box .text-wrap .link a::before{
		width: 28px;
		height: 28px;
		border-radius: 50%;
		flex-shrink: 0;
		transform: scale(1);
		margin-right: 10px;
	}
	#staff .free .flex-box .text-wrap .link a:hover:before {
		transform: scale(0.8);
		transition: transform 0.3s ease;
	}
	#staff .free .flex-box .text-wrap .link a::after{
		width: 10px;
		height: 8px;
		left: 10px;
		transform: scale(1);
	}    
	#staff .free .flex-box .text-wrap .link a:hover::after {
		transform: scale(0.8);
		transition: transform 0.3s ease;
	}


}

/*--------sp--------*/
@media screen and (max-width:767px) {
	#staff .inner{
		padding: 10.67vw 4vw 10.67vw;
	}
	#staff .top-block{
		margin-bottom: 8vw;
		padding: 4vw 4vw 5.33vw;
		border-radius: 12px;
	}
	#staff .top-block .img {
		width: 70%;
		height: 74.67vw;
		margin: 0 auto 4vw;
	}
	#staff .top-block .img img {
		height: 100%;
		border-radius: 10px;
		object-fit: cover;
	}
	#staff .top-block .text-wrap .name-wrap{
		margin-bottom: 2.67vw;
	}
	#staff .top-block .text-wrap .name-wrap h1 {
		font-size: 6.4vw;
		margin-bottom: 2.67vw;
		text-align: center;
	}
	#staff .top-block .text-wrap .name-wrap .en {
		font-size: 4vw;
		text-align: center;
	}
	#staff .top-block .text-wrap table tr th,
	#staff .top-block .text-wrap table tr td  {
		font-size: 4vw;
		line-height: 1.2;
		padding: 2.67vw 0;
		border-bottom: 1px solid #fff;
	}
	#staff .top-block .text-wrap table tr th{
		width: 29.33vw;
	}
	
	/* メッセージ */
	#staff .contents {
		margin-bottom: 8vw;
	}
	#staff .contents .text-wrap {
		margin-bottom: 4vw;
	}
	#staff .contents .text-wrap h2 {
		font-size: 5.33vw;
		margin-bottom: 8.53vw;
		line-height: 1.3;
	}
	#staff .contents .text-wrap h2::after{
		width: 21.33vw;
		height: 3px;
		bottom: -4.27vw;
	}
	#staff .contents .text-wrap .textarea p {
		font-size: 4vw;
		line-height: 1.65;
		letter-spacing: .05em;
	}
	#staff .contents .text-wrap .textarea p:not(:last-child){
		margin-bottom: 4vw;
	}
	#staff .contents .img {
		width: 100%;
		height: 86.93vw;
	}
	
	/* 自由記述 */
	#staff .free {
		padding: 4vw 4vw 5.33vw;
		border-radius: 12px;
	}
	#staff .free h3 {
		font-size: 4.8vw;
		margin-bottom: 4vw;
	}
	#staff .free h3::before{
		height: 5.33vw;
		width: 5px;
		margin-right: 2.67vw;
	}
	#staff .free h3 span{
		flex: 1;
	}
	#staff .free .flex-box{
		display: block;
	}
	#staff .free .flex-box .img {
		width: 70%;
		height: auto;
		margin: 0 auto 4vw;
	}
	#staff .free .flex-box .text-wrap .textarea {
		font-size: 4vw;
		letter-spacing: .05em;
		line-height: 1.625;
		margin-bottom: 2.67vw;
	}
	#staff .free .flex-box .text-wrap .link a {
		font-size: 4vw;
	}
	#staff .free .flex-box .text-wrap .link a::before{
		width: 6.93vw;
		height: 6.93vw;
		border-radius: 50%;
		flex-shrink: 0;
		margin-right: 2.67vw;
	}
	#staff .free .flex-box .text-wrap .link a::after{
		width: 2.67vw;
		height: 2.13vw;
		left: 2.13vw;
	} 

}