@charset "utf-8";
/* CSS Document */

/*==================================
	person
==================================*/
#person #contents .mainTitArea { background: url("../img/person/mv.jpg") center center no-repeat; background-size: cover;}
#person #contents .ctArea { margin-top: 100px; position: relative; text-align: right;}
#person #contents .ctArea a { height: 400px; background: url("../img/top/top_person_ct_bg.jpg") left center  no-repeat; background-size: auto 100%;}
#person #contents .ctArea .txtbox { padding: 120px 60px 0 60px; width: 490px; color: #fff; text-align: left;  background: #3b3d3a; display: block; position: absolute; right: 0; top: 0; bottom: 0;}
#person #contents .ctArea .tit { font-size: 48px; display: inline-block; font-weight: 600;}
#person #contents .ctArea .txt { margin-top: 10px; line-height: 2; display: inline-block;}
#person #contents .ctArea .arr { right: 50px; bottom: 40px;}
@media screen and (min-width: 1200px) {
#person header #navArea nav .hdNav li:nth-child(4) a { opacity: 1; color: #2e4fb5; border-bottom: solid 1px #2e4fb5;}
}
@media screen and (max-width: 1199px) {
#person.person_top #contents .mainTitArea { padding: 17vw 0;}
#person #contents .ctArea a { background-position: center center; background-size: cover;}
#person #contents .ctArea .txtbox { width: 100%; background-color: rgba(59, 61, 58, 0.6); text-align: center;}
}
@media screen and (min-width: 751px) {
}
@media screen and (max-width: 750px) {
#person #contents .mainTitArea { background: url("../img/person/mv_sp.jpg") top center no-repeat; background-size: cover;}
#person.person_top #contents .mainTitArea { padding: 200px 0;}
#person #contents .ctArea { margin-top: 50px; /*width: 90.66%;*/ margin-left: auto; margin-right: auto;}
#person #contents .ctArea a { height: 250px;}
#person #contents .ctArea .tit { font-size: 26px;}
#person #contents .ctArea .txt { margin-top: 5px; line-height: 1.8;}
#person #contents .ctArea .txtbox { padding: 80px 5% 0 5%;}
#person #contents .ctArea .arr { right: 5%; bottom: 20px;}
}


/* personList */
#person #contents .personList { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px;}
#person #contents .personList li {}
#person #contents .personList li a {}
#person #contents .personList li a .phArea { height: 465px; position: relative; color: #fff; overflow: hidden;}
#person #contents .personList li a .phArea:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0; opacity: 0; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s;}
#person #contents .personList li a .phArea .post { bottom: 90px; left: 30px; position: absolute; z-index: 5;}
#person #contents .personList li a .phArea .name { bottom: 30px; left: 30px; font-size: 56px; font-family: "Jost", sans-serif; position: absolute; z-index: 5; line-height: 1; font-weight: 500;}
#person #contents .personList li a .phArea .join { bottom: 35px; left: 130px; font-size: 14px; position: absolute; z-index: 5;}
#person #contents .personList li.item01 a .phArea .join {  left: 160px;}
#person #contents .personList li a .phArea .arr { width: 80px; height: 80px; right: 30px; bottom: 30px; position: absolute; z-index: 5;}
#person #contents .personList li a .phArea .circle.arr:before { width: 18px; height: 10px; background-size: 18px 10px;}
#person #contents .personList li a .phArea .img {}
#person #contents .personList li a .phArea .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease;}
#person #contents .personList li a .txtArea { margin-top: 30px;}
#person #contents .personList li a .txtArea .tag { padding: 4px 21px; color: #2e4fb5; background: #fff; display: inline-block; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s; font-weight: 600;}
#person #contents .personList li a .txtArea .txt { margin-top: 10px; font-size: 24px; display: block; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s; color: #fff; font-weight: 600;}
#person #contents .personList li a:hover { opacity: 1;}
#person #contents .personList li.item01 a {}
#person #contents .personList li.item01 a .phArea .join { left: 160px;}
#person #contents .personList li.item02 a {}
#person #contents .personList li.item03 a {}
@media screen and (max-width: 1330px) {
#person #contents .personList li a .phArea { height: 36.5vw;}
}
@media screen and (max-width: 1200px) {
#person #contents .personList { column-gap: 30px;}
#person #contents .personList li a .phArea .post { bottom: 70px; left: 20px; font-size: 14px;}
#person #contents .personList li a .phArea .name { bottom: 20px; left: 20px; font-size: 46px;}
#person #contents .personList li a .phArea .join { bottom: 25px; left: 105px; font-size: 12px;}
#person #contents .personList li.item01 a .phArea .join {  left: 135px;}
#person #contents .personList li a .phArea .arr { width: 70px; height: 70px; right: 20px; bottom: 20px;}
#person #contents .personList li a .txtArea { margin-top: 20px;}
#person #contents .personList li.item01 a .phArea .join { left: 130px;}
}
@media screen and (max-width: 900px) {
#person #contents .personList li a .phArea .name { left: 15px; font-size: 36px;}
#person #contents .personList li a .phArea .arr { width: 50px; height: 50px;}
#person #contents .personList li a .phArea .join { bottom: 22px; left: 80px; font-size: 11px;}
#person #contents .personList li a .phArea .circle.arr:before{ width: 11px; height: 6px; background-size: 11px 6px;}
#person #contents .personList li a .txtArea .tag { font-size: 14px;}
#person #contents .personList li a .txtArea .txt { font-size: 20px;}
#person #contents .personList li.item01 a .phArea .join { left: 100px;}
}
@media screen and (min-width: 751px) {
}
@media screen and (max-width: 750px) {
#person #contents .personList li { padding-left: 20px;}
#person #contents .personList li:nth-last-child(1) { padding-right: 20px;}
#person #contents .personList li a { position: relative;}
#person #contents .personList li a .phArea .post { left: 10px; bottom: 40px; font-size: 10px;}
#person #contents .personList li a .phArea .name { left: 10px; bottom: 10px; font-size: 30px; font-weight: 600;}
#person #contents .personList li a .phArea .join { left: 75px; bottom: 12px; font-size: 10px;}
#person #contents .personList li a .phArea .arr { right: 10px; bottom: 10px;}
#person #contents .personList li a .phArea .img {}
#person #contents .personList li a .txtArea { margin-top: 10px;}
#person #contents .personList li a .txtArea .tag { font-size: 12px;}
#person #contents .personList li a .txtArea .txt { font-size: 14px;}
#person #contents .personList li.item01 a {}
#person #contents .personList li.item01 a .phArea .join { left: 90px;}
#person #contents .personList li.item02 a {}
#person #contents .personList li.item03 a {}
}
@media screen and (max-width: 650px) {
#person #contents .personList { padding: 0 5%; margin-top: 0; column-gap: 0; grid-template-columns: 1fr;}
#person #contents .personList li { margin-top: 20px; padding: 0 !important;}
#person #contents .personList li a .phArea { height: 58.5vw;}
}


