@charset "utf-8";

.people .sub-visual {
	background-image:url(../img/people/people_bg01.jpg);
}

.people .sec3 > .txt:first-of-type {
	margin-bottom: 3.5vw;
	color: #597797;
	font-size: 1.667vw;
	font-family: 'NotoSansJapanese';
	font-weight: 400;
}

.people .sec3 > .ceo {
	position: relative;
	margin-bottom: 4vw;
	height: 40vw;
}

.people .sec3 > .ceo .block-before01::before {
	top: -2.4vw;
	right: -2.5vw;
	width: 5vw;
	height: 5vw;
}

.people .sec3 > .ceo .img {
	position: absolute;
	top: 2vw;
	left: 46vw;
	width: 37.778vw;
	opacity: 0;
	transition: top .5s ease-out, opacity .5s ease-out;
}
.people .sec3 > .ceo .img[data-emergence=visible] {
	top: 0;
	opacity: 1;
}

.people .sec3 > .ceo .img img {
	width: 100%;
}

.people .sec3 > .ceo .txt {
	position: absolute;
	left: 16vw;
	width: 26.25vw;
	font-size: 1.111vw;
	line-height: 2;
	text-align: left;
}

.people .sec3 > .ceo .name {
	position: absolute;
	top: 28vw;
	left: 16.1vw;
}

@media screen and (min-width:768px) and (max-width:900px) {
.people .sec3 > .ceo .txt {
	left: 9vw;
	width: 33.25vw;
}

.people .sec3 > .ceo .name {
	top: auto;
	bottom: 0;
}
}

.people .interview {
	padding: 4vw 0;
	background-color: #EEF3F9;
	overflow: hidden;
}

.people .interview > section:not(:last-of-type) {
	margin-bottom: 3vw;
}

.people .img--txt {
	position: relative;
	margin: 0 auto;
	width: 72.5vw;
	height: 46.389vw;
	perspective:500px;
}

.people .img--txt .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 54.444vw;
	opacity: 0;
	transform: rotateY(20deg) translateX(-200px);
	transition: transform .5s ease-out, opacity .5s ease-out;
}

.people .img--txt .img img {
	width: 100%;
}

.people .img--txt .txt-area {
	position: absolute;
	bottom: 0;
	right: 50%;
	padding: 4vw 3vw;
	width: 34.722vw;
	color: #4D4D4D;
	line-height: 2;
	background-color: #FFF;
	border: 1px solid #DEE4EA;
	border-radius: .6vw;
	opacity: 0;
	transform: rotateY(-20deg) translateX(200px) translateX(100%);
	transition: transform .5s ease-out, opacity .5s ease-out;
}

.people .img--txt .txt-area .begin {
	margin-bottom: 2.5vw;
	font-size: 1.667vw;
	text-align: center;
	line-height: 1.3;
}

.people .img--txt .txt-area h5 {
	margin-bottom: 2vw;
	color: #33547C;
	font-size: 1.667vw;
	font-family: 'NotoSansJapanese';
	font-weight: 700;
	font-weight: bold;
	line-height: 1.5;
	text-align: left;
}

.people .img--txt .txt-area .txt {
	font-size: 1.111vw;
	text-align: left;
}

.people .img--txt .name {
	position: absolute;
	top: 36vw;
	left: 2.5vw;
}

.people .img--txt .name::before {
	content: '■';
	color: #33547C;
}

.people .interview section:nth-of-type(even) .img--txt .img {
	right: -5vw;
	left: auto;
}

.people .interview > section:nth-of-type(even) .img--txt .img {
	transform: rotateY(-20deg) translateX(200px);
	transition: transform .5s ease-out;
}

.people .interview section:nth-of-type(even) .img--txt .txt-area {
	top: 10vw;
	right: auto;
	bottom: auto;
	left: 50%;
	transform: rotateY(20deg) translateX(-200px) translateX(-100%);
	transition: transform .5s ease-out;
}

.people .interview section:nth-of-type(3) .img--txt .txt-area {
	top: 13vw;
}

