@charset "UTF-8";
@import url("https://use.typekit.net/yka6xwo.css");

/* Added on 2021/12/6 */
.entry_button {
	width: 80%;
	position: fixed;
	bottom: 0;
	left: 10%;
}
.entry_button a {
	padding: 20px;
	background: #605e5e url(../../images/arrow.png) right no-repeat;
	background-size: 34px;
	text-align: center;
	color: #f1efee;
	border-radius: 6px 6px 0px 0px;
	display: block;
}
.entry_button {
	display: none;
}
@media only screen and (max-width: 600px) {
.entry_button {
	display: block;
}
}
/* end */

/*-------------------------------------interviewTop ---*/

.interviewTop #area01{
	margin-bottom: 50px;
}

.interviewTop #area01 .secInr{
    position: relative;
}

.interviewTop #area01 .secInr:after{
    content: "Interview";
    position: absolute;
    color: #e4e3df;
    font-size: 120px;
    font-size: 12rem;
    font-family: zooja-pro, sans-serif;
    margin-bottom: 10px;
    right: 50px;
    top: 30px;   
}

.interviewTop .intro .introInr{
	margin: 0 auto;
    background: url(../images/top/bg.svg) center top no-repeat;
    text-align: center;
    background-size: 280px;
	width: 90%;
}
.interviewTop .intro .introHead{
	font-size: 26px;
	font-size: 2.6rem;
    font-weight: bold;
	line-height: 1.7;
	padding: 80px 0;
	text-align: center;
}

.interviewTop .intro .text{
    font-size: 17px;
    font-size: 1.7rem;
}


.interviewTop ul{
	display: flex;
	justify-content: space-around;
}

.interviewTop ul.first {
    margin-bottom: 70px;
}

.interviewTop ul li{
	width: 42%;
}

.interviewTop ul li .img{
	position: relative;
	z-index: 1;
}

.interviewTop ul li .img img{
	width: 100%;
}

.interviewTop ul li .img figure {
  	background: rgb(249,227,224);
	background: linear-gradient(45deg, rgba(249,227,224,1) 0%, rgba(228,225,240,1) 50%, rgba(204,234,246,1) 100%);
}
.interviewTop ul li .img figure img {
 	opacity: 1;
 	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.interviewTop ul li .img figure:hover img {
  	opacity: .5;
}

.interviewTop ul li .text span{
	font-size: 16px;
    font-size: 1.6rem;
    border-bottom: 1px solid #605e5e;
    padding-bottom: 5px;
}

.interviewTop ul li .text{
	opacity: 0;
}

.interviewTop ul li:hover .text{
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;	
	opacity: 1;
}

.interviewTop ul li .text{
	position: absolute;
    left: -40px;
    top: 60%;	
}

.interviewTop ul li .label{
	color: #605e5e;
	position: absolute;
    left: -27px;
    bottom: -56px;	
}

.interviewTop ul li .label small {
    padding: 14px 16px;
}

.interviewTop ul li .label .en {
    font-size: 16px;
    font-size: 1.6rem;
    margin-left: 30px;
    padding: 8px 16px;
    font-weight: bold;
	display: table;
}

.interviewTop ul li.s01 .label .en {
    margin-left: 90px;
}


.interviewTop ul li.s01 .label small, 
.interviewTop ul li.s01 .label .en{
	background: #e8dddc;
}

.interviewTop ul li.s02 .label small, 
.interviewTop ul li.s02 .label .en{
	background: #d3e4e4;
}

.interviewTop ul li.s03 .label small, 
.interviewTop ul li.s03 .label .en{
	background: #d1d7e0;
}


.interviewTop ul li.s04 .label small, 
.interviewTop ul li.s04 .label .en{
	background: #e8dce8;
}

.interviewTop ul li.s02,
.interviewTop ul li.s04{
	margin-top: 70px;
}

.interviewTop .intro .introHead img {
   max-width: 330px;
}

/*------------------------------------for ipad--*/
@media screen and (min-width:768px) and (max-width:1024px) {
.interviewTop ul li .text {
    position: absolute;
    left: -40px;
    top: 48%;
}
}

/*------------------------------------for sp--*/
@media only screen and (max-width: 480px) {

.interviewTop .intro .text {
    font-size: 15px;
    font-size: 1.5rem;
}

.interviewTop ul li .text span {
    font-size: 13px;
    font-size: 1.3rem;
}

.interviewTop #area01 .secInr:after {
    font-size: 60px;
    font-size: 6rem;
    right: 0px;
    top: -2px;
}

.interviewTop .intro .introHead {
    font-size: 20px;
    font-size: 2.0rem;
    padding: 60px 0 80px;
}
	
.interviewTop .intro .introHead img {
   max-width: 248px;
}
	
.interviewTop ul {
    display: block;
}
	
.interviewTop ul li {
    margin-bottom: 40px;
	width: 100%;	
}	

.interviewTop ul.first {
    margin-bottom: 0;
}
	
.interviewTop ul li.s02, 
.interviewTop ul li.s04 {
    margin-top: 0;
}	
	
.interviewTop ul li .text {
    opacity: 1;
    position: inherit;
    left: 0;
    top: 0;
	margin-top: 60px;
}	
	
.interviewTop ul li .label {
	left: inherit;
    right: 0px;
    bottom: 64px;	
}	
	
.interviewTop ul li.s01 .label,
.interviewTop ul li.s04 .label{
    bottom: 90px;
}		
}

