@charset "utf-8";


/**************************************************50
 * staff
 **************************************************/
#staff{
}
#staff:after{
	background-repeat: no-repeat;
	content: "";
	display: block;
	padding-top: 25.75%;
}
#staff.lazyloaded:after{
	background-image: url("https://ins-parasol.co.jp/images/user/staff/main.jpg");
}
@media screen and (max-width:767px){
	#staff{
		margin-bottom: 6.25%;
	}
	#staff:after{
		background-position: 46.875% top;
		background-size: 135% auto;
	}
}
@media screen and (min-width:768px){
	#staff{
		margin-bottom: 100px;
	}
	#staff:after{
		background-position: center center;
		background-size: contain;
	}
}


/**************************************************50
 * staff_list
 **************************************************/
#staff_list{
}
#staff_list ul{
	text-align: center;
}
#staff_list ul > li{
	background-color: #FFFFFF;
	box-shadow: 1px 1px 6px 2px rgb(0, 0, 0, 0.2);
	display: inline-block;
	line-height: 1.2;
	vertical-align: top;
}
#staff_list ul > li a{
	display: block;
	position: relative;
	overflow: hidden;
}
#staff_list ul > li a:before{
	content: "";
	display: block;
	padding-top: 100%;
}
#staff_list ul > li a img{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease-out 0s;
	width: 100%;
}
#staff_list ul > li a:hover img{
	-ms-transform: translate(-50%, -50%) scale(1.1);
	-webkit-transform: translate(-50%, -50%) scale(1.1);
	transform: translate(-50%, -50%) scale(1.1);
}
#staff_list ul > li span{
	color: #212121;
	display: block;
	margin-bottom: 0.5em;
}
#staff_list ul > li strong{
	color: #212121;
	display: block;
	font-weight: normal;
}
#staff_list ul > li ruby{
	display: block;
}
@media screen and (min-width:320px) and (max-width:359px){
	#staff_list ul > li span{
		font-size: 50%;
	}
	#staff_list ul > li strong{
	}
	#staff_list ul > li ruby{
		font-size: 50%;
	}
}
@media screen and (max-width:359px){
	#staff_list ul > li{
		width: 75%;
	}
	#staff_list ul > li a{
		margin-bottom: 4.166666666666667%;
	}
	#staff_list ul > li span{
		padding: 0 2.083333333333333%;
	}
	#staff_list ul > li strong{
		padding: 0 2.083333333333333%;
	}
	#staff_list ul > li ruby{
		padding: 0 2.083333333333333%;
	}
}
@media screen and (min-width:360px) and (max-width:413px){
	#staff_list ul > li span{
		font-size: 62.5%;
	}
	#staff_list ul > li strong{
		font-size: 112.5%;
	}
	#staff_list ul > li ruby{
		font-size: 62.5%;
	}
}
@media screen and (min-width:360px) and (max-width:639px){
	#staff_list ul > li{
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
	#staff_list ul > li:nth-child(even){
		margin-left: 3.125%;
	}
	#staff_list ul > li a{
		margin-bottom: 6.896551724137931%;
	}
	#staff_list ul > li span{
		padding: 0 3.448275862068966%;
	}
	#staff_list ul > li strong{
		padding: 0 3.448275862068966%;
	}
	#staff_list ul > li ruby{
		padding: 0 3.448275862068966%;
	}
}
@media screen and (min-width:414px) and (max-width:479px){
	#staff_list ul > li span{
		font-size: 62.5%;
	}
	#staff_list ul > li strong{
		font-size: 125%;
	}
	#staff_list ul > li ruby{
		font-size: 62.5%;
	}
}
@media screen and (min-width:480px) and (max-width:767px){
	#staff_list ul > li span{
		font-size: 62.5%;
	}
	#staff_list ul > li strong{
		font-size: 137.5%;
	}
	#staff_list ul > li ruby{
		font-size: 62.5%;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#staff_list ul > li{
		width: -webkit-calc((100% - (3.125% * 4)) / 3);
		width: calc((100% - (3.125% * 4)) / 3);
	}
	#staff_list ul > li:not(:nth-child(3n+1)){
		margin-left: 3.125%;
	}
	#staff_list ul > li a{
		margin-bottom: 5.357142857142857%;
	}
	#staff_list ul > li span{
		padding: 0 2.678571428571429%;
	}
	#staff_list ul > li strong{
		padding: 0 2.678571428571429%;
	}
	#staff_list ul > li ruby{
		padding: 0 2.678571428571429%;
	}
}
@media screen and (max-width:767px){
	#staff_list{
		margin-bottom: 6.25%;
	}
	#staff_list ul{
	}
	#staff_list ul > li{
		margin-bottom: 3.125%;
		padding-bottom: 3.125%;
	}
	#staff_list ul > li a{
	}
	#staff_list ul > li span{
	}
	#staff_list ul > li strong{
	}
	#staff_list ul > li ruby{
	}
}
@media screen and (min-width:768px){
	#staff_list{
		margin-bottom: 50px;
	}
	#staff_list ul{
	}
	#staff_list ul > li{
		margin-bottom: 50px;
		padding-bottom: 20px;
	}
	#staff_list ul > li a{
		margin-bottom: 20px;
	}
	#staff_list ul > li span{
		padding: 0 10px;
	}
	#staff_list ul > li strong{
		padding: 0 10px;
	}
	#staff_list ul > li ruby{
		padding: 0 10px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#staff_list ul > li{
		width: 225px;
	}
	#staff_list ul > li:not(:nth-child(3n+1)){
		margin-left: 20px;
	}
	#staff_list ul > li span{
		font-size: 75%;
	}
	#staff_list ul > li strong{
		font-size: 137.5%;
	}
	#staff_list ul > li ruby{
		font-size: 75%;
	}
}
@media screen and (min-width:940px){
	#staff_list ul{
		margin-left: auto;
		margin-right: auto;
		max-width: 905px;
	}
	#staff_list ul > li span{
		font-size: 87.5%;
	}
	#staff_list ul > li strong{
		font-size: 150%;
	}
	#staff_list ul > li ruby{
		font-size: 87.5%;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#staff_list ul > li{
		width: 270px;
	}
	#staff_list ul > li:not(:nth-child(3n+1)){
		margin-left: 30px;
	}
}
@media screen and (min-width:1024px){
	#staff_list ul > li{
		width: 275px;
	}
	#staff_list ul > li:not(:nth-child(3n+1)){
		margin-left: 40px;
	}
}