@media screen and (min-width:768px) {
.people .img--txt[data-emergence=visible] .img {
	opacity: 1;
	transform: rotateY(0);
}

.people .img--txt[data-emergence=visible] .txt-area {
	opacity: 1;
	transform: rotateY(0) translateX(100%);
}

.people .interview > section:nth-of-type(even) .img--txt[data-emergence=visible] .img {
	transform: rotateY(0);
}

.people .interview > section:nth-of-type(even) .img--txt[data-emergence=visible] .txt-area {
	transform: rotateY(0) translateX(-100%);
}
}

.people .interview section:nth-of-type(even) .img--txt .name {
	right: 2.5vw;
	left: auto;
}

.tier2 .recruit {
	margin-top: 0;
}

@media screen and (min-width:768px) and (max-width:900px) {
.people .img--txt .txt-area {
	width: 45vw;
}
}

@media screen and (max-width:767px) {
.people .sub-visual {
	height: 43.207vw;
	background-image:url(../img/people/people_bg01_sp.jpg);
}

.people .sec3 > .txt:first-of-type {
	margin-bottom: 9vw;
	font-size: 5.258vw;
	font-family: 'NotoSansJapanese';
}

.people .sec3 > .ceo {
	margin: 0 auto 8vw;
	width:  94%;
	height: auto;
}

.people .sec3 > .ceo .img,
.people .sec3 > .ceo .txt,
.people .sec3 > .ceo .name {
	position: static;
	width: 100%;
}

.people .sec3 > .ceo .img {
	margin: 0 auto 5vw;
	width: 80%;
}

.people .sec3 > .ceo .txt {
	margin-bottom: 5vw;
	font-size: 4.172vw;
}

.people .sec3 > .ceo .name {
	text-align: left;
}

.people .sec3 > .ceo .block-before01::before {
	top: -4.4vw;
	right: 5.5vw;
	width: 9vw;
	height: 9vw;
}

.people .interview {
	overflow: hidden;
}

.people .img--txt {
	margin: 0 auto 8vw;
	padding: 0;
	width: 94%;
	height: auto;
}

.people .img--txt .img,
.people .img--txt .txt-area,
.people .img--txt .name {
	position: relative;
}

.people .img--txt .img {
	width: 92%;
	text-align: left;
}

.people .img--txt .img img {
	width: 93vw;
}

.people .img--txt .txt-area {
	float: right;
	right: 2.5vw;
	transform: none;
	margin-top: -15vw;
	margin-bottom: 5vw;
	width: 93%;
	border-radius: 1.3vw;
	transform: rotateY(-20deg) translateX(20%);
}
.people .img--txt .txt-area[data-emergence=visible] {
	transform: rotateY(0) translateX(5%);
}

.people .img--txt .txt-area h5 {
	font-size: 6.258vw;
}

.people .img--txt .txt-area .txt {
	font-size: 4.172vw;
}

.people .img--txt .name {
	top: -2vw;
	padding-right: 5vw;
	text-align: right;
	clear: both;
}

.people .interview section .img--txt .img[data-emergence=visible],
.people .interview > section .img--txt[data-emergence=visible] .txt-area[data-emergence=visible] {
	opacity: 1;
	transform: rotateY(0) translateX(0);
}

.people .interview section:nth-of-type(even) .img--txt .img {
	right: 0;
	float: right;
}

.people .interview section:nth-of-type(even) .img--txt .txt-area {
	left: 0;
	margin-bottom: 14vw;
	transform: none;
	float: left;
	transform: rotateY(20deg) translateX(-20%);
}
.people .interview section:nth-of-type(even) .img--txt .txt-area[data-emergence=visible] {
	opacity: 1;
	transform: rotateY(0) translateX(0);
}

.people .interview section:nth-of-type(even) .img--txt .name {
	position: static;
	padding-right: 0;
	padding-left:  5vw;
	text-align: left;
}

.people .interview section:nth-of-type(3) .img--txt .txt-area {
	top: 0;
}
}