/*-------------------------------------interview01 ---*/

.staff .text{
    font-size: 16px;
    font-size: 1.6rem;
}



.staff .area01 .secInr{
	position: relative;
}

.staff .area01 .secInr figure{
	padding-left: 10%;
}

.staff .area01 .secInr figure img{
	width: 100%;
}

.staff .area01 .secInr .person {
    background: url(../images/staff01/bg_01.svg) center top 15px no-repeat;
    position: absolute;
    padding: 27px 48px 50px;
    left: 0%;
    top: 64px;
    background-size: 172px;
}

.staff .area01 .secInr .person p{
    font-family: 'Montserrat', sans-serif;
    font-size: 58px;
    font-size: 5.8rem;	
   	font-weight: 300;
	line-height: 0.9!important;
	text-align: center;
}

.staff .area01 .secInr .person span{
	font-size: 18px;
	font-size: 1.8rem;
}

.staff .area01 .secInr .quote{
	position: absolute;
	left: 2%;
	top: 53%;
}

.staff .area01 .secInr .quote span{
	background: #fff;
	color: #605e5e;
	font-size: 24px;
	font-size: 2.4rem;
	padding: 3px 5px;
}

.staff .area01 .secInr .intro {
    background: url(../images/staff01/bg_02.svg) center center no-repeat;
    padding: 45px 65px;
    left: 2%;
    bottom: 30px;
    display: inline-block;
    width: 368px;
    background-size: cover;
    position: absolute;
	text-align: center;
}

.staff .area01 .secInr .intro span{
	display: block;
    font-size: 16px;
	font-size: 1.6rem;
    text-align: left;
}

.staff .area01 .secInr .intro .en{
	font-size: 30px;
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1.4 !important;
    text-align: left;
}

.staff .area01 .secInr .intro .grey{
	background: #605e5f;
	color: #f1f0ee;
	font-size: 13px;
	font-size: 1.3rem;
	padding: 5px 15px;
	position: absolute;
	left: 0;
	bottom: 0;
}

.staff .area02 h3.zoo{
    color: #e4e3df;
    font-size: 100px;
    font-size: 10rem;
    margin-bottom: 10px;
    text-align: right;
}

.staff .area02 .secInr {
    position: relative;
    padding: 40px 0 0;
}

.staff .area02 .secInr:after {
	background: #ece8e5;
    content: "";
    width: 90%;
    height: 63%;
    position: absolute;
    top: 15%;
    z-index: -1;
    right: -10%;
}

.staff .area02 .reason li{
	display: flex;
	justify-content: space-between;
	margin-bottom: 160px;
}

