@charset "utf-8";

@media screen and (max-width: 750px) {
	.memberTop #mv {
		background: #333 url('../member/list/img/member_mv.jpg') center top;
		background-size: cover;
		height: 120px;
		position: relative;
	}
	/*----------------------------------------------------------------------------

	List Member

	----------------------------------------------------------------------------*/
	#formMember {
		position: relative;
		overflow: hidden;
		background-color: #e8f3f7;
	}
	#formMember .inner {
		padding: 15px 15px;
	}
	#formMember .formMemberDetail {
		background-color: #fff;
		padding: 0 13px;
		position: relative;
	}
	#formMember .formMemberDetail.active {
		padding-bottom: 17px;
	}
	#formMember .formMemberDetail h3 {
		position: relative;
		padding: 15px 13px;
		margin: 0 -13px;
		cursor: pointer;

		font-size: 16px;
		color: #009de4;
	}
	#formMember .formMemberDetail h3::after {
		content: '';
		width: 34px;
		height: 34px;
		margin-top: -17px;
		display: block;
		position: absolute;
		background: url(../common/img/icon_plus_w.png) no-repeat right #009de4;
		right: 13px;
		top: 50%;
		transition: all .3s ease-in;
	}
	#formMember .formMemberDetail.active  h3::after {
		background-image: url('../common/img/icon_minus_w.png');
	}
	#formMember .formMemberDetail h3:hover::after {
		background-color: #000;
	}
	#formMember .formMemberDetail h4 {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	#formMember #formMemberContent {
		position: relative;
		overflow: hidden;
		display: none;
		border-top: 1px solid #009de4;
		padding-top: 20px;
	}
	#SearchList {
		display: grid;
		gap: 20px;
	}
	.formGroupContent01 .formGroup{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	.formGroupContent02 .formGroup{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	#formMember .formButton {
		justify-self: end;
	}
	
	#formMember .checkbox input {
		appearance: none;
		outline: none;

		position: relative;
		display: inline-block;
		padding: 0;
		margin: 0 5px 0 0;
		width: 22px !important;
		height: 22px;
		border-radius: 50%;
		border: 1px solid #dae3e7;
		background:#fff;
		cursor: pointer;
		
		transition: all 0.15s ease-out 0s;

		color: #fff;
		vertical-align: middle;
	}
	#formMember .checkbox input:checked::before {
		z-index: 3;
		content: '';
		position: absolute;
		top: 4px;
		left: 4px;
		width: 12px;
		height: 12px;
		margin-right: 10px;
		display: inline-block;
		vertical-align: middle;
		margin: auto;
		background: #019de4;
		border-radius: 50%;
	}
	#formMember .checkbox label {
		font-size: 14px;
		font-weight: bold;
		cursor: pointer;
		transition: all .3s ease-in-out;
	}
	#formMember .checkbox label:hover {
		color: #009de4;
	}
	#formMember .formButton .btnReset {
		border: 1px solid #009de4;
		color: #009de4;
		text-transform: uppercase;
		position: relative;
		padding: 4px 18px 2px 37px;
		background-color: transparent;
		cursor: pointer;
		font-family: 'Catamaran', sans-serif;
		font-weight: bold;
		font-size: 16px;
		transition: all .3s ease-in-out;
	}
	#formMember .formButton .btnReset:hover {
		background-color: #009de4;
		color: #fff;
	}
	#formMember .formButton .btnReset::before {
		position: absolute;
		content: '';
		width: 14px;
		height: 15px;
		top: 0;
		bottom: 0;
		margin: auto;
		left: 12px;
		background: url('../common/img/reload_blue.svg') no-repeat;
		transition: all .3s ease-in-out;
	}
	#formMember .formButton .btnReset:hover::before {
		background: url('../common/img/reload_white.svg') no-repeat;
	}
	/* #member
	----------------------------------------*/
	.type-1{ --color: #009ce3; --c-rgb: 0, 156, 227;}	/*研究分析*/
	.type-2{ --color: #6d5fa7; --c-rgb: 109, 95, 167;}	/*プラント*/
	.type-3{ --color: #009ce3; --c-rgb: 0, 156, 227;}	/*開発*/
	.type-4{ --color: #2d57a2; --c-rgb: 45, 87, 162;}	/*営業*/
	.type-5{ --color: #009ce3; --c-rgb: 0, 156, 227;}	/*品質保証*/
	.type-6{ --color: #2d57a2; --c-rgb: 45, 87, 162;}	/*生産管理*/
	.type-7{ --color: #5099a1; --c-rgb: 80, 153, 161;}	/*システムエンジニア*/

	#member {
		font-feature-settings: "palt";
		letter-spacing: 0.02em;
	}
	#member .inner {
		padding: 40px 15px 0;
	}
	#member ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
	#member li {
		opacity: 0;
	}
	#member li.show {
		opacity: 1;
		animation: fadeInUp 0.6s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	}
	#member .noSearch {
		opacity: 1;
		text-align: center;
		width: 100%;
		font-size: 120%;
		font-weight: bold;
	}
	#member li img {
		transition: .5s ease-in-out;
	}
	#member li a {
		position: relative;
		display: grid;
		grid-template-rows: auto 1fr auto;
		height: 100%;
	}

	#member li .memberJob {
		display: flex;
		justify-content: end;
		align-items: center;
		height: 35px;
		padding: 0 15px;
		background-color: rgb(var(--c-rgb));

		color: #fff;
	}
	#member li .memberImg {
		background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(230,241,244,1) 100%);
	}
	#member li .memberMsg{
		/* position: absolute; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px 0 20px;
		background-color: rgba(var(--c-rgb), 0.7);
		z-index: 1;
		transition: transform 300ms ease;

		font-size: 18px;
		font-weight: 600;
		text-align: center;
		color: #fff;
	}
	#member li .memberMsg::after {
		display: block;
		content: '';
		width: 60px;
		height: 2px;
		margin-top: 20px;
		background-color: #fff;
	}
	#member li .memberContent {
		position: absolute;
		display: grid;
		place-items: center;
		bottom: 0;
		left: 0;
		right: 0;
		min-height: 90px;
		padding: 0 1em;
		background-color: rgba(var(--c-rgb), 0.7);
		transition: background 300ms ease;
		
		text-align: center;
	}
	#member li p{
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4285714;
		color: #fff;
	}
}
@media screen and (max-width: 480px) {
	#member ul {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	#member li .memberMsg{
		font-size: 16px;
	}
}