section,p{
	margin: 0;
	padding: 0;
}
body{
	background-color: #EDE9E2;
}
.body-stop-scroll{
	overflow: hidden;
}
.member-banner{
	position: relative;
}
.pc-banner{
	width: 100%;
	height: 22vw;
	& > img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		vertical-align: middle;
	}
}
.sp-banner{
	display: none;
	width: 100%;
	height: 115.5vw;
	& > img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		vertical-align: middle;
	}
}
.member-head{
	position: absolute;
	width: 38.3vw;
	height: 9.4vw;
	bottom: -6vw;
	left: -1vw;
	& > img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		vertical-align: middle;
	}
}

.member-page{
	font-size: 1.125rem;
	font-weight: bold;
	font-style: normal;
	
	padding: 0 5vw;
	/*padding-bottom: 16.5vw;*/
	padding-top: 9.5vw;

	background-image: url("../images/background/05_bg-pc.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.member-list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.member-detail{
	width: 25%;
	margin-bottom: 2em;
}
.member-detail:hover .member-image img{
	transform: scale(1.2);
	filter: brightness(0.5) contrast(0.9) blur(0.09px);
	clip-path: polygon(23% 8%, 92% 8%, 77% 92%, 8% 92%);
}
.member-image{
	width: 90%;
	height: fit-content;
	background: #000;
	border: 5px solid #000;
	
	clip-path: polygon(18% 0, 100% 0%, 82% 100%, 0% 100%);
	& > img{
		width: 100%;
		height: 100%;
		vertical-align: middle;
		object-fit: cover;
		object-position: center;
		clip-path: polygon(18% 0, 100% 0%, 82% 100%, 0% 100%);
		transition: all 0.4s;
	}
}
.member-name{
	position: relative;
	left: 0%;
	bottom: 0%;

	width: 69%;
	height: 4em;

	border: 5px solid #000;
	transform: skew(-10.1deg) translate(20%,-50%);

	padding: 0;
	margin: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	box-shadow: #000 1.3vw 1.5vw 0px 0px;

	font-size: 1.25vw;
	font-weight: bold;
	line-height: 1.3em;

	& > span{
		transform: skew(10deg);
	}
}
.member-name::before{
	content: "READ MORE";
	display: inline-block;

	position: absolute;
	top: 100%;
	right: 0;

	font-size: 0.8vw;
	line-height: 2em;
	font-weight: bold;
	text-decoration: none;
	color: #11c7b2;

	transform: skew(12deg);
	cursor: pointer;
}
.even{
	background-color: #FF7600;
}
.odd{
	background-color: #EBE6DE;
}
.more-btn-section{
	padding: 10vw 0 7.1vw;
	& a{
		text-decoration: none;
	}
}
#more-svg{
	width: 13%;
	transition: opacity 1s;
}
.more-svg-visible{
	opacity: 1;
}
.more-svg-hide{
	opacity: 0;
}