.staff .area02 .reason .r03{
	margin-bottom: 0;
}

.staff .area02 .reason .r02 .detail{
    order: 2;
    width: 44%;
}

.staff .area02 .reason .r02 .img{
    order: 1;
    width: 50%;
    display: inline-block;
    position: relative;
    height: fit-content;
}

.staff .area02 .reason .r01 .detail,
.staff .area02 .reason .r03 .detail{
	order: 1;
    width: 44%;
}

.staff .area02 .reason .r01 .img,
.staff .area02 .reason .r03 .img{
	order: 2;
    width: 51%;
}

.staff .area02 .reason .img img{
	width: 100%;
}

.staff .area02 .reason .detail .headReason{
	align-items: baseline;
    display: flex;
	justify-content: flex-start;
	margin-bottom: 80px;
}

.staff .area02 .reason .detail .headReason .number{
	font-family: 'Montserrat', sans-serif;
    font-weight: normal;
	font-size: 25px;
	font-size: 2.5rem;
	margin-right: 20px;
}

.staff .area02 .reason .detail .headReason .number span{
    font-family: 'Montserrat', sans-serif;
    font-size: 45px;
    font-size: 4.5rem;
    font-weight: bold;
    margin-right: 5px;
}

.staff .area02 .reason .detail .headReason .number small{
	color: #b7b6b4;
    font-size: 25px;
    font-size: 2.5rem;
    font-weight: bold;
    margin-left: 3px;
}

.staff .area02 .reason .detail .headReason .ttl{
	font-size: 28px;
	font-size: 2.8rem;
    font-weight: bold;
}

.staff .area02 .reason .detail .underline{
	color: #605e5e;
	margin-bottom: 50px;
}

.staff .area02 .reason .detail .underline span{
	border-bottom: 1px solid #605e5e;
	font-size: 21px;
	font-size: 2.1rem;
    font-weight: bold;
}

.staff .area02 .reason .r01 .img figure{
	background: #e6d1d0;
}

.staff .area02 .reason .r01 .img figure img {
    padding: 10px 0px 0 0;
    margin: 10px -10px -20px -20px;
}

.staff .area02 .reason .r02 .img span{
	position: absolute;
	left: 0;
    bottom: -90px;
    width: 80%;
}

.staff .area02 .reason .r02 .img figure{
	background: #e7d9ce;
}

.staff .area02 .reason .r02 .img figure img {
    padding: 10px 0px 0 0;
    margin: 10px -20px -20px 20px;
}

.staff .area02 .reason .r03 .img{
    background: url(../images/staff01/bg_04.svg) bottom 20% center no-repeat;
    height: 0;
    padding-bottom: 68%;
    background-size: 65%;
}

.staff .area02 .reason .r03 .img figure{
	background: #e0d1d6;
}

.staff .area02 .reason .r03 .img figure img {
    padding: 10px 0px 0 0;
    margin: 10px -10px -20px -20px;
}

.staff .area03{
	background: #ece8e5;
	margin-bottom: 80px;
	position: relative;
}

.staff .area03:before{
	background-color: #fff;
    top: -50px;
    content: '';
    display: block;
    height: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit- transform: translateX(-50%);
    position: absolute;
    transition: 1s all;
    width: 1px;
}

.staff .area03.scrollin::before {
    height: 100px;
    background-color: #a8a7a5;
}

.staff .area03:after{
	content: "Q&A";
	color: #fff;
	font-size: 110px;
	font-size: 11rem;
	font-family: zooja-pro, sans-serif;
	position: absolute;
	right: 7%;
    top: 4%;
    z-index: 2;
}

.staff .area03 .headQa{
	font-size: 28px;
	font-size: 2.8rem;
    font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
	z-index: 3;
    position: relative;
}

.staff .area03 ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.staff .area03 ul li{
	background: #fff;
	margin-bottom: 2%;
	padding: 30px 20px;
	width: 48%;
}

.staff .area03 ul li .question{
	border-bottom: 1px solid #605e5e;
	margin-bottom: 15px;
}

