@charset "UTF-8";

@media screen and (min-width:769px){

	/* メンバー紹介一覧、モーダル */
	.memberlist {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 100px auto 9rem;
		max-width: 950px;
		width: 100%;
	}
	.memberlist .box {
		position:relative;
		margin-bottom: 6rem;
		width: 26%;
	}
	.memberlist .box .image,
	.memberlist_modal .image {
		position: relative;
		margin-bottom: 3rem;
		width: 100%;
	}
	.memberlist .box .image .plus {
		position: absolute;
        bottom: 2rem;
        right: 1.5rem;
        color: #fff;
        background: currentColor;
        width: 17px;
        height: 1px;
	}
	.memberlist .box .image .plus::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
		border-radius: inherit;
		transform: rotate(90deg);
	}
	.memberlist .box .name,
	.memberlist_modal .name {
		margin-bottom: 0.8rem;
	}
	.memberlist .box .name h4,
	.memberlist_modal .name h4 {
		font-size: 28px;
		margin-bottom: 0.5rem;
	}
	.memberlist .box p,
	.memberlist_modal p {
		font-size: 14px;
	}
	.memberlist .box .position {
		line-height: 2.5rem;
	}
	.memberlist .box .desc {
		display: none;
	}
	.memberlist .box a {
		pointer-events: auto;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-indent: -999px;
		transition: all 0.2s;
	}
	.memberlist .box a:hover {
		opacity: 0.3;
		background: #fff;
	}
	.memberlist_modal .container {
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		background: rgba(0,0,0,0.7);
		padding: 40px 20px;
		overflow: auto;
		opacity: 0;
		visibility: hidden;
		transition: .3s;
		box-sizing: border-box;
	}
	.memberlist_modal .container:before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
	.memberlist_modal .container.show {
		opacity: 1;
		visibility: visible;
	}
	.memberlist_modal .body {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		max-width: 1200px;
		width: 90%;
	}
	.memberlist_modal .close {
		cursor: pointer;
		position: absolute;
		top: 0;
        right: 0;
        padding: 1rem 2rem;
		transition: all 0.2s;
	}
	.memberlist_modal .close:hover {
		opacity: 0.7;
	}
	.memberlist_modal .close .plus {
		display: inline-block;
		position: relative;
        color: #1a1a1a;
        background: currentColor;
        width: 17px;
        height: 1px;
		transform: rotate(45deg);
	}
	.memberlist_modal .close .plus::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
		border-radius: inherit;
		transform: rotate(90deg);
	}
	.memberlist_modal .contents {
		background: #fff;
		text-align: left;
		padding: 5rem;
	}
	.memberlist_modal .box {
		display: flex;
		justify-content: space-between;
	}
	.memberlist_modal .image {
		padding: 0;
		margin: 0 4rem 0 0;
		min-width: 240px;
		width: 240px;
		height: 240px;
	}
	.memberlist_modal .name {
		display: flex;
		align-items: flex-end 
	}
	.memberlist_modal .name h4 {
		margin-right: 3rem;
	}
	.memberlist_modal .position {
		margin-bottom: 1rem;
	}
	.memberlist_modal .desc p {
		font-size: 16px;
	}
	.memberlist_modal hr {
		border: none;
		border-bottom: solid 1px #1d1d1d;
		margin: 1.5rem 0;
		width: 100px;
	}
}

@media screen and (max-width:768px){

	/* メンバー紹介一覧、モーダル */
	.memberlist {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 2rem;
		margin: 0 auto 9rem;
		max-width: 660px;
		width: 100%;
	}
	.memberlist .box {
		position: relative;
		margin-bottom: 4rem;
		width: 26%;
	}
	.memberlist .box .image,
	.memberlist_modal .image {
		position: relative;
		margin-bottom: 1.5rem;
		width: 100%;
	}
	.memberlist .box .image .plus {
		position: absolute;
        bottom: 2rem;
        right: 1.5rem;
        color: #fff;
        background: currentColor;
        width: 17px;
        height: 1px;
	}
	.memberlist .box .image .plus::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
		border-radius: inherit;
		transform: rotate(90deg);
	}
	.memberlist .box .name,
	.memberlist_modal .name {
		margin-bottom: 0.3rem;
	}
	.memberlist .box .name h4,
	.memberlist_modal .name h4 {
		font-size: 18px;
	}
	.memberlist .box p,
	.memberlist_modal p {
		font-size: 12px;
	}
	.memberlist .box .position,
	.memberlist_modal .position {
		line-height: 2rem;
	}
	.memberlist .box .desc {
		display: none;
	}
	.memberlist .box a {
		pointer-events: auto;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-indent: -999px;
		transition: all 0.2s;
	}
	.memberlist .box a:hover {
		opacity: 0.3;
		background: #fff;
	}
	.memberlist_modal .container {
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		background: rgba(0,0,0,50%);
		padding: 40px 20px;
		overflow: auto;
		opacity: 0;
		visibility: hidden;
		transition: .3s;
		box-sizing: border-box;
	}
	.memberlist_modal .container:before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
	.memberlist_modal .container.show {
		opacity: 1;
		visibility: visible;
	}
	.memberlist_modal .body {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: 100%;
	}
	.memberlist_modal .close {
		cursor: pointer;
		position: absolute;
		top: 0;
        right: 0;
        padding: 1rem 1.5rem;
		transition: all 0.2s;
	}
	.memberlist_modal .close:hover {
		opacity: 0.7;
	}
	.memberlist_modal .close .plus {
		display: inline-block;
		position: relative;
        color: #1a1a1a;
        background: currentColor;
        width: 17px;
        height: 1px;
		transform: rotate(45deg);
	}
	.memberlist_modal .close .plus::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
		border-radius: inherit;
		transform: rotate(90deg);
	}
	.memberlist_modal .contents {
		background: #fff;
		text-align: left;
		padding: 3rem;
		padding-top: 4rem;
	}
	.memberlist_modal .image {
		padding: 0;
		margin: 0 auto 2rem;
		max-width: 240px;
	}
	.memberlist_modal .position {
		margin-bottom: 1rem;
	}
	.memberlist_modal .desc p {
		font-size: 14px;
	}
	.memberlist_modal hr {
		border: none;
		border-bottom: solid 1px #1d1d1d;
		margin: 1.5rem 0;
		width: 100px;
	}
}

@media (max-width: 576px) {
	.memberlist .box {
		width: 46%;
	}
}

/* OUR TEAM ページ個別設定 */
#team .memberlist {
	margin: 0 auto;
}
#team .memberlist .box {
	color: #fff;
	width: 30%;
}
#team .memberlist .box p {
	font-size: 13px;
	letter-spacing: 0.5px;
}
#team .memberlist .box a:hover {
	background: #000;
}
#team .memberlist_modal .name {
	display: block;
}
#team .memberlist_modal .name h4 {
	margin-bottom: 1rem;
}
#team .memberlist_modal .contents {
	color: #fff;
	background: #000;
}
#team .memberlist_modal .close .plus {
	background: #EA5514;
}
#team .btn-viewmore {
	margin-left: auto;
}
#team .memberlist .box .modal_only {
	display: none;
}
#team .memberlist_modal .box .modal_none {
	display: none;
}

@media screen and (max-width:768px){
	#team .memberlist .box p {
		font-size: 12px;
	}
	#team .memberlist .box.box_blank {
		display: none;
	}
}
@media (max-width: 576px) {
	#team .memberlist .box {
		width: 46%;
	}
}