#popup-screen{
	width: 100%;
	height: 100%;

	position: fixed;
	top: 0;
	left: 0;

	font-size: max(2vmin,16px);

	overflow: auto;
	background-color: rgba(0,0,0,0.5);
	z-index: 1040;
}
#popup-screen::before,#popup-screen::after{
	content: " ";
	display: block;
	width: 100%;
	height: 2em;
	flex-shrink: 0;
	position: relative;
	z-index: -2;
}
.popup-screen_hide{
	display: none;
}
.popup-screen_visible{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-shrink: 0;
}
#popup-window{
	display: flex;

	width: 80%;
	min-width: 700px;
	min-height: fit-content;

	margin: 0 auto;
	position: relative;
	z-index: 0;

	padding-right: 5em;
	padding-bottom: 5em;

	border: 5px solid #000;
	box-shadow: 10px 10px 0px -5px #fff, 10px 10px 0px 0px #000;

	background-color: white;
}
#popup-back{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
}
#popup-close{
	position: fixed;
	top: 0;
	/*right: 0;*/
	width: 3em;
	height: 3em;
	padding: 0.5em;
	/*transform: translate(100%,-100%);*/
	background-color: #fd7e14;
	border-radius: 1.5em;

	& > img{
		width: 100%;
		height: 100%;
		object-fit:cover;
		object-position: center;
	}
}
#popup-images{
	width: 30em;
	height: 20em;
	position: relative;
	top: -2em;
	right: 5em;
	/*transform: translate(-20%,-10%);*/
}
#popup-member-image{
	width: 100%;
	height: 100%;
	
	overflow: hidden;
	background: #000;
	border: 5px solid #000;

	-webkit-clip-path: polygon(18% 0, 100% 0%, 82% 100%, 0% 100%);
	clip-path: polygon(18% 0, 100% 0%, 82% 100%, 0% 100%);
	& > img{
		width: 100%;
		height: 100%;
		-webkit-clip-path: polygon(18% 0, 100% 0%, 82% 100%, 0% 100%);
		clip-path: polygon(18% 0, 100% 0%, 82% 100%, 0% 100%);
		object-fit: cover;
		object-position: center;
	}
}
#popup-member-image-bg{
	width: 100%;
	height: 100%;

	position: absolute;
	right: -2em;
	bottom: -2em;
	z-index: -1;
	& > img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: right;
	}
}
#popup-member-text{
	width: 100%;
	height: fit-content;
	/*font-size: 1.125rem;*/
	font-weight: bold;

	/*font-size: max(2.2vmin,12px);*/
	/*padding-left: 2em;*/
}
#popup-member-name{
	width: 100%;
	
	font-size: 2em;
	line-height: 1em;
	padding-top: 2em;
	padding-bottom: 1em;	

	border-bottom: solid 1px #707070;
}
#popup-member-description{
	width: 100%;

	overflow: auto;

	font-size: 1em;
	margin-top: 2em;
	line-height: 2em;
}
.action-bottom-widget{
	background-color: #EDE9E2;
}
@media (max-width: 1280px){
	#popup-screen{
		font-size: max(2.2vmin, 12px);
	}
	#popup-window{
		width: 90%;
		min-width: 25em;
		min-height: fit-content;
		flex-direction: column;
		padding: 2em 2em;
	}
	#popup-close{
		/*transform: translate(0,0);*/
	}
	#popup-images{
		width: 10em;
		height: 10em;

		position: absolute;
		top: -3em;
		left: -1.4em;
	}
	#popup-member-image-bg{
		right: -0.5em;
		bottom: -0.5em;
	}
	#popup-member-text{
		width: 100%;
		padding: 0;
	}
	#popup-member-name{
		--margin-left: 4em;
		width: calc(100% - var(--margin-left));
		padding: 0;
		font-size: 2em;
		line-height: 2em;
		margin-left: var(--margin-left);
	}
	#popup-member-description{
		width: 100%;
		font-size: 1em;
	}
}
@media (max-width:760px){
	.pc-banner{
		display: none;
	}
	.sp-banner{
		display: block;
		width: 100%;
		height: 110vw;
	}
	.member-head{
		bottom: -23vw;
		left: -10vw;
		width: 57vw;
		height: 14vw;
	}
	.member-page{
		padding-top: 34vw;
		background-image: url("../images/background/05_bg-sp.png");
		background-position: top;
		background-size: cover;
	}
	.member-detail{
		width: 50%;
	}
	.member-image{
		height: 38vw;
	}
	.member-name{
		font-size: 2.5vw;
		box-shadow: #000 2.1vw 2.6vw 0px 0.5vw;
		border-width: 0.6vw;
	}
	.member-name::before{
		font-size: 1.6vw;
	}
	.more-btn-section{
		margin: 10vw 0;
		text-align: center;
	}
	#more-svg{
		width: 30%;
	}
}
@media (max-width: 480px){
	/*
	#popup-member-text{
		font-size: 2.6vmin;
	}
	*/
}