.staff .area03 ul li .question p{
	font-size: 20px;
	font-size: 2.0rem;
    font-weight: bold;
	line-height: 1 !important;
	margin-bottom: 15px;
}

.staff .area03 ul li .question .en{
	color: #eac4bf;
	font-size: 34px;
	font-size: 3.4rem;
	font-weight: 500;
	margin-right: 15px;
}

.staff .area03 ul li .answer{
	font-size: 16px;
	font-size: 1.6rem;
}

.staff .message {
    background: url(../images/staff01/bg_05.svg) top left 0% no-repeat;
    padding-top: 30px;
    background-size: 330px;
}

.staff .message .border{
	position: relative;
	border: 5px solid #fff;
	padding: 55px;
}

.staff .message .border:after {
    content: "Message to you!";
    color: #fff;
    font-size: 120px;
    font-size: 7rem;
    font-family: zooja-pro, sans-serif;
    position: absolute;
    right: 7%;
    top: -8%;
    background: #f1f0ee;
    padding: 5px 20px;
    z-index: 1;
}

.staff .message .flexBox{
	background: rgba(255,255,255,0.8);
	display: flex;
	justify-content: end;
	align-items: center;
	position: relative;
	z-index: 2;
	padding-right: 50px;
}

.staff .message .flexBox .img{
	margin: -60px 0 -60px -50px;
	width: 42%;
}

.staff .message .flexBox .img img{
	width: 100%;
}

.staff .message .flexBox .text{
	width: 55%;
}

.staff .other{
    margin-bottom: 100px;
}

.staff .other .secInr {
    padding: 10px 0 40px;
}

.staff .other h3.zoo{
	color: #e4e3df;
	font-size: 100px;
	font-size: 10rem;
	margin-bottom: 10px;
}

.staff .other ul{
	display: flex;
	justify-content: space-between;
}

.staff .other ul li{
	width: 30%;
}

.staff .other ul li .img {
    position: relative;
}    

.staff .other ul li .img img{
	width: 100%;
}

.staff .other ul li.s01 .label,
.staff .other ul li.s02 .label,
.staff .other ul li.s03 .label,
.staff .other ul li.s04 .label{
    color: #605e5e;
    position: absolute;
    left: -27px;
    bottom: -56px;
}

.staff .other ul li .label small {
    padding: 14px 16px;
}

.staff .other ul li .label .en {
    font-size: 13px;
    font-size: 1.3rem;
    margin-left: 80px;
    padding: 8px 16px;
    font-weight: bold;
    display: table;
}

.staff .other ul li.s01 .label small, 
.staff .other ul li.s01 .label .en {
    background: #e8dddc;
}


.staff .other ul li.s02 .label small, 
.staff .other ul li.s02 .label .en {
    background: #d3e4e4;
}


.staff .other ul li.s03 .label small, 
.staff .other ul li.s03 .label .en {
    background: #d1d7e0;
}


.staff .other ul li.s04 .label small, 
.staff .other ul li.s04 .label .en {
    background: #e8dce8;
}

@media only screen and (max-width: 1440px) {
.staff .message {
    background-size: 250px;
}
}

@media only screen and (max-width: 1300px) {
.staff .area01 .secInr .person {
    left: -2%;
}

.staff .area01 .secInr .quote {
    left: -2%;
}

.staff .area01 .secInr .quote span {
    font-size: 18px;
    font-size: 1.8rem;
}

.staff .area01 .secInr .intro {
    left: -2%;
}  

.staff .area02 .reason .detail .underline span {
    font-size: 17px;
    font-size: 1.7rem;
}

.staff .area02 .reason .detail .text{
    line-height: 2.4;
}

.staff .area03 ul li .question .en {
    font-size: 32px;
    font-size: 3.2rem;
    margin-right: 12px;
}  

.staff .area03 ul li .question p {
    font-size: 20px;
    font-size: 2.0rem;
}

.staff .area03 ul li .answer {
    font-size: 16px;
    font-size: 1.6rem;
}

.staff .other ul li .label .en {
    margin-left: 40px;
}    

.staff .message .border:after {
    font-size: 62px;
    font-size: 6.2rem;
    right: 7%;
    top: -13%;
}

.staff .message .border {
    padding: 35px;
}
}

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