/*==================================
	top
==================================*/
#person.person_top { background: url("../img/recruitBlock_bg.jpg") top 860px center no-repeat; background-size: auto 90%;}
#person.person_top #contents {}
#person.person_top #contents .firstArea { margin-top: 120px; text-align: center;}
#person.person_top #contents .firstArea .tit {}
#person.person_top #contents .firstArea .tit img { max-width: 100%;}
#person.person_top #contents .firstArea .txt { font-size: 20px; margin-top: 60px; line-height: 2.2;}
#person.person_top #contents .bgArea { position: relative;}
#person.person_top #contents .bgArea:before { width: 100%; position: absolute; content: ""; background: linear-gradient(to bottom right, #2e4fb5, #098fcf);}
#person.person_top #contents .bgArea .inner { position: relative; z-index: 1;}
#person.person_top #contents .personList { display: block;}
#person.person_top #contents .personList li { margin-top: 80px; width: 100%; position: relative;}
@media screen and (min-width: 751px) {
#person.person_top #contents .bgArea:before { height: 100vw; bottom: 12vw;}
#person.person_top #contents .personList li a:hover .pcNameArea,
#person.person_top #contents .personList li a:hover .txtArea { opacity: 0.6; -webkit-transition: 0.8s; -moz-transition: 0.8s; -ms-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s;}



#person.person_top #contents .personList li a:after { font-size: 14vw; line-height: 12vw; letter-spacing: 0; position: absolute; bottom: -2px; opacity: 0.05; font-weight: 600;}
#person.person_top #contents .personList li:nth-child(1) a:after { content: "01"; right: 0; color: #fff;}
#person.person_top #contents .personList li:nth-child(2) a:after { content: "02"; left: 10vw; color: #fff;}
#person.person_top #contents .personList li:nth-child(3) a:after { content: "03"; right: 0; color: #f3f6f7; opacity: 1;}
#person.person_top #contents .personList li a .phArea:before { width: 55vw;}
#person.person_top #contents .personList li .phArea { height: 40vw; max-width: 55vw; position: inherit;}
#person.person_top #contents .personList li .phArea .img {}
#person.person_top #contents .personList li .phArea .arr { left: 46vw; right: auto;}
#person.person_top #contents .personList li .txtArea { margin-top: 0; width: calc(100% - 60vw); position: absolute; top: 0;}
#person.person_top #contents .personList li .txtArea .tag { font-size: 20px;font-weight: 600;}
#person.person_top #contents .personList li .txtArea .txt { margin-top: 20px; line-height: 2; font-weight: 600;}
#person.person_top #contents .personList li:first-child .txtArea .tag { background: #2e4fb5; color: #fff; }
#person.person_top #contents .personList li:first-child .txtArea .txt { color: #2e4fb5;}
#person.person_top #contents .personList li:nth-child(2n) .txtArea { left: 0;}
#person.person_top #contents .personList li:nth-child(2n) .phArea .arr { left: auto; right: 3%;}
#person.person_top #contents .personList li:nth-child(2n) .phArea,
#person.person_top #contents .personList li:nth-child(2n) a .phArea:before { margin-left: calc( 100% - 55vw);}
#person.person_top #contents .personList li:nth-child(2n) .phArea .name,
#person.person_top #contents .personList li:nth-child(2n) .phArea .join { left: 0; right: auto;}
#person.person_top #contents .personList li:nth-child(2n+1) .txtArea { right: 0;}
#person.person_top #contents .personList li:nth-child(2n+1) .phArea .name,
#person.person_top #contents .personList li:nth-child(2n+1) .phArea .join { right: 0; left: auto;}
#person.person_top #contents .personList li .phArea .name { width: calc(100% - 60vw); position: absolute; bottom: 0; font-weight: 500;}
#person.person_top #contents .personList li .phArea .join { width: calc(100% - 60vw); position: absolute; bottom: 40px;}
#person.person_top #contents .personList li:last-child .phArea .name,
#person.person_top #contents .personList li:last-child .phArea .join { color: #444444;}
#person.person_top #contents .personList li a .phArea:hover:before { opacity: 0.8 !important; background-image: linear-gradient(-45deg, #2e4fb5, #098fcf);}
#person.person_top #contents .personList li a .phArea:hover .img img { transform: scale(1.1);}
#person.person_top #contents .personList li a .pcNameArea { width: calc(100% - 830px); right: 0; bottom: 0; position: absolute; z-index: 5; color: #fff;}
#person.person_top #contents .personList li a .pcNameArea .name { font-size: 56px; margin-top: 2px; font-weight: 500; display: block; line-height: 1;}
#person.person_top #contents .personList li a .pcNameArea .join { font-size: 14px; display: block;}
#person.person_top #contents .personList li:nth-child(2) a .pcNameArea { right: inherit; left: 0;}
#person.person_top #contents .personList li:nth-child(3) a .pcNameArea { color: #444;}
#person.person_top #contents .firstArea { position: relative;}
#person.person_top #contents .firstArea:before,
#person.person_top #contents .firstArea:after { position: absolute; content: ""; display: block;}
#person.person_top #contents .firstArea:before { left: 0; bottom: -80px; width: 80px; height: 105px; background: url("../img/person/top_firstArea_illust01.png") bottom center no-repeat; background-size: 100% auto;}
#person.person_top #contents .firstArea:after { left: calc( 50% + 35vw); bottom: -80px; width: 80px; height: 105px; background: url("../img/person/top_firstArea_illust02.png") bottom center no-repeat; background-size: 100% auto;}
}
@media screen and (min-width: 901px) {
#person.person_top #contents .bgArea:before { height: 98vw;}
#person.person_top #contents .firstArea:before,
#person.person_top #contents .firstArea:after { width: 100px; height: 140px;}
#person.person_top #contents .personList li .phArea .join { bottom: 50px;}
#person.person_top #contents .personList li a:after { font-size: 15vw;}
}
@media screen and (min-width: 1101px) {
#person.person_top #contents .firstArea:before { bottom: -80px; width: 138px; height: 176px;}
#person.person_top #contents .firstArea:after { left: calc( 50% + 400px); bottom: -80px; width: 140px; height: 177px;}
}
@media screen and (min-width: 1201px) {
#person.person_top #contents .bgArea:before { height: 1080px; bottom: 170px;}
#person.person_top #contents .firstArea:after { left: calc( 50% + 450px);}
#person.person_top #contents .personList li a:after { font-size: 200px; line-height: 150px;}
#person.person_top #contents .personList li a .phArea:before { width: 750px;}
#person.person_top #contents .personList li:nth-child(2) a:after { left: 10vw;}
#person.person_top #contents .personList li:nth-child(2n) .phArea,
#person.person_top #contents .personList li:nth-child(2n) a .phArea:before { margin-left: calc( 100% - 750px);}
#person.person_top #contents .personList li .phArea { height: 460px; max-width: 750px;}
#person.person_top #contents .personList li .phArea .arr { left: 630px;}
#person.person_top #contents .personList li .txtArea { width: calc(100% - 830px);}
#person.person_top #contents .personList li .txtArea .txt { margin-top: 30px;}
#person.person_top #contents .personList li .phArea .name { width: calc(100% - 830px);}
#person.person_top #contents .personList li .phArea .join { width: calc(100% - 830px); bottom: 60px;}
}
@media screen and (min-width: 1330px) {
#person.person_top #contents .personList li:nth-child(2) a:after { left: 150px;}
}
@media screen and (max-width: 1200px) {
#person.person_top #contents .personList li a .pcNameArea { width: calc(100% - 60vw);}
#person.person_top #contents .personList li a .pcNameArea .name { font-size: 46px;}
#person.person_top #contents .personList li a .pcNameArea .join { font-size: 12px;}
}
@media screen and (max-width: 900px) {
#person.person_top #contents .personList li a .pcNameArea .name { font-size: 36px;}
#person.person_top #contents .personList li a .pcNameArea .join { font-size: 11px;}
}
@media screen and (max-width: 750px) {
#person.person_top { background-size: 950px auto; background-position: top 640px center;}
#person.person_top #contents .bgArea:before { height: 280vw; bottom: -22vw;}
#person.person_top #contents .firstArea { margin-top: 60px;}
#person.person_top #contents .personList li { margin-top: 40px; padding-right: 0 !important;}
#person.person_top #contents .personList li .phArea { height: 76.5vw;}
#person.person_top #contents .personList li:nth-child(1) a .phArea .join { left: 90px;}
#person.person_top #contents .personList li .phArea .arr { background: none; border: solid 1px #fff;}
#person.person_top #contents .personList li a .pcNameArea { display: none;}
#person.person_top #contents .personList li a:hover .phArea:before { opacity: 0.8; background-image: linear-gradient(-45deg, #2e4fb5, #098fcf);}
#person.person_top #contents .personList li a:hover .phArea .img img { transform: scale(1.1);}
#person.person_top #contents .firstArea .tit img { max-width: 549px; width: 87%;}
#person.person_top #contents .firstArea .txt { font-size: 14px; margin-top: 40px; text-align: left; padding: 0 5%;}
}