/**************************************************50
 * staff_detail
 **************************************************/
#staff_detail{
	display: none;
}
[id^="staff_detail_"]{
	background-color: #FFFFFF;
}
[id^="staff_detail_"] picture{
	overflow: hidden;
	position: relative;
}
[id^="staff_detail_"] picture:before{
	content: "";
	display: block;
}
[id^="staff_detail_"] picture img{
	position: absolute;
	top: 0;
	left: 50%;
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
[id^="staff_detail_"] figcaption{
	line-height: 1.6;
}
[id^="staff_detail_"] figcaption h2{
	font-weight: normal;
	line-height: 1.2;
	padding: 0.2em 0.4em;
	position: relative;
}
[id^="staff_detail_"] figcaption h2:before{
	background-color: #21A480;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	-ms-transform: translate(-100%, -50%);
	-webkit-transform: translate(-100%, -50%);
	transform: translate(-100%, -50%);
}
[id^="staff_detail_"] figcaption h2 span{
	color: #212121;
	display: block;
	font-weight: normal;
	margin-bottom: 0.2em;
}
[id^="staff_detail_"] figcaption h2 strong{
	color: #212121;
	font-weight: normal;
}
[id^="staff_detail_"] figcaption h2 ruby{
	font-weight: normal;
}
[id^="staff_detail_"] figcaption > p{
	font-size: 87.5%;
}
[id^="staff_detail_"] figcaption table{
	font-size: 87.5%;
	text-align: left;
}
[id^="staff_detail_"] figcaption table tr th{
	background-color: #ccc;
	font-weight: normal;
}
[id^="staff_detail_"] figcaption table tr td{
}
@media screen and (max-width:767px){
	[id^="staff_detail_"]{
		margin: 0 -1px;
		padding: 3.333333333333333%;
	}
	[id^="staff_detail_"] picture{
		margin-bottom: 3.571428571428571%;
	}
	[id^="staff_detail_"] picture:before{
		padding-top: 50%;
	}
	[id^="staff_detail_"] picture img{
		width: 50%;
	}
	[id^="staff_detail_"] figcaption{
	}
	[id^="staff_detail_"] figcaption h2{
		margin-bottom: 3.571428571428571%;
	}
	[id^="staff_detail_"] figcaption h2:before{
		width: 2px;
	}
	[id^="staff_detail_"] figcaption h2 span{
		font-size: 62.5%;
	}
	[id^="staff_detail_"] figcaption h2 strong{
		font-size: 125%;
	}
	[id^="staff_detail_"] figcaption h2 ruby{
		font-size: 50%;
	}
	[id^="staff_detail_"] figcaption > p{
		margin-bottom: 3.571428571428571%;
	}
	[id^="staff_detail_"] figcaption table,
	[id^="staff_detail_"] figcaption table tbody,
	[id^="staff_detail_"] figcaption table tr,
	[id^="staff_detail_"] figcaption table tr th,
	[id^="staff_detail_"] figcaption table tr td{
		display: block;
	}
	[id^="staff_detail_"] figcaption table{
	}
	[id^="staff_detail_"] figcaption table tr th{
		padding: 0.8928571428571429% 3.571428571428571%;
	}
	[id^="staff_detail_"] figcaption table tr td{
		padding: 0.8928571428571429% 3.571428571428571%;
	}
}
@media screen and (min-width:768px){
	[id^="staff_detail_"]{
		background-color: #FFFFFF;
		padding-top: 30px;
	}
	[id^="staff_detail_"] picture{
	}
	[id^="staff_detail_"] picture:before{
		padding-top: 42.7%;
	}
	[id^="staff_detail_"] picture img{
		width: 35%;
	}
	[id^="staff_detail_"] figcaption{
	}
	[id^="staff_detail_"] figcaption h2{
		margin-bottom: 20px;
	}
	[id^="staff_detail_"] figcaption h2:before{
		width: 4px;
	}
	[id^="staff_detail_"] figcaption h2 span{
		font-size: 75%;
	}
	[id^="staff_detail_"] figcaption h2 strong{
		font-size: 150%;
		margin-right: 0.5em;
	}
	[id^="staff_detail_"] figcaption h2 ruby{
		font-size: 62.5%;
	}
	[id^="staff_detail_"] figcaption > p{
		margin-bottom: 20px;
	}
	[id^="staff_detail_"] figcaption table{
		background-color: #FFFFFF;
	}
	[id^="staff_detail_"] figcaption table tr th{
		padding: 0.5em 1em;
		width: 10em;
	}
	[id^="staff_detail_"] figcaption table tr td{
		padding: 0.5em 1em;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	[id^="staff_detail_"]{
		width: 700px;
	}
	[id^="staff_detail_"] figcaption{
		padding: 15px 20px;
	}
}
@media screen and (min-width:940px) and (max-width:1199px){
	[id^="staff_detail_"]{
		width: 860px;
	}
	[id^="staff_detail_"] figcaption{
		padding: 20px 30px;
	}
}
@media screen and (min-width:1200px){
	[id^="staff_detail_"]{
		width: 1000px;
	}
	[id^="staff_detail_"] figcaption{
		padding: 30px 40px;
	}
}