.staff .area01 .secInr .quote span {
    font-size: 16px;
    font-size: 1.6rem;
}

.staff .area01 .secInr .intro {
    padding: 24px 65px;
}

.staff .area02 .reason .detail .headReason {
    display: block;
}

.staff .area02 .reason .detail .headReason .number {
    line-height: 1 !important;
}

.staff .area02 .reason .detail .headReason {
    margin-bottom: 30px;
}
}

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

.staff .text {
    font-size: 13px;
    font-size: 1.3rem;
}

.staff .area01{
    margin-bottom: 60px;
}    

.staff .area01 .secInr{
    padding: 40px 0 60px;
}

.staff .area01 .secInr .person {
    left: -12%;
    top: 10px;
    background-size: 95px;
    padding: 26px 48px 50px;
}

.staff .area01 .secInr .person p {
    font-size: 27px;
    font-size: 2.7rem;
    font-weight: bold;
}    

.staff .area01 .secInr .person span {
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: normal;
}

.staff .area01 .secInr .quote {
    top: 98%;
}

.staff .area01 .secInr .quote span {
    font-size: 16px;
    font-size: 1.6rem;
}

.staff .area01 .secInr .intro {
    padding: 16px 18px 18px;
    width: 190px;
    bottom: 25px;
}

.staff .area01 .secInr .intro span {
    font-size: 16px;
    font-size: 1.0rem;
}

.staff .area01 .secInr .intro .en {
    font-size: 18px;
    font-size: 1.8rem;
}

.staff .area01 .secInr .intro .grey {
    font-size: 9px;
    font-size: 0.9rem;
    padding: 4px 8px;
}    

.staff .area02 .secInr:after {
    top: 10%;
}    

.staff .area02 h3.zoo {
    font-size: 70px;
    margin-bottom: 0;
	text-align: left;
}    

.staff .area02 .reason .detail .headReason .number span {
    font-size: 30px;
    font-size: 3.0rem;
}

.staff .area02 .reason .detail .headReason .number small {
    font-size: 20px;
    font-size: 2.0rem;
}

.staff .area02 .reason li {
    display: block;
    margin-bottom: 40px;
}    

.staff .area02 .reason .r02 .img span {
    bottom: -20px;
}

.staff .area02 .reason .r01 .img,
.staff .area02 .reason .r02 .img, 
.staff .area02 .reason .r03 .img {
    margin-bottom: 45px;
    margin-left: 5px;
    width: 90%;
}

.staff .area02 .reason .r01 .detail,
.staff .area02 .reason .r02 .detail, 
.staff .area02 .reason .r03 .detail {
    width: 100%;
}

.staff .area02 .reason .r01 .img figure img,
.staff .area02 .reason .r02 .img figure img,
.staff .area02 .reason .r03 .img figure img{
    padding: 5px 0px 0 0;
    margin: 5px -5px -10px -10px;
}

.staff .area02 .reason .r03 {
    margin-bottom: 60px;
}

.staff .area02 .reason .r03 .img {
    padding-bottom: 76%;
}

.staff .area02 .reason .detail .headReason {
    margin-bottom: 20px;
}

.staff .area02 .reason .detail .headReason .number {
    font-size: 24px;
    font-size: 2.4rem;
}

.staff .area02 .reason .detail .headReason .ttl {
    font-size: 20px;
    font-size: 2.0rem;
}

.staff .area02 .reason .detail .underline span {
    font-size: 16px;
    font-size: 1.6rem;
}

.staff .area02 .reason .detail .underline {
    margin-bottom: 30px;
}

.staff .area03 {
    margin-bottom: 40px;
}    

.staff .area03 .secInr {
    padding: 75px 0 65px;
}

.staff .area03.scrollin::before {
    height: 50px;
}

.staff .area03:before {
    top: -25px;
}