/*==================================
	interview
==================================*/
#person.interview #contents {}
#person.interview #contents .subtit { padding-left: 0; text-indent: 50px; margin-top: 100px; font-size: 28px; color: #2e4fb5; font-weight: 700; line-height: 2;}
#person.interview #contents .subtit.subtitLine:before { top: 25px;}
#person.interview #contents .interviewTitArea { height: 1000px; padding-top: 290px; margin-bottom: 220px; position: relative;}
#person.interview #contents .interviewTitArea .inner { height: 1000px; width: calc( 50% - 110px); left: calc( 50% + 110px); position: absolute;}
#person.interview #contents .interviewTitArea .txtArea .tag { padding: 10px 20px 8px 20px; font-size: 20px; font-weight: 600; color: #fff; background: #2e4fb5; display: inline-block; line-height: 1;}
#person.interview #contents .interviewTitArea .txtArea .txt { font-size: 40px; font-weight: 700; color: #2e4fb5;}
#person.interview #contents .interviewTitArea .txtArea .txt span { padding: 0 5px; margin-top: 25px; background: #fff; display: inline-block; line-height: 1.3;}
#person.interview #contents .interviewTitArea .txtArea .post { font-size: 20px; color: #2e4fb5;}
#person.interview #contents .interviewTitArea .txtArea .name { font-size: 60px; font-weight: 600; color: #2e4fb5; z-index: 1; position: relative;}
#person.interview #contents .interviewTitArea .txtArea .btm { bottom: 350px; position: absolute;}
#person.interview #contents .interviewTitArea .numArea { bottom: -160px; max-width: 1200px; width: 90.66%; left: 0; right: 0; margin: auto;position: absolute; text-align: right;}
#person.interview #contents .interviewTitArea .numArea .num { bottom: 0; right: 0; font-size: 300px; font-weight: 600; opacity: 0.25; line-height: 1; letter-spacing: 0; color: #a8bac0;}
#person.interview #contents .interviewTitArea .numArea .txt { bottom: 50px; right: 30px; font-size: 18px; color: #2e4fb5; position: absolute; z-index: 1;}
#person.interview.interview01 #contents .interviewTitArea .numArea .txt { right: 50px;}
#person.interview #contents .txtBox .txt p { font-size: 18px; margin-top: 50px; line-height: 2;}
#person.interview #contents .txtBox.box04 { position: relative; z-index: 1;}
#person.interview #contents .linkBox { max-width: 660px; margin: 100px auto 0 auto;}
#person.interview #contents .linkBox a { padding: 40px 50px 40px 220px; font-size: 24px; text-align: center; color: #2e4fb5; border: solid 1px #2e4fb5; position: relative; font-weight: 600;}
#person.interview.interview01 #contents .linkBox a { background: url("../img/person/interview01_link.jpg") left top no-repeat; background-size: auto 100%;}
#person.interview.interview02 #contents .linkBox a { background: url("../img/person/interview02_link.jpg") left top no-repeat; background-size: auto 100%;}
#person.interview.interview03 #contents .linkBox a { background: url("../img/person/interview03_link.jpg") left top no-repeat; background-size: auto 100%;}
#person.interview #contents .linkBox a:after { width: 20px; height: 12px; right: 30px; top: 0; bottom: 0; background: url("../img/arr_bl.svg") no-repeat; background-size: 20px 12px; content: ""; position: absolute; margin: auto;}
#person.interview #contents .centerImg { margin-top: 50px;}
#person.interview #contents .centerImg img { width: 100%;}
#person.interview #contents .schedule { padding-top: 80px; position: relative;}
#person.interview #contents .schedule:before { top: -100px; height: 920px; width: 100%; position: absolute; background: #f3f6f7; content: "";}
#person.interview #contents .schedule .inner { position: relative; z-index: 1; max-width: 1040px;}
#person.interview #contents .schedule .titArea { color: #2e4fb5; text-align: center;}
#person.interview #contents .schedule .titArea .en { font-size: 36px; font-weight: 600;}
#person.interview #contents .schedule .titArea .en .fwN { letter-spacing: -0.1em; padding-right: 5px;}
#person.interview #contents .schedule .titArea .jp { margin-top: 10px; font-size: 24px; font-weight: 600;}
#person.interview #contents .schedule .scheduleList ul li .time { font-weight: 600;}
#person.interview #contents .schedule .message { margin-top: 80px; padding: 60px 80px; border-radius: 20px; background: #2e4fb5; color: #fff; position: relative;}
#person.interview #contents .schedule .message:before,
#person.interview #contents .schedule .message:after { content: ""; position: absolute;}
#person.interview #contents .schedule .message:before { width: 147px; height: 176px; left: -80px; top: -40px; background: url("../img/person/interview_message_illust.png")no-repeat;}
#person.interview.interview02 #contents .schedule .message:before { width: 138px; height: 176px; left: -70px; top: -40px; background: url("../img/person/interview02_message_illust.png")no-repeat;}
#person.interview.interview03 #contents .schedule .message:before { width: 144px; height: 176px; left: -70px; top: -40px; background: url("../img/person/interview03_message_illust.png")no-repeat;}
#person.interview #contents .schedule .message:after { width: 170px; height: 220px; right: -40px; top: -140px;}
#person.interview #contents .schedule .message .tit { font-size: 24px; text-align: center; font-weight: 600;}
#person.interview #contents .schedule .message .txt { min-height: 220px; padding-right: 385px; margin-top: 40px; font-size: 18px; line-height: 2; background: url("../img/person/interview_message_ph.jpg") right top no-repeat;}
#person.interview #contents .endBlock { position: relative;}
#person.interview #contents .endBlock:before { height: 750px; top: 300px; width: 100%; position: absolute; content: ""; background: linear-gradient(to bottom right, #2e4fb5, #098fcf);}
#person.interview #contents .endBlock .inner { position: relative; z-index: 1;}
#person.interview #contents .endBlock .blockTit { text-align: left; font-weight: 600;}
#person.interview #contents .endBlock .blockTit .en { font-size: 36px;}
#person.interview #contents .endBlock .blockTit .jp { font-size: 24px;}
#person.interview #contents .endBlock .interview { margin-top: 110px;}
#person.interview.interview01 #contents .interviewTitArea { background: url("../img/person/interview01_mv.jpg") center center  no-repeat; background-size: cover;}
#person.interview.interview02 #contents .interviewTitArea { background: url("../img/person/interview02_mv.jpg") center center  no-repeat; background-size: cover;}
#person.interview.interview03 #contents .interviewTitArea { background: url("../img/person/interview03_mv.jpg") center center  no-repeat; background-size: cover;}
#person.interview.interview01 #contents .schedule .message:after { background: url("../img/person/interview01_sche_ph.png")no-repeat;}
#person.interview.interview02 #contents .schedule .message:after { background: url("../img/person/interview02_sche_ph.png")no-repeat;}
#person.interview.interview03 #contents .schedule .message:after { background: url("../img/person/interview03_sche_ph.png")no-repeat;}
#person.interview #contents .personList li a:hover .phArea:before { opacity: 0.8; background-image: linear-gradient(-45deg, #2e4fb5, #098fcf);}
#person.interview #contents .personList li a:hover .phArea .img img { transform: scale(1.1);}
@media screen and (max-width: 1400px) {
#person.interview #contents .interviewTitArea .txtArea .txt { font-size: 36px;}
}
@media screen and (max-width: 1300px) {
#person.interview #contents .interviewTitArea .txtArea .tag { font-size: 18px;}
#person.interview #contents .interviewTitArea .txtArea .txt { font-size: 32px;}
}
@media screen and (min-width: 1201px) {
#person.interview #contents .txtBox.txtBoxR { padding-left: 655px; min-height: 600px;}
#person.interview #contents .txtBox.txtBoxL { padding-right: 655px; min-height: 600px;}
#person.interview.interview01 #contents .txtBox.box01 { background: url("../img/person/interview01_ph01.jpg") right top no-repeat;}
#person.interview.interview01 #contents .txtBox.box03 { background: url("../img/person/interview01_ph03.jpg") left top no-repeat;}
#person.interview.interview01 #contents .txtBox.box04 { background: url("../img/person/interview01_ph04.jpg") right top no-repeat;}
#person.interview.interview02 #contents .txtBox.box01 { background: url("../img/person/interview02_ph01.jpg") right top no-repeat;}
#person.interview.interview02 #contents .txtBox.box03 { background: url("../img/person/interview02_ph03.jpg") left top no-repeat;}
#person.interview.interview02 #contents .txtBox.box04 { background: url("../img/person/interview02_ph04.jpg") right top no-repeat;}
#person.interview.interview03 #contents .txtBox.box01 { background: url("../img/person/interview03_ph01.jpg") right top no-repeat;}
#person.interview.interview03 #contents .txtBox.box03 { background: url("../img/person/interview03_ph03.jpg") left top no-repeat;}
#person.interview.interview03 #contents .txtBox.box04 { background: url("../img/person/interview03_ph04.jpg") right top no-repeat;}
#person.interview #contents .schedule .scheduleList.pc { margin-top: 50px; display: flex; justify-content: space-between;}
#person.interview #contents .schedule .scheduleList.pc ul { width: 48%; position: relative;}
#person.interview #contents .schedule .scheduleList.pc ul:before { content: ""; height: calc(100% - 20px); width: 1px; background-color: #ccd5ea; position: absolute; left: 20px; top: 8px;}
#person.interview.interview02 #contents .schedule .scheduleList.pc ul.item02:before { height: calc(100% - 160px);}
#person.interview.interview03 #contents .schedule .scheduleList.pc ul.item02:before { height: calc(100% - 46px);}
#person.interview #contents .schedule .scheduleList.pc ul li { padding-left: 40px; margin-top: 30px; font-size: 18px; position: relative; color: #2e4fb5; display: flex;}
#person.interview #contents .schedule .scheduleList.pc ul li:nth-child(1) { margin-top: 0;} 
#person.interview #contents .schedule .scheduleList.pc ul li:before { width: 9px; height: 9px; border-radius: 9px; content: ""; background-color: #2e4fb5; position: absolute; left: 16px; top: 8px;}
#person.interview #contents .schedule .scheduleList.pc ul li .time { width: 80px;}
#person.interview #contents .schedule .scheduleList.pc ul li .txt { width: calc( 100% - 80px);}
#person.interview #contents .schedule .scheduleList.sp { display: none;}
}
@media screen and (max-width: 1200px) {
#person.interview #contents .interviewTitArea .inner { left: calc( 50% + 5vw); width: calc(50% - 70px);}
#person.interview #contents .txtBox.box01 { padding-bottom: 52vw;}
#person.interview #contents .txtBox.box03 { padding-bottom: 52vw;}
#person.interview #contents .txtBox.box04 { padding-bottom: 52vw;}
#person.interview.interview01 #contents .txtBox.box01 { background: url("../img/person/interview01_ph01.jpg") center bottom no-repeat; background-size: 50% auto;}
#person.interview.interview01 #contents .txtBox.box03 { background: url("../img/person/interview01_ph03.jpg") center bottom no-repeat; background-size: 50% auto;}
#person.interview.interview01 #contents .txtBox.box04 { background: url("../img/person/interview01_ph04.jpg") center bottom no-repeat; background-size: 50% auto;}
#person.interview.interview02 #contents .txtBox.box01 { background: url("../img/person/interview02_ph01.jpg") center bottom no-repeat; background-size: 50% auto;}
#person.interview.interview02 #contents .txtBox.box03 { background: url("../img/person/interview02_ph03.jpg") center bottom no-repeat; background-size: 50% auto;}
#person.interview.interview02 #contents .txtBox.box04 { background: url("../img/person/interview02_ph04.jpg") center bottom no-repeat; background-size: 50% auto;}
#person.interview.interview03 #contents .txtBox.box01 { background: url("../img/person/interview03_ph01.jpg") center bottom no-repeat; background-size: 50% auto;}
#person.interview.interview03 #contents .txtBox.box03 { background: url("../img/person/interview03_ph03.jpg") center bottom no-repeat; background-size: 50% auto;}
#person.interview.interview03 #contents .txtBox.box04 { background: url("../img/person/interview03_ph04.jpg") center bottom no-repeat; background-size: 50% auto;}
#person.interview #contents .schedule .scheduleList.pc { display: none;}
#person.interview #contents .schedule .scheduleList.sp { margin-top: 50px; padding-right: 5%; position: relative;}
#person.interview #contents .schedule .scheduleList.sp:before { content: ""; height: calc(100% - 12px); width: 1px; background-color: #ccd5ea; position: absolute; left: 20px; top: 6px;}
#person.interview.interview02 #contents .schedule .scheduleList.sp:before { height: calc(100% - 40px);}
#person.interview.interview03 #contents .schedule .scheduleList.sp:before { height: calc(100% - 40px);}
#person.interview #contents .schedule .scheduleList.sp li { margin-top: 25px; padding-left: 40px; color: #2e4fb5; position: relative; display: flex;}
#person.interview #contents .schedule .scheduleList.sp li:nth-child(1) { margin-top: 0;}
#person.interview #contents .schedule .scheduleList.sp li:before { width: 10px; height: 10px; border-radius: 10px; content: ""; background-color: #2e4fb5; position: absolute; left: 15px; top: 7px;}
#person.interview #contents .schedule .scheduleList.sp li .time { width: 70px; font-weight: 600;}
#person.interview #contents .schedule .scheduleList.sp li .txt { width: calc( 100% - 50px);}
}
@media screen and (max-width: 1100px) {
#person.interview #contents .interviewTitArea .inner { left: 50%; width: 48%;}
#person.interview #contents .interviewTitArea .txtArea .tag { font-size: 16px;}
#person.interview #contents .interviewTitArea .txtArea .txt { font-size: 28px;}
#person.interview #contents .interviewTitArea .txtArea .post { font-size: 18px;}
#person.interview #contents .interviewTitArea .txtArea .name { font-size: 50px;}
#person.interview #contents .interviewTitArea .txtArea .btm { position: inherit; bottom: inherit; margin-top: 50px;}
#person.interview #contents .endBlock:before { height: 70vw; top: 28vw;}
}
@media screen and (max-width: 1000px) {
	
#person.interview #contents .schedule .message:before { left: inherit; right: -2vw; top: -110px;}
#person.interview.interview02 #contents .schedule .message:before { left: inherit; right: -2vw; top: -110px;}
#person.interview.interview03 #contents .schedule .message:before { left: inherit; right: -2vw; top: -110px;}
#person.interview #contents .schedule .message:after { display: none;}
#person.interview #contents .schedule .message .txt { padding-right: 0; padding-bottom: 30vw; background-position: bottom center; background-size: 40vw auto;}
}
@media screen and (max-width: 900px) {
#person.interview #contents .interviewTitArea .inner { left: 47%; width: 53%;}
#person.interview #contents .interviewTitArea .txtArea .tag { font-size: 16px;}
#person.interview #contents .interviewTitArea .txtArea .txt { font-size: 26px;}
#person.interview #contents .interviewTitArea .txtArea .post { font-size: 14px;}
#person.interview #contents .interviewTitArea .txtArea .name { font-size: 40px;}
#person.interview #contents .txtBox.box01 { padding-bottom: 92vw; background-size: 89% auto !important;}
#person.interview #contents .txtBox.box03 { padding-bottom: 92vw; background-size: 89% auto !important;}
#person.interview #contents .txtBox.box04 { padding-bottom: 92vw; background-size: 89% auto !important;}
#person.interview #contents .endBlock:before { height: 65vw; top: calc( 110px + 20vw);}
}
@media screen and (min-width: 751px) {
}
@media screen and (max-width: 750px) {
#person.interview #contents .subtit { padding-left: 30px; text-indent: 0;}
#person.interview #contents .subtit.subtitLine:before { top: 13px;}
#person.interview #contents .interviewTitArea { height: 142.66vw; margin-bottom: 80px; padding-top: 0;}
#person.interview #contents .interviewTitArea .inner { height: 142.66vw; width: 84%; position: inherit;left: 0;}
#person.interview #contents .interviewTitArea .txtArea .top { bottom: 120px; position: absolute;}
#person.interview #contents .interviewTitArea .txtArea .tag { font-size: 10px; padding: 5px 10px;}
#person.interview #contents .interviewTitArea .txtArea .txt { font-size: 20px;}
#person.interview #contents .interviewTitArea .txtArea .txt span { margin-top: 10px;}
#person.interview #contents .interviewTitArea .txtArea .post { font-size: 12px; color: #fff; padding-left: 0;}
#person.interview #contents .interviewTitArea .txtArea .name { font-size: 34px; color: #fff; padding-left: 0;}
#person.interview #contents .interviewTitArea .txtArea .btm { bottom: 20px; position: absolute;}
#person.interview #contents .interviewTitArea .numArea { bottom: -80px;}
#person.interview #contents .interviewTitArea .numArea .num  { font-size: 160px;}
#person.interview #contents .interviewTitArea .numArea .txt  { font-size: 10px; width: 100%; bottom: 30px; right: 10px; text-align: right;}
#person.interview.interview01 #contents .interviewTitArea .numArea .txt { right: 20px;}
#person.interview #contents .txtBox .txt p { font-size: 12px; margin-top: 25px;}
#person.interview #contents .centerImg { margin-top: 25px;}
#person.interview #contents .subtit { margin-top: 50px; font-size: 14px;}
#person.interview.interview01 #contents .interviewTitArea { background: url("../img/person/interview01_mv_sp.jpg") center center no-repeat; background-size: cover;}
#person.interview.interview02 #contents .interviewTitArea { background: url("../img/person/interview02_mv_sp.jpg") center center no-repeat; background-size: cover;}
#person.interview.interview03 #contents .interviewTitArea { background: url("../img/person/interview03_mv_sp.jpg") center center no-repeat; background-size: cover;}
#person.interview #contents .linkBox { max-width: 400px; width: 94%; margin: 50px auto 0 auto;}
#person.interview #contents .linkBox a { padding: 20px 25px 20px 110px; font-size: 12px; }
#person.interview #contents .linkBox a:after { width: 10px; height: 6px; right: 15px; background-size: 10px 6px;}
#person.interview #contents .schedule { padding-top: 60px;}
#person.interview #contents .schedule .titArea .en { font-size: 15px;}
#person.interview #contents .schedule .titArea .jp { margin-top: 0; font-size: 12px;}
#person.interview #contents .schedule .scheduleList.sp:before { height: calc(100% - 10px); top: 5px;}
#person.interview.interview02 #contents .schedule .scheduleList.sp:before { height: calc(100% - 26px);}
#person.interview.interview03 #contents .schedule .scheduleList.sp:before { height: calc(100% - 26px);}
#person.interview #contents .schedule .scheduleList.sp li { font-size: 12px;}
#person.interview #contents .schedule .scheduleList.sp li:before { top: 5px;}
#person.interview #contents .schedule .scheduleList.sp li .time { width: 50px;}
#person.interview #contents .schedule .message { padding: 40px 9%; border-radius: 10px;}
#person.interview #contents .schedule .message:before { top: -50px; height: 88.5px; width: 74px; background-size: 100% auto;}
#person.interview.interview02 #contents .schedule .message:before { top: -50px; height: 88.5px; width: 74px; background-size: 100% auto;}
#person.interview.interview03 #contents .schedule .message:before { top: -50px; height: 88.5px; width: 74px; background-size: 100% auto;}
#person.interview #contents .schedule .message .tit { font-size: 15px;}
#person.interview #contents .schedule .message .txt { margin-top: 25px; font-size: 12px;}
#person.interview #contents .endBlock .blockTit { text-align: center;}
#person.interview #contents .endBlock .blockTit .en { font-size: 18px;}
#person.interview #contents .endBlock .blockTit .jp { font-size: 12px;}
#person.interview #contents .endBlock .interview { margin-top: 50px;}
#person.interview #contents .endBlock:before { height: 60vw; top: calc( 110px + 15vw);}
}
@media screen and (max-width: 650px) {
#person.interview #contents .endBlock:before { height: calc( 300px + 105vw); top: calc( 65px + 25vw);}
}



