/*
----------------------------------------
profile
----------------------------------------
*/

.page-header {
	background: url( ../img/member/2x/header-bg.png ) center center / cover no-repeat;
}

/* family-box */

.family-box {
	padding: 50px 0;
}

.family-box .ttl-02 {
	margin-bottom: 30px;
}

.family-box .read {
	line-height: 2.2;
	letter-spacing: 1.2px;
}

.family-box .img {
	margin-top: 60px;
	height: 600px;
	background: url( ../img/member/2x/family-img.png ) center center / cover no-repeat;
	opacity: 0;
	transform: translateY( 40px );
	transition: all .6s;
	transition-delay: .8s;
}

.family-box.view .img {
	opacity: 1;
	transform: none;
}

.profile-box {
	padding: 50px 0;
	margin-bottom: 62px;
}

.profile-box .ttl-02 {
	margin-bottom: 30px;
	-js-display: flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.profile-box .read {
	line-height: 2.2;
	letter-spacing: 1.2px;
}

.profile-box .profile-list {
	margin-top: 10px;
}

.profile-box .profile-list li {
	width: calc( ( 100% - 80px ) / 3 );
	margin-right: 40px;
}

.profile-box .profile-list li:nth-of-type( 3n ) {
	margin-right: 0;
}

.profile-box .profile-list a {
	display: block;
	text-align: center;
	padding: 40px 15px 45px;
	position: relative;
}

.profile-box .profile-list a::after {
	content: '';
	position: absolute;
	top: 100px;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	border-radius: 10px;
	z-index: -1;
	transition: all .2s;
}

.profile-box .profile-list figure {
	line-height: .5;
	margin-bottom: 20px;
}

.profile-box .profile-list img {
	width: 200px;
	height: 200px;
	border: solid 4px #8fc31f;
	border-radius: 50%;
}

.profile-box .profile-list .post {
	font-size: 1.8rem;
	line-height: 1.4;
	color: #8fc31f;
	margin: 1px 0;
	justify-content: center;
	align-items: center;
}

.profile-box .profile-list .name {
	font-size: 2.6rem;
	font-weight: 500;
	line-height: 1.4;
	justify-content: center;
	align-items: center;
}

.profile-box .profile-list .more span {
	display: inline-block;
	width: 180px;
	max-width: 100%;
	font-size: 1.4rem;
	font-weight: 500;
	text-align: center;
	padding: 8px;
	color: #8fc31f;
	border: solid 2px #8fc31f;
	border-radius: 25px;
	transition: all .2s;
}


.joinus-box .block-01 {
	padding: 70px 0 0;
	min-height: 700px;
}

.joinus-box .block-01 > .img {
	padding-right: 5px;
}

.joinus-box .block-01 .box {
	margin: 0 0 0 auto;
}

.block-01 .img + .wrap .box {
	width: 400px;
}

.joinus-box .block-01 > .en {
	top: 95px;
	right: 4vw;
}

.joinus-box .ttl .en {
	opacity: 0;
	transform: translate( -105px, 30px );
	transition: all .6s;
	transition-delay: 1.2s;
}

.joinus-box .block-01.view .ttl .en {
	opacity: 1;
	transform: translate( -145px, 30px );
}

.joinus-box .block-01 .ttl h2.jp {
	line-height: 1.4;
	letter-spacing: 1px;
}

.bnr-recruit {
	line-height: .5;
	margin: 62px 0 50px;
}

.bnr-recruit a {
	display: block;
	border-radius: 10px;
}

.btn-set {
	margin-bottom: 52px;
}

.modal .box {
	padding: 45px 50px;
}

.modal .profile {
	align-items: center;
}

.modal .img {
	width: 288px;
	line-height: .5;
}

.modal .img img {
	width: 240px;
	height: 240px;
	border: solid 4px #8fc31f;
	border-radius: 50%;
}

.modal .img + .txt {
	width: calc( 100% - 288px );
}

.modal .txt .en {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .5px;
	color: #8fc31f;
}

.modal .txt h3 {
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 10px;
}

.modal .txt dl.flex {
	font-size: 1.6rem;
	line-height: 1.5;
	margin-bottom: 5px;
}

.modal .txt dl.flex dt {
	width: 40%;
	padding: 16px 12px 16px 0;
	border-bottom: solid 1px #e5e5e5;
	letter-spacing: 1px;
	position: relative;
	-js-display: flex;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
	align-items: center;
}

.modal .txt dl.flex dt::after {
	content: '';
	width: 50px;
	height: 1px;
	background: #8fc31f;
	position: absolute;
	left: 0;
	bottom: -1px;
}

.modal .txt dl.flex dd {
	width: 60%;
	padding: 16px 0;
	border-bottom: solid 1px #e5e5e5;
}

.modal .txt dl.flex dd.left {
	text-align: left;
}

.modal .comment {
	margin: 45px 0 5px;
	padding: 35px 35px 35px 45px;
	background: #f5f5f5;
	border-radius: 10px;
	font-size: 1.6rem;
	line-height: 2.2;
	letter-spacing: 1px;
	position: relative;
}

.modal .comment h4 {
	font-size: 1.8rem;
	letter-spacing: 5px;
	text-align: center;
	color: #8fc31f;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	transform: translateY( -50% );
}


/*
----------------------------------------
1400
----------------------------------------
*/

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

	.family-box .img {
		height: 34vw;
	}

	.profile-box .profile-list li {
		width: calc( ( 100% - 60px ) / 3 );
		margin-right: 30px;
	}

	.profile-box .profile-list a {
		padding: 30px 15px;
	}

	.profile-box .ttl-02 {
		margin-bottom: 20px;
	}

	.profile-box .profile-list .name {
		font-size: 2.4rem;
	}

	.joinus-box .block-01 .ttl h2.jp {
		letter-spacing: 0;
	}

}