.staff .area03:after {
    font-size: 55px;
    right: 5%;
    top: 1.5%;
}

.staff .area03 .headQa {
    font-size: 20px;
    font-size: 2.0rem;
    margin-bottom: 20px;
    z-index: 4;
    position: relative;
}

.staff .area03 ul {
    display: block;
}

.staff .area03 ul li {
    margin-bottom: 3%;
	padding: 25px 12px 10px;
    width: 100%;
}

.staff .area03 ul li .question .en {
    font-size: 26px;
    font-size: 2.6rem;
    margin-right: 6px;
}

.staff .area03 ul li .question p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 0.5 !important;
}

.staff .area03 ul li .question {
    margin-bottom: 10px;
}

.staff .area03 ul li .answer {
    font-size: 13px;
    font-size: 1.3rem;
}

.staff .message {
    background-size: 100px !important;
    margin-bottom: 20px;    
}

.staff .message .border:after {
    font-size: 32px;
    font-size: 3.2rem;
    right: 7%;
    top: -6%;
    padding: 5px 10px;
}

.staff .message .border {
    padding: 15px;
}

.staff .message .flexBox {
    display: block;
    padding: 10px 10px 20px;
}

.staff .message .flexBox .img {
    margin: 0 0 20px;
    width: 100%;
    padding-right: 30px;
}

.staff .message .flexBox .text {
    width: 92%;
    margin: 0 auto;
}

.staff .other {
    margin-bottom: 0px;
}

.staff .other h3.zoo{
	font-size: 70px;
}

.staff .other .secInr .listWrap{
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 0 0 40px 10px;
}

.staff .other ul {
	margin-bottom: 30px;
	width: 540px;
}

.staff .other ul li.s01 .label, 
.staff .other ul li.s02 .label, 
.staff .other ul li.s03 .label, 
.staff .other ul li.s04 .label {
    left: -10px;
    bottom: -37px;
}

.staff .other ul li .label small {
    padding: 6px 10px;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.staff .other ul li .label .en {
    padding: 4px 12px;
    font-size: 1.0rem;
    margin-left: 22px;
}

.staff .other ul li.s01 .label .en {
    margin-left: 62px;
}

}

/*-------------------------------------interview02 ---*/

.staff.s02 .area01 .secInr figure {
    padding-left: 0;
    padding-right: 10%;
}

.staff.s02 .area01 .secInr .person {
    background: url(../images/staff02/bg_01.svg) center top 15px no-repeat;
    left: inherit;
    right: 2%;
}

.staff.s02 .area01 .secInr .quote {
    left: inherit;
    right: 60px;
    text-align: left;
}

.staff.s02 .area01 .secInr .intro {
    background: url(../images/staff02/bg_02.svg) center center no-repeat;
    left: inherit;
    right: 2%;
    width: 478px;
    background-size: cover;
}

.staff.s02 .area02 h3.zoo {
    text-align: left;
}

.staff.s02 .area02 .reason .r01 .detail,
.staff.s02 .area02 .reason .r02 .img,
.staff.s02 .area02 .reason .r03 .detail{
    order: 2;
}

.staff.s02 .area02 .reason .r01 .img,
.staff.s02 .area02 .reason .r02 .detail,
.staff.s02 .area02 .reason .r03 .img{
    order: 1;
}