/*==================================
	crosstalk
==================================*/
#person.crosstalk #contents .mainTitArea { background: url("../img/person/crosstalk_mv.jpg") center center no-repeat; background-size: cover;}
#person.crosstalk #contents { overflow: hidden;}
#person.crosstalk #contents .memberBox:before,
#person.crosstalk #contents .talkList.block01:before,
#person.crosstalk #contents .talkList.block01:after,
#person.crosstalk #contents .talkList.block02:before,
#person.crosstalk #contents .talkList.block02:after,
#person.crosstalk #contents .talkList.block03:before,
#person.crosstalk #contents .talkList.block03:after,
#person.crosstalk #contents .talkList.block04:before,
#person.crosstalk #contents .talkList.block04:after { content: ""; position: absolute; background: url("../img/person/crosstalkBg.png") no-repeat; background-size: 100% 100%;}
#person.crosstalk #contents .inner { position: relative; z-index: 1;}
#person.crosstalk #contents .memberBox { text-align: center;color: #2e4fb5; position: relative;}
#person.crosstalk #contents .memberBox .tit { padding-top: 120px; font-size: 60px; font-weight: 600; line-height: 1;}
#person.crosstalk #contents .memberBox .tit span:before { margin-right: 10px; width: 50px; height: 44px; background: url("../img/person/crosstalk_icon.png") no-repeat; content: ""; display: inline-block;}
#person.crosstalk #contents .memberBox .txt { margin-top: 20px; font-size: 28px; font-weight: 700; line-height: 1.8;}
#person.crosstalk #contents .memberBox .list { margin: 90px -2% 0 -2%; display: flex; flex-wrap: wrap;}
#person.crosstalk #contents .memberBox .list li { width: 16%; margin: 0 2%; text-align: left;}
#person.crosstalk #contents .memberBox .list li .img img { width: 100%;}
#person.crosstalk #contents .memberBox .list li .post { margin-top: 15px; font-size: 15px; letter-spacing: -0.02em; font-weight: 600;}
#person.crosstalk #contents .memberBox .list li .join { font-size: 14px; font-weight: 600;}
#person.crosstalk #contents .memberBox .list li .name { font-size: 36px; font-weight: 600;}
#person.crosstalk #contents .talkList { position: relative;}
#person.crosstalk #contents .talkList .subtit { margin-top: 100px; font-size: 28px; color: #2e4fb5; font-weight: 700; line-height: 1.8;}
#person.crosstalk #contents .talkList .list li { font-size: 18px; margin-top: 40px; padding-left: 160px; min-height: 110px; line-height: 2.2;}
#person.crosstalk #contents .talkList .list li.memHF { background: url("../img/person/crosstalk_iconHF.jpg") left top 10px no-repeat;}
#person.crosstalk #contents .talkList .list li.memHY { background: url("../img/person/crosstalk_iconHY.jpg") left top 10px no-repeat;}
#person.crosstalk #contents .talkList .list li.memKN { background: url("../img/person/crosstalk_iconKN.jpg") left top 10px no-repeat;}
#person.crosstalk #contents .talkList .list li.memSK { background: url("../img/person/crosstalk_iconSK.jpg") left top 10px no-repeat;}
#person.crosstalk #contents .talkList .list li.memMW { background: url("../img/person/crosstalk_iconMW.jpg") left top 10px no-repeat;}
#person.crosstalk #contents .talkList .list li.all { background: url("../img/person/crosstalk_iconAll.jpg") left top 10px no-repeat;}
#person.crosstalk #contents .talkList .phArea.nomal { display: flex; align-content: center;}
#person.crosstalk #contents .talkList .phArea img { width: 100%;}
#person.crosstalk #contents .talkList.block01 .list li:nth-child(-n+6) { padding-right: 485px}
#person.crosstalk #contents .talkList.block01 .list li:first-child { position: relative;}
#person.crosstalk #contents .talkList.block01 .list li:first-child:before,
#person.crosstalk #contents .talkList.block01 .list li:first-child:after { width: 396px; height: 380px; content: ""; position: absolute; right: 0;}
#person.crosstalk #contents .talkList.block01 .list li:first-child:before { top: 0; background: url("../img/person/crosstalk_ph01.jpg") no-repeat;}
#person.crosstalk #contents .talkList.block01 .list li:first-child:after { top: 385px; background: url("../img/person/crosstalk_ph02.jpg") no-repeat;}
#person.crosstalk #contents .talkList.block02 .phArea { margin: 110px auto 0 auto;}
#person.crosstalk #contents .talkList.block02 .phArea img { max-width: 396px; width: 33%;}
#person.crosstalk #contents .talkList.block02 .phArea img.mt { margin: 0 5px;}
#person.crosstalk #contents .talkList.block04 .list li:nth-child(-n+5) { padding-right: 485px}
#person.crosstalk #contents .talkList.block04 .list li:first-child { position: relative;}
#person.crosstalk #contents .talkList.block04 .list li:first-child:before,
#person.crosstalk #contents .talkList.block04 .list li:first-child:after { width: 396px; height: 380px; content: ""; position: absolute; right: 0;}
#person.crosstalk #contents .talkList.block04 .list li:first-child:before { top: 0; background: url("../img/person/crosstalk_ph06.jpg") no-repeat;}
#person.crosstalk #contents .talkList.block04 .list li:first-child:after { top: 385px; background: url("../img/person/crosstalk_ph07.jpg") no-repeat;}
#person.crosstalk #contents .talkList.block04 .phArea { max-width: 1040px; margin: 110px auto 0 auto;}
@media screen and (min-width: 1201px) {
}
@media screen and (max-width: 1200px) {
#person.crosstalk #contents .talkList.block01 .list li:nth-child(6) { padding-right: 0;}
#person.crosstalk #contents .talkList.block04 .list li:nth-child(5) { padding-right: 0;}
}
@media screen and (max-width: 1199px) {
#person.crosstalk #contents .mainTitArea { padding: 17vw 0;}
}
@media screen and (max-width: 1060px) {
#person.crosstalk #contents .talkList.block01 .list li:nth-child(5) { padding-right: 0;}
#person.crosstalk #contents .talkList.block04 .list li:nth-child(4) { padding-right: 0;}
}
@media screen and (min-width: 1000px) {
#person.crosstalk #contents .memberBox:before { width: 506px; height: 506px; top: 120px; left: calc( 50% + 320px);}
#person.crosstalk #contents .talkList.block01:before { width: 1050px; height: 1051px; top: -60px; right: calc( 50% - 270px);}
#person.crosstalk #contents .talkList.block01:after { width: 506px; height: 506px; bottom: -150px; left: calc( 50% + 150px);}
#person.crosstalk #contents .talkList.block01 .list { background: url("../img/person/crosstalkBg.png") center center no-repeat; background-size: 250px 251px;}
#person.crosstalk #contents .talkList.block02:before { width: 250px; height: 251px; top: 300px; left: calc( 50% - 20px);}
#person.crosstalk #contents .talkList.block02:after { width: 1050px; height: 1051px; bottom: 500px; left: calc( 50% - 150px);}
#person.crosstalk #contents .talkList.block03:before { width: 506px; height: 506px; top: 30px; left: calc( 50% + 30px);}
#person.crosstalk #contents .talkList.block03:after { width: 1050px; height: 1051px; bottom: -500px; right: calc( 50% - 270px);}
#person.crosstalk #contents .talkList.block04:before { width: 250px; height: 251px; top: 800px; left: calc( 50% - 20px);}
#person.crosstalk #contents .talkList.block04:after { width: 506px; height: 506px; bottom: 330px; left: calc( 50% + 330px);}
}
@media screen and (max-width: 999px) {
#person.crosstalk #contents .memberBox:before { width: 80vw; height: 80vw; top: 60px; left: calc( 50% - 10vw);}
#person.crosstalk #contents .talkList.block01:before { width: 120vw; height: 120vw; top: -30px; right: calc( 50% - 27vw);}
#person.crosstalk #contents .talkList.block01:after { width: 80vw; height: 80vw; bottom: 50px; left: calc( 50% + 10vw);}
#person.crosstalk #contents .talkList.block01 .list {  background: none;}
#person.crosstalk #contents .talkList.block02:before { width: 50vw; height: 50vw; top: 150px; left: calc( 50% - 2vw);}
#person.crosstalk #contents .talkList.block02:after { width: 120vw; height: 120vw; bottom: 300px; left: calc( 50% - 15vw);}
#person.crosstalk #contents .talkList.block03:before { width: 40vw; height: 40vw; top: 30px; left: calc( 50% + 3vw);}
#person.crosstalk #contents .talkList.block03:after { width: 80vw; height: 80vw; bottom: -150px; right: calc( 50% - 7vw);}
#person.crosstalk #contents .talkList.block04:before { width: 50vw; height: 50vw; top: 400px; left: calc( 50% - 5vw);}
#person.crosstalk #contents .talkList.block04:after { width: 80vw; height: 80vw; bottom: 120px; left: calc( 50% + 5vw);}
#person.crosstalk #contents .memberBox .list { margin: 45px 0 0 0;}
#person.crosstalk #contents .memberBox .list li { width: 32%; margin: 0 0.5%;}
#person.crosstalk #contents .memberBox .list li:nth-child(n+4) { margin-top: 25px;}
#person.crosstalk #contents .talkList .list li { font-size: 12px; margin-top: 20px; padding-left: 80px; min-height: 60px;}
#person.crosstalk #contents .talkList .list li.memHF,
#person.crosstalk #contents .talkList .list li.memHY,
#person.crosstalk #contents .talkList .list li.memKN,
#person.crosstalk #contents .talkList .list li.memSK,
#person.crosstalk #contents .talkList .list li.memMW ,
#person.crosstalk #contents .talkList .list li.all { background-size: 50px 50px; background-position: top 5px left;}
#person.crosstalk #contents .talkList.block01 .list{ margin-top: 30px; padding-top: 42.5vw; position: relative;}
#person.crosstalk #contents .talkList.block01 .list:before,
#person.crosstalk #contents .talkList.block01 .list:after { width: 49%; height: 42vw; content: ""; position: absolute;}
#person.crosstalk #contents .talkList.block01 .list:before { left: 0; top: 0; background: url("../img/person/crosstalk_ph01.jpg") no-repeat; background-size: 100% auto;}
#person.crosstalk #contents .talkList.block01 .list:after { right: 0; top: 0; background: url("../img/person/crosstalk_ph02.jpg") no-repeat; background-size: 100% auto;}
#person.crosstalk #contents .talkList.block01 .list li { padding-right: 0 !important;}
#person.crosstalk #contents .talkList.block01 .list li:first-child:before,
#person.crosstalk #contents .talkList.block01 .list li:first-child:after { display: none;}
#person.crosstalk #contents .talkList.block02 .phArea { margin: 50px auto 0 auto; flex-wrap: wrap; justify-content: space-between;}
#person.crosstalk #contents .talkList.block02 .phArea img { margin-top: 2vw; max-width: 49%; width: 49%;}
#person.crosstalk #contents .talkList.block02 .phArea img.mt { margin: 2vw 0 0 0;}
#person.crosstalk #contents .talkList.block04 .list{ margin-top: 30px; padding-top: 42.5vw; position: relative;}
#person.crosstalk #contents .talkList.block04 .list:before,
#person.crosstalk #contents .talkList.block04 .list:after { width: 49%; height: 42vw; content: ""; position: absolute;}
#person.crosstalk #contents .talkList.block04 .list:before { left: 0; top: 0; background: url("../img/person/crosstalk_ph06.jpg") no-repeat; background-size: 100% auto;}
#person.crosstalk #contents .talkList.block04 .list:after { right: 0; top: 0; background: url("../img/person/crosstalk_ph07.jpg") no-repeat; background-size: 100% auto;}
#person.crosstalk #contents .talkList.block04 .list li { padding-right: 0 !important;}
#person.crosstalk #contents .talkList.block04 .list li:first-child:before,
#person.crosstalk #contents .talkList.block04 .list li:first-child:after { display: none;}
#person.crosstalk #contents .talkList.block04 .phArea { margin: 50px auto 0 auto;}
}
@media screen and (min-width: 751px) {
}
@media screen and (max-width: 750px) {
#person.crosstalk #contents .mainTitArea { background: url("../img/person/crosstalk_mv_sp.jpg") center center no-repeat; background-size: cover;}
#person.crosstalk #contents .mainTitArea { padding: 200px 0;}
#person.crosstalk #contents .memberBox .tit { padding-top: 60px; font-size: 30px;}
#person.crosstalk #contents .memberBox .tit span:before { margin-right: 5px; width: 25px; height: 22px; background: url("../img/person/crosstalk_icon.png") no-repeat; background-size: 100% auto;}
#person.crosstalk #contents .memberBox .txt { margin-top: 10px; font-size: 14px;}
#person.crosstalk #contents .memberBox .list li .post { font-size: 8px;}
#person.crosstalk #contents .memberBox .list li .join { font-size: 7px;}
#person.crosstalk #contents .memberBox .list li .name { font-size: 18px;}
#person.crosstalk #contents .talkList.block02 .phArea img { margin-top: 1vw;}
#person.crosstalk #contents .talkList.block02 .phArea img.mt { margin: 1vw 0 0 0;}
#person.crosstalk #contents .talkList .subtit { margin-top: 50px; font-size: 14px;}
}
@media screen and (max-width: 650px) {
#person.crosstalk #contents .talkList.block01 .list { background: url("../img/person/crosstalkBg.png") center center no-repeat; background-size: 50vw 50vw;}
#person.crosstalk #contents .talkList.block03:before { width: 60vw; height: 60vw; top: 20px; left: calc( 50% + 3vw);}
#person.crosstalk #contents .talkList.block03:after { width: 100vw; height: 100vw; bottom: -150px; right: calc( 50% - 27vw);}
}