/*
----------------------------------------
1200
----------------------------------------
*/

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

	.profile-box .profile-list li {
		width: calc( ( 100% - 40px ) / 3 );
		margin-right: 20px;
	}

	.profile-box .profile-list .post {
		font-size: 1.6rem;
	}

	.profile-box .profile-list .name {
		font-size: 2.2rem;
	}

	.joinus-box .block-01 {
		padding: 30px 0;
	}

}


/*
----------------------------------------
768
----------------------------------------
*/

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

	.family-box {
		padding: 30px 0 0;
	}

	.family-box .ttl-02 {
		margin-bottom: 15px;
	}

	.family-box .read {
		text-align: left;
		line-height: 2;
		letter-spacing: .4px;
	}

	.family-box .img {
		height: 40vw;
		margin-top: 30px;
	}

	.profile-box {
		padding: 40px 0;
		margin-bottom: 0;
	}

	.profile-box .ttl-02 {
		margin-bottom: 0;
	}

	.profile-box .profile-list {
		margin-top: 0;
	}

	.profile-box .profile-list li {
		width: calc( ( 100% - 15px ) / 2 );
		margin-right: 0;
	}

	.profile-box .profile-list li:nth-child( odd ) {
		margin-right: 15px;
	}

	.profile-box .profile-list a {
		padding: 20px 15px;
	}

	.profile-box .profile-list a::after {
		top: 50px;
	}

	.profile-box .profile-list figure {
		margin-bottom: 10px;
	}

	.profile-box .profile-list img {
		width: 120px;
		height: 120px;
		border: solid 2px #8fc31f;
	}

	.profile-box .profile-list .post {
		font-size: 1.4rem;
	}

	.profile-box .ttl-02 {
		margin-bottom: 10px;
	}

	.profile-box .profile-list .name {
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.profile-box .profile-list .more span {
		font-size: 1.2rem;
		padding: 4px;
	}

	.joinus-box .block-01 {
		padding: 10px 0 0;
	}

	.joinus-box .block-01 > .en {
		top: 5px;
		right: 0;
		left: 0;
		text-align: center;
	}

	.joinus-box .block-01 > .sp {
		display: block;
	}

	.joinus-box .block-01 > .img {
		padding-right: 0;
		margin-bottom: 0;
	}

	.joinus-box .ttl-02 .en {
		font-size: 1.4rem;
	}

	.joinus-box .ttl-02 .jp {
		font-size: 2.5rem;
		line-height: 1.2;
		margin-bottom: 25px;
	}

	.joinus-box .block-01 .box {
		margin: -45px 0 0;
	}

	.joinus-box .ttl {
		line-height: 1;
		margin: -35px 0 0;
	}

	.joinus-box .ttl .en,
	.joinus-box .block-01.view .ttl .en {
		text-align: center;
		transform: scale( .75 );
	}

	.joinus-box .box h2.jp {
		display: none;
	}

	.joinus-box .block-01 .read {
		font-size: 1.4rem;
		line-height: 2;
		letter-spacing: 0;
		margin-bottom: 0;
	}

	.bnr-recruit {
		margin: 40px 0;
	}

	.btn-set {
		margin-bottom: 25px;
	}

	.modal .box {
		padding: 25px 20px;
	}

	.modal .profile {
		flex-direction: column;
		text-align: center;
	}

	.modal .img {
		width: 100%;
		margin-bottom: 15px;
	}

	.modal .img img {
		width: 200px;
		height: 200px;
		border: solid 2px #8fc31f;
	}

	.modal .img + .txt {
		width: 100%;
	}

	.modal .txt .en {
		font-size: 1.2rem;
	}

	.modal .txt h3 {
		font-size: 2.5rem;
		margin-bottom: 25px;
	}

	.modal .txt dl.flex {
		font-size: 1.5rem;
		border-bottom: solid 1px #e5e5e5;
	}

	.modal .txt dl.flex dt {
		width: 100%;
		border-top: solid 2px #8fc31f;
		border-bottom: none;
		font-weight: 500;
		text-align: center;
		justify-content: center;
		padding: 11.5px 0;
	}

	.modal .txt dl.flex dt::after {
		display: none;
	}

	.modal .txt dl.flex dd {
		width: 100%;
		border-top: solid 1px #e5e5e5;
		border-bottom: none;
		padding: 12px 0;
		text-align: center;
	}

	.modal .comment {
		margin: 25px 0 0;
		padding: 20px 20px 15px;
		font-size: 1.4rem;
		line-height: 1.85;
	}

	.modal .comment h4 {
		font-size: 1.5rem;
		letter-spacing: 4px;
	}

}


/*
----------------------------------------
hover
----------------------------------------
*/

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

	.profile-box .profile-list a:hover::after {
		box-shadow: 0 0 20px rgba( 0, 0, 0, .1 );
	}

	.profile-box .profile-list a:hover .more span {
		background: #8fc31f;
		color: #fff;
	}

	.bnr-recruit a:hover {
		box-shadow: 0 0 20px rgba( 0, 0, 0, .1 );
	}

}