@charset "UTF-8";

/*----------------------------
#staff
----------------------------*/
#staff .main_img {
	padding: 370px 0 120px;
	background: url(../images/main_img.webp) top center / cover no-repeat;
	color: #fff;
}
#staff .main_img h1 span {
	display: block;
	text-align: center;
}
#staff .main_img h1 span:nth-of-type(1) {
	font-size: 280%;
	letter-spacing: 0.2em;
}
#staff .main_img h1 span:nth-of-type(2) {
	margin: 10px auto 0;
}
#staff .main_img h1 + p {
	margin: 120px auto 0;
	max-width: 1100px;
	width: 90%;
	line-height: 2.4;
}
#staff .pankuzu {
	margin: 70px auto 0;
	width: 80%;
}
#staff .category {
	margin: 40px auto 0;
	width: 80%;
	text-align: center;
}
#staff .category > div {
	font-size: 140%;
}
#staff .category > img {
	margin: 70px auto 0;
	max-width: 1128px;
	width: 90%;
}
#staff .category ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 30px auto 0;
}
#staff .category li {
	margin: 70px 2% 0 0;
	padding: 28px 0 20px;
	width: 23.33%;
	border: 1px solid #c7c7c7;
	border-radius: 60px;
	cursor: pointer;
}
#staff .category li:last-child {
	margin: 70px 0 0 0;
}
#staff .category li:hover {
	opacity: 0.7;
}
#staff .category li span {
	display: block;
}
#staff .category li span:nth-of-type(1) {
	color: #9c864b;
	font-size: 140%;
	font-weight: 500;
	line-height: 1.2;
}
#staff .category li span:nth-of-type(2) {
	font-size: 85%;
}
#staff .list {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	margin: 130px auto 0;
	padding: 0 0 0 1%;
	width: 81%;
	text-align: center;
}
#staff .list h2 {
	width: 100%;
	color: #9c864b;
	font-size: 140%;
}
#staff .list > div {
	overflow: hidden;
	position: relative;
	margin: 15px 0.5% 0;
	width: 24%;
	border-radius: 10px;
}
#staff .list > div:nth-of-type(-n+4) {
	margin: 130px 0.5% 0;
}
#staff .list > div img {
	width: 100%;
}
#staff .list > div > div {
	position: absolute;
	top: 47%;
	right: 0;
	left: 0;
	margin: 0 auto;
	color: #fff;
}
#staff .list > div > div img {
	margin: 20px auto 0;
	width: 45px;
}
#staff .list > div > div .font_en {
	font-size: 1.5vw;
}
#staff .list > div > div p {
	font-size: 0.7vw;
}
#staff .list div > img {
    filter: grayscale(100%); 
}

 
#staff .list[data-category="makeup"] > div,
#staff .list[data-category="advisor"] > div {
    position: relative;
}

#staff .list[data-category="makeup"] > div::before,
#staff .list[data-category="advisor"] > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(163, 116, 127, 0.3);
    pointer-events: none; 
    z-index: 1;
    border-radius: 10px;
}

#staff .list[data-category="photographer"] >div,
#staff .list[data-category="designer"] > div{
    position: relative;
}

#staff .list[data-category="photographer"] > div::before,
#staff .list[data-category="designer"] >  div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(156, 134, 75, 0.3);
    z-index: 1;
    pointer-events: none; 
    border-radius: 10px;
} 

#staff .list > div > div {
    position: absolute;
    top: 47%;
    right: 0;
    left: 0;
    margin: 0 auto;
    color: #fff;
    z-index: 10;
}

/*----------------------------
スマホ
----------------------------*/
@media screen and (max-width: 767px) {
	/*----------------------------
    #staff
    ----------------------------*/
	#staff .main_img {
		padding: 62vw 0 6vw;
		background: url(../images/main_img_sp.webp) center center / cover no-repeat;
	}
	#staff .main_img h1 + p {
		margin: 34vw auto 0;
		font-size: 90%;
		line-height: 2;
	}
	#staff .main_img h1 span:nth-of-type(2) {
		margin: 0 auto;
	}
	#staff .pankuzu {
		margin: 20px auto 0;
		width: 90%;
	}
	#staff .category {
		margin: 45px auto 0;
		width: 100%;
	}
	#staff .category > img {
		margin: 30px auto 0;
	}
	#staff .category ul {
		margin: 45px auto 0;
		border-top: 1px solid #c7c7c7;
	}
	#staff .category li,
	#staff .category li:nth-of-type(3n),
	#staff .category li:last-child {
		margin: 0 auto;
	}
	#staff .category li {
		padding: 20px 0 13px;
		width: 50%;
		border-top: none;
		border-left: none;
		border-radius: 0;
	}
	#staff .category li:nth-child(even) {
		border-right: none;
	}
	#staff .category li span:nth-of-type(1) {
		font-size: 110%;
	}
	#staff .category li span:nth-of-type(2) {
		margin: 2px auto 0;
		font-size: 80%;
	}
	#staff .list {
		margin: 40px auto 0;
		padding: 0;
		width: 95%;
	}
	#staff .list > div {
		margin: 5px 1% 0 0;
		width: 49%;
	}
	#staff .list > div:nth-of-type(-n+4) {
		margin: 5px 1% 0 0;
	}
	#staff .list > div:nth-of-type(-n+2) {
		margin: 30px auto 0;
	}
	#staff .list > div > div .font_en {
		font-size: 4vw;
	}
	#staff .list > div > div img {
		margin: 10px auto 0;
		width: 35px;
	}
}