/* person slider*/
#person #contents .personLinkSlider { margin-top: 100px; padding: 100px 0 40px 0; position: relative;}
#person #contents .personLinkSlider:before { height: 450px; width: 100%; content: ""; background: linear-gradient(to bottom right, #2e4fb5, #098fcf); position: absolute; left: 0; top: 0;}
#person #contents .personLinkSlider .inner { position: relative; z-index: 1;}
#person #contents .personLinkSlider .topTxtArea { color: #fff;}
#person #contents .personLinkSlider .topTxtArea .tit {}
#person #contents .personLinkSlider .topTxtArea .tit .en { font-size: 60px; font-weight: 600; line-height: 1;}
#person #contents .personLinkSlider .topTxtArea .tit .jp { font-size: 28px; font-weight: 600; line-height: 1; margin-top: 15px;}
#person #contents .personLinkSlider .topTxtArea .txt { margin-top: 20px; line-height: 2;}
#person #contents .personLinkSlider .swiper-wrapper { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 60px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide {}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a {}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea { height: 465px; position: relative; color: #fff; overflow: hidden;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0; opacity: 0; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .post { bottom: 90px; left: 30px; position: absolute; z-index: 5;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .name { bottom: 30px; left: 30px; font-size: 56px; font-family: "Jost", sans-serif; position: absolute; z-index: 5; line-height: 1;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .join { bottom: 35px; left: 130px; font-size: 14px; position: absolute; z-index: 5;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .arr { width: 80px; height: 80px; right: 30px; bottom: 30px; position: absolute; z-index: 5;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .circle.arr:before { width: 18px; height: 10px; background-size: 18px 10px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .img {}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .txtArea { margin-top: 30px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .txtArea .tag { padding: 2px 10px; background: #2e4fb5; color: #fff; display: inline-block; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s; font-weight: 600;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .txtArea .txt { color: #2e4fb5; margin-top: 10px; font-size: 24px; display: block; -webkit-transition:0.8s; -moz-transition:0.8s; -ms-transition:0.8s; -o-transition:0.8s; transition:0.8s; font-weight: 600;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a:hover { opacity: 1;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a:hover .phArea:before { opacity: 0.8; background-image: linear-gradient(-45deg, #2e4fb5, #098fcf);}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a:hover .phArea .img img { transform: scale(1.1);}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a:hover .txtArea .tag { background: #2e4fb5; color: #fff;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a:hover .txtArea .txt { color: #2e4fb5;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide.item01 a {}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide.item01 a .phArea .join { left: 160px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide.item02 a {}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide.item03 a {}