.staff.s02 .area02 .reason .r01 .img figure{ background: #dbe9e9;}
.staff.s02 .area02 .reason .r02 .img figure{ background: #d9e8e1;}
.staff.s02 .area02 .reason .r03 .img figure{ background: #ddeede;}

.staff.s02 .area02 .reason .r03 .img {
    background: url(../images/staff02/bg_04.svg) bottom 20% center no-repeat;
}

.staff.s02 .area03 ul li .question .en {
    color: #b6d8d7;
}

.staff.s02 .message {
    background: url(../images/staff02/bg_05.svg) top left 5% no-repeat;
}

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

.staff.s02 .area01 .secInr .quote {
    right: 0;
}

.staff.s02 .area01 .secInr figure {
    padding-left: 0;
}

.staff.s02 .area01 .secInr .person {
    left: inherit;
    right: -12%;
    background-size: 95px;
}

.staff.s02 .area01 .secInr .intro {
    width: 250px;
}
}


/*-------------------------------------interview03 ---*/

.staff.s03 .area01 .secInr .person {
    background: url(../images/staff03/bg_01.svg) center top 15px no-repeat;
}

.staff.s03 .area01 .secInr .intro {
    background: url(../images/staff03/bg_02.svg) center center no-repeat;
    background-size: cover;
    width: 366px;
}

.staff.s03 .area02 .reason .r01 .img figure{ background: #e3e6eb;}
.staff.s03 .area02 .reason .r02 .img figure{ background: #d6d9de;}
.staff.s03 .area02 .reason .r03 .img figure{ background: #e0e2e5;}

.staff.s03 .area02 .reason .r03 .img {
    background: url(../images/staff03/bg_04.svg) bottom 20% center no-repeat;
    background-size: 65%;
}

.staff.s03 .area03 ul li .question .en {
    color: #bfc9d5;
}

.staff.s03 .message {
    background: url(../images/staff03/bg_05.svg) top left 5% no-repeat;
}

@media only screen and (max-width: 400px) {
.staff.s03 .area01 .secInr .person {
    background-size: 95px;
}

.staff.s03 .area01 .secInr .intro {
    width: 180px;
}

}


/*-------------------------------------interview04 ---*/

.staff.s04 .area01 .secInr figure{
    padding-left: 0;
    padding-right: 10%;
}

.staff.s04 .area01 .secInr .person {
    background: url(../images/staff04/bg_01.svg) center top 15px no-repeat;
    left: inherit;
    right: 2%;
}

.staff.s04 .area01 .secInr .quote {
    left: inherit;
    right: 2%;
    text-align: left;
}

.staff.s04 .area01 .secInr .intro {
    background: url(../images/staff04/bg_02.svg) center center no-repeat;
    width: 436px;
    left: inherit;
    right: 2%;
    background-size: cover;
}

.staff.s04 .area02 h3.zoo {
    text-align: left;
}

.staff.s04 .area02 .reason .r01 .detail,
.staff.s04 .area02 .reason .r02 .img,
.staff.s04 .area02 .reason .r03 .detail{
    order: 2;
}

.staff.s04 .area02 .reason .r01 .img,
.staff.s04 .area02 .reason .r02 .detail,
.staff.s04 .area02 .reason .r03 .img{
    order: 1;
}

.staff.s04 .area02 .reason .r01 .img figure{ background: #ece2eb;}
.staff.s04 .area02 .reason .r02 .img figure{ background: #f0e0eb;}
.staff.s04 .area02 .reason .r03 .img figure{ background: #e5dee6;}

.staff.s04 .area02 .reason .r03 .img {
    background: url(../images/staff04/bg_04.svg) bottom 20% center no-repeat;
}

.staff.s04 .area03 ul li .question .en {
    color: #dbc5da;
}

.staff.s04 .message {
    background: url(../images/staff04/bg_05.svg) top left 5% no-repeat;
}

@media only screen and (max-width: 400px) {
.staff.s04 .area01 .secInr figure {
    padding-left: 0;
}

.staff.s04 .area01 .secInr .person {
    left: inherit;
    right: -12%;
    background-size: 95px;
}

.staff.s04 .area01 .secInr .intro {
    width: 215px;
}

.staff.s04 .message .flexBox .img {
    padding-right: 0;
}
}

/*------------------------------------animation--*/

@media only screen and (min-width: 1024px) {
.staff .other ul li.fadein:nth-of-type(2) {
    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
  }
.staff .other ul li.fadein:nth-of-type(3) {
    -moz-transition-delay: 400ms;
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    -ms-transition-delay: 400ms;
  }
}

@media screen and (max-width: 370px) {
	.staff .other h3.zoo,.staff .area02 h3.zoo{
		font-size: 63px;
	}
}