@media screen and (max-width: 1330px) {
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea { height: 36.5vw;}
}
@media screen and (min-width: 1201px) {
#person #contents .personLinkSlider .topTxtArea { display: flex;}
#person #contents .personLinkSlider .topTxtArea .txt { margin-left: 200px;}
}
@media screen and (max-width: 1200px) {
#person #contents .personLinkSlider .swiper-wrapper { column-gap: 30px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .post { bottom: 70px; left: 20px; font-size: 14px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .name { bottom: 20px; left: 20px; font-size: 46px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .join { bottom: 25px; left: 105px; font-size: 12px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .arr { width: 70px; height: 70px; right: 20px; bottom: 20px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .txtArea { margin-top: 20px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide.item01 a .phArea .join { left: 130px;}
}
@media screen and (max-width: 900px) {
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .name { left: 15px; font-size: 36px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .arr { width: 50px; height: 50px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .join { bottom: 22px; left: 80px; font-size: 11px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .circle.arr:before{ width: 11px; height: 6px; background-size: 11px 6px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .txtArea .tag { font-size: 14px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .txtArea .txt { font-size: 20px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide.item01 a .phArea .join { left: 100px;}
}
@media screen and (min-width: 751px) {
}
@media screen and (max-width: 750px) {
#person #contents .personLinkSlider { margin-top: 50px; padding: 50px 0 20px 0;}
#person #contents .personLinkSlider .inner { width: 100%;}
#person #contents .personLinkSlider .topTxtArea { width: 90.66%; margin-left: auto; margin-right: auto;}
#person #contents .personLinkSlider .topTxtArea .tit { text-align: center;}
#person #contents .personLinkSlider .topTxtArea .tit .en { font-size: 30px;}
#person #contents .personLinkSlider .topTxtArea .tit .jp { font-size: 14px;}
#person #contents .personLinkSlider .topTxtArea .txt { font-size: 12px; margin-top: 30px;}
#person #contents .personLinkSlider .swiper-wrapper { margin-top: 20px; column-gap: 0;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide { padding-left: 20px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide:nth-last-child(1) { padding-right: 20px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a { position: relative;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea { height: 58.5vw;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .post { left: 10px; bottom: 40px; font-size: 10px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .name { left: 10px; bottom: 10px; font-size: 30px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .join { left: 70px; bottom: 15px; font-size: 8px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .phArea .arr { right: 10px; bottom: 10px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .txtArea { margin-top: 10px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .txtArea .tag { font-size: 8px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide a .txtArea .txt { font-size: 12px;}
#person #contents .personLinkSlider .swiper-wrapper .swiper-slide.item01 a .phArea .join { left: 90px;}
}