@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
.jost {
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
main {
	background: url("../img/common/bg_main_child.png") repeat;
}
.mv {
	ask-image: url(../img/career/main_mask.png);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-image: url(../img/career/main_mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
}
@media screen and (max-width: 800px) {
    .mv {
        ask-image: url(../img/career/main_mask_sp.png);
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
        -webkit-mask-image: url(../img/career/main_mask_sp.png);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
    }
}
.mv img {
	min-height: 535px;
	object-fit: cover;
}
.mvWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-35%);
}
.h2 {
	font-size: 48px;
	line-height: 1.4;
	color: #05ab1e;
}
.h2 small {
	font-size: 16px;
	color: #05350a;
	display: block;
}
.navHead {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 25px;
}
.navHead a {
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px 7px 15px;
  width: 200px;
  background-color: #fff;
  border: 1px solid #05350a;
  border-radius: 100px;
}
.navHead a:hover {
  background-color: #05ab1e;
  color: #fff;
  border: 1px solid #05ab1e;
}
.navHead .arw figure {
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 800px) {
	.mv img {
        min-height: auto;
    }
	.mvChild img {
        min-height: auto;
    }
    .h2 {
        font-size: calc(100vw * 48 / 800);
    }
	.h2 small {
		font-size: calc(100vw * 16 / 800);
    }
	.navHead {
		width: 100%;
		flex-flow: wrap;
        gap: 10px;
        margin-top: 25px;
    }
	.navHead li {
      width: 48%;
    }
	.navHead a {
      width: 100%;
    }
}
@media screen and (max-width: 500px) {
    .h2 {
        font-size: calc(100vw * 26 / 400);
    }
	.h2 small {
        font-size: calc(100vw * 13 / 400);
    }
	.navHead {
		width: 100%;
		flex-flow: wrap;
        gap: 10px;
        margin-top: 6vw;
    }
    .navHead a {
      font-size: calc(100vw * 12.75 / 400);
      padding: 7px 10px 7px 15px;
    }
    .navHead .arw figure {
      width: 4.25vw;
      height: 4.25vw;
    }
}
.illust1 {
	position: absolute;
	left: 0;
	bottom: -30px;
	width: 265px;
}
.illust2 {
	position: absolute;
	right: 0;
	bottom: -30px;
	width: 335px;
}
@media screen and (max-width: 800px) {
	.illust1 {
        width: 25.625vw;
    }
    .illust2 {
        width: 31.75vw;
    }
}
@media screen and (max-width: 500px) {
	.illust1 {
		bottom: -7.5vw;
        width: 26.5vw;
    }
    .illust2 {
		bottom: -7.5vw;
        width: 33.5vw;
    }
}
/*.catchWrap {
	padding: 100px 0 100px;
}*/
.h3catch {
	font-size: 38px;
	line-height: 1.4;
	color: #05ab1e;
}
.h3catch small {
	font-size: 16px;
	color: #05350a;
	display: block;
}
.catchTxt {
	font-size: 16px;
}
@media screen and (max-width: 800px) {
	.h3catch {
		font-size: calc(100vw * 38 / 800);
    }
	.h3catch small {
		font-size: calc(100vw * 16 / 800);
    }
}
@media screen and (max-width: 500px) {
	/*.catchWrap {
          padding: 15vw 0 15vw;
     }*/
	.h3catch {
		font-size: calc(100vw * 24 / 400);
    }
	.h3catch small {
		font-size: 11px;
    }
    .catchTxt {
        font-size: 14px;
    }
}
.careerWrapFast {
	padding: 100px 0 150px;
}
@media screen and (max-width: 500px) {
    .careerWrapFast {
        padding: 12.5vw 0 12.5vw;
    }
}
.imgCareer {
	width: 90%;
	max-width: 1200px;
	margin: auto;
}
@media screen and (max-width: 800px) {
    .imgCareer {
		width: 100%;
        padding: 0 5% 20px;
        overflow-x: scroll;
	}
	.imgCarrer {
		width: 1080px;
	}
    .imgCareer::-webkit-scrollbar{
        height: 12px;
     }
    .imgCareer::-webkit-scrollbar-track {
        background-color: #fff;
        border-radius: 8px;
        margin: 0 5vw;
    }
    .imgCareer::-webkit-scrollbar-thumb {
        background-color: #05ab1e;
        border-radius: 8px;
        border: 2px solid #fff;
    }
}
@media screen and (max-width: 800px) {
    .icoScloll {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 200px;
        opacity: 0;
    }
}
.careerBtm {
	padding: 60px 0 100px;
}
.careertxt {
	font-size: 18px;
	line-height: 1.4;
}
.btnCareer {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 40px auto 0;
	position: relative;
}
.btnCareer a {
	width: 340px;
	margin: auto;
	background-color: #fff;
	color: #05350a;
	/*display: block;*/
	padding: 15px 15px 15px 30px;;
	border-radius: 50px;
	border: 1px solid #05350a;
	font-size: 18px;
	transition: all .3s;
	display: flex;
	justify-content: space-between;
}
.btnCareer a .arw {
	width: 30px;
	height: 30px;
	/*position: absolute;
	top: 50%;
	right: 17px;
	transform: translateY(-50%);*/
}
@media screen and (max-width: 1200px) {
    .btnCareer {
        flex-flow: wrap;
    }
}
@media screen and (max-width: 1200px) {
    .btnCareer {
        flex-flow: wrap;
    }
}
@media screen and (max-width: 500px) {
    .btnCareer {
        width: 100%;
		gap: 5vw;
        margin: 8vw auto 0;
    }
    .btnCareer li {
        width: 100%;
    }
    .btnCareer a {
        width: 100%;
    }
}







































.peopleWrap {
	padding: 100px 0 140px;
}
@media screen and (max-width: 500px) {
    .peopleWrap {
        padding: 18.5vw 0 25vw;
    }
}
.peopleTop {
	display: flex;
}
.peopleTopCont {
	width: 50%;
}
.peopleTopCont.left {
	padding-right: 5%;
}
.peopleTopCont.right {
	padding-left: 5%;
	border-left: 1px solid #05350a;
}
.h4people {
	font-size: 28px;
	color: #fff;
	position: relative;
	background-color: #05ab1e;
	border-radius: 100px;
	padding-left: 5vw;
}
.h4people::before {
	content: 'Q.';
	font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
	font-weight: 700;
	font-size: 44px;
	color: #fff;
	-webkit-text-stroke: 20px #05ab1e;
    text-stroke: 20px #05ab1e;
    paint-order: stroke;
    stroke-linejoin: round;
	position: absolute;
	top: -20px;
	left: 20px;
}
.peopleWrap1 {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-top: 20px;
}
.imgPeople1 {
	width: 51%;
}
.people1Right {
	width: 46%;
}
.people1title {
	font-size: 16px;
}
.people1txt {
	display: flex;
	justify-content: space-between;
	font-size: 20px;
}
.people1txt {
	display: flex;
	justify-content: space-between;
	font-size: 20px;
}
.people1txt.people1-1st {
	font-size: 28px;
	color: #05ab1e;
	padding: 15px 0 15px;
}
.people1txt.people1-2nd {
	padding: 20px 0;
	border-top: 1px solid #05ab1e;
	border-bottom: 1px solid #05ab1e;
}
.people1txt.people1-3rd {
	padding: 15px 0 15px;
}
@media screen and (max-width: 1100px) {
    .peopleTop {
        flex-direction: column;
		gap: 10vw;
    }
    .peopleTopCont {
        width: 75%;
        margin: auto;
    }
    .peopleTopCont.left {
        padding-right: 0;
    }
    .peopleTopCont.right {
        padding-left: 0;
        border-left: none;
    }
}
@media screen and (max-width: 800px) {
    .peopleTopCont {
        width: 100%;
    }
	.h4people {
        font-size: calc(100vw * 28 / 800);
    }
    .h4people::before {
        font-size: calc(100vw * 44 / 800);
    }
    .peopleWrap1 {
		flex-direction: column;
        padding-top: 20px;
    }
    .imgPeople1 {
        width: 77%;
		margin: auto;
    }
    .people1Right {
        width: 77%;
		margin: auto;
    }
}
@media screen and (max-width: 500px) {
    .peopleTop {
		gap: 13vw;
    }
	.h4people {
        font-size: calc(100vw * 22 / 400);
		padding-left: 9vw;
    }
    .h4people::before {
        font-size: calc(100vw * 34 / 400);
		left: 3vw;
		top: -4vw;
        -webkit-text-stroke: 15px #05ab1e;
        text-stroke: 15px #05ab1e;
    }
    .peopleWrap1 {
		gap: 3vw;
    }
    .people1txt.people1-1st {
        padding: 2vw 0 2vw;
    }
    .people1txt.people1-2nd {
        padding: 2vw 0;
    }
    .people1txt.people1-3rd {
        padding: 2vw 0 0;
    }
}
.peopleMid {
	background-color: #fff;
	border: 1px solid #05350a;
	border-radius: 60px;
	padding: 50px 60px;
	margin: 50px 0;
}
.peopleMid .h4people {
	width: 540px;
	padding-left: 4vw;
}
.peopleWrap2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0 50px;
}
.peopleWrap2.last {
	padding-bottom: 0;
}
.people2txt {
	display: flex;
	justify-content: center;
	gap: 18%;
	width: 26%;
	border-bottom: 1px solid #05ab1e;
	font-size: 24px;
}
.people2txt.people2-1st {
	width: 40%;
	gap: 13%;
	border: 2px solid #05350a;
	font-size: 28px;
	background-color: #fcee21;
	border-radius: 100px;
	padding: 5px 0;
	box-shadow: 2px 8px 0 rgba(5,53,10,.2);
}
@media screen and (max-width: 1100px) {
    .peopleMid .h4people {
        width: 75%;
        margin: auto;
    }
    .peopleWrap2 {
        flex-direction: column;
        gap: 30px;
        padding: 25px 0 70px;
    }
    .people2txt {
        justify-content: space-between;
        gap: 0;
        width: 55%;
        margin: auto;
    }
    .people2txt.people2-1st {
        width: 75%;
        gap: 0;
        padding: 5px 10%;
    }
}
@media screen and (max-width: 800px) {
    .peopleMid .h4people {
        width: 100%;
    }
    .people2txt {
        width: 80%;
		font-size: calc(100vw * 24 / 800);
    }
    .people2txt.people2-1st {
        width: 100%;
		font-size: calc(100vw * 28 / 800);
    }
}
@media screen and (max-width: 500px) {
    .peopleMid .h4people {
        padding-left: 12vw;
    }
    .peopleMid {
        border-radius: 11vw;
        padding: 11vw 5vw;
    }
    .peopleWrap2 {
        gap: 3vw;
        padding: 5vw 0 14vw;
    }
    .people2txt {
        width: 85%;
		font-size: calc(100vw * 24 / 400);
    }
    .people2txt.people2-1st {
		font-size: calc(100vw * 28 / 400);
        padding: 5px 7.5%;
    }
}
.icoPeople1,.icoPeople2,.icoPeople3 {
	position: absolute;
}
.icoPeople1 {
	width: 100px;
	right: -35px;
	top: 10px;
}
.icoPeople2 {
	width: 56px;
	right: 5px;
	top: 105px;
}
.icoPeople3 {
	width: 45px;
	left: -10px;
	bottom: 12px;
}
@media screen and (max-width: 500px) {
    .icoPeople1 {
        width: 25vw;
        right: -2vw;
        top: -6.5vw;
    }
    .icoPeople2 {
        width: 14vw;
        right: auto;
        left: 3.5vw;
        top: -4vw;
    }
    .icoPeople3 {
        width: 11vw;
        left: 3.5vw;
        bottom: -2.5vw;
    }
}
.peopleBtm {
	display: flex;
	justify-content: space-between;
}
.peopleBtmCont {
	width: 31.666667%;
}
@media screen and (max-width: 1300px) {
    .peopleBtm {
        justify-content: center;
		flex-flow: wrap;
		gap: 10rem 10%;
    }
    .peopleBtmCont {
        width: 45%;
    }
}
@media screen and (max-width: 1100px) {
    .peopleBtm {
		flex-direction: column;
    }
    .peopleBtmCont {
        width: 75%;
		margin: auto;
    }
}
@media screen and (max-width: 800px) {
    .peopleBtmCont {
        width: 100%;
    }
}
@media screen and (max-width: 500px) {
    .peopleBtm {
		gap: 17.5vw;
    }
}
.peopleWrap3 {
	display: flex;
	justify-content: center;
	padding-top: 40px;
}
.people3txt {
	font-size: 110px;
	line-height: 1.2;
	text-align: center;
}
.people3txt small {
	font-size: 34px;
	display: block;
}
.people3txt.first {
	padding-right: 40px;
}
@media screen and (max-width: 1100px) {
    .peopleWrap3 {
        padding-top: 15px;
    }
}
@media screen and (max-width: 500px) {
    .people3txt {
		font-size: calc(100vw * 110 / 400);
    }
    .people3txt small {
		font-size: calc(100vw * 34 / 400);
    }
    .people3txt.first {
        padding-right: 10vw;
    }
}
.peopleWrap4 {
	display: flex;
	justify-content: center;
	gap: 45px;
	padding-top: 30px;
}
.imgPeople3 {
	width: 92px;
}
.people4Right {
	width: 44.736842%;
}
.people4txt {
	display: flex;
	justify-content: space-between;
	font-size: 20px;
	padding: 5px 0;
	border-bottom: 1px solid #05ab1e;
}
.people4txt.people4-1st {
	font-size: 28px;
	padding: 0 0 5px;
}
.people4txt.people4-4th {
	padding: 5px 0 0;
	border-bottom: none;
}
@media screen and (max-width: 500px) {
    .peopleWrap4 {
        gap: 11vw;
    }
    .imgPeople3 {
        width: 23vw;
    }
    .people4txt {
        font-size: calc(100vw * 20 / 400);
    }
    .people4txt.people4-1st {
        font-size: calc(100vw * 28 / 400);
    }
}
.peopleWrap5 {
	flex-direction: row-reverse;
	gap: 15px;
}
.imgPeople4 {
	width: 120px;
}
.peopleWrap5 .people4Right {
	width: 52.631579%;
}
@media screen and (max-width: 500px) {
    .peopleWrap5 {
        gap: 4vw;
	}
    .imgPeople4 {
        width: 30vw;
    }
}
.realityWrap {
	padding-bottom: 180px;
}
.realityWrap .peopleTop {
	gap: 0;
}
.reality1 {
	max-width: 1120px;
	margin: 35px auto 60px;
}
@media screen and (max-width: 800px) {
	.reality1 {
        max-width: 75%;
    }
}
@media screen and (max-width: 500px) {
    .realityWrap {
        padding-bottom: 24vw;
    }
    .reality1 {
        margin: 5vw auto 13vw;
        max-width: 100%;
    }
}
.realityQ2 {
	background-color: #fff;
    border: 1px solid #05350a;
    border-radius: 60px;
    padding: 50px;
	margin: 35px 0 60px;
	display: flex;
}
@media screen and (max-width: 800px) {
    .realityQ2 {
        flex-direction: column;
    }
}
@media screen and (max-width: 500px) {
    .realityQ2 {
        border-radius: 11vw;
		padding: 7.5vw 4vw;
        margin: 5vw auto 13vw;
    }
}
.realityWrap .people1txt {
	justify-content: center;
	text-align: center;
	font-size: 20px;
	color: #05350a;
	line-height: 1.4;
}
@media screen and (max-width: 500px) {
    .realityWrap .people1txt {
        font-size: calc(100vw * 20 / 400);
	}
}
.peopleWrap6 {
	display: flex;
	flex-direction: column;
}
.peopleWrap6top {
	border-bottom: 1px solid #05ab1e;
	display: flex;
	justify-content: center;
	gap: 30px;
	padding: 30px 0;
}
.people6txt1 {
	font-size: 34px;
	line-height: 1.3;
}
.people6txt2 {
	font-size: 84px;
	line-height: 1.0;
}
.people6txt2 small {
	font-size: 71.5%;
}
@media screen and (max-width: 1100px) {
	.realityWrap .peopleTopCont.right {
		margin-top: 10vw;
	}
}
@media screen and (max-width: 500px) {
	.realityWrap .peopleTopCont.right {
		margin-top: 13vw;
	}
    .peopleWrap6top {
        flex-direction: column;
        gap: 2vw;
        padding: 4vw 0;
		align-items: center;
    }
    .people6txt1 {
		font-size: calc(100vw * 34 / 400);
    }
    .people6txt2 {
		font-size: calc(100vw * 84 / 400);
    }
    .people6txt1 br {
        display: none;
    }
}
.peopleWrap6btm {
	display: flex;
}
.peopleWrap6btm dl {
	width: 50%;
	text-align: center;
	padding: 30px 0 15px;
}
.peopleWrap6btm dl.right {
	border-left: 1px solid #05ab1e;
}
.peopleWrap6btm dl dt {
	font-size: 28px;
}
.peopleWrap6btm dl dd {
	font-size: 52px;
	line-height: 1;
}
.peopleWrap6btm dl dd small {
	font-size: 71%;
}
@media screen and (max-width: 500px) {
    .peopleWrap6btm {
        flex-direction: column;
    }
    .peopleWrap6btm dl {
        width: 100%;
        padding: 6vw 0;
		display: flex;
		justify-content: space-between;
    }
    .peopleWrap6btm dl.right {
        border-left: none;
        border-top: 1px solid #05ab1e;
        padding: 6vw 0 0;
    }
    .peopleWrap6btm dl dt {
		font-size: calc(100vw * 28 / 400);
    }
    .peopleWrap6btm dl dd {
		font-size: calc(100vw * 52 / 400);
    }
}
.peopleTopQ5 {
	padding-top: 60px;
}
@media screen and (max-width: 500px) {
    .peopleTopQ5 {
        padding-top: 13vw;
    }
}
.realityQ5 {
	display: flex;
	justify-content: center;
	padding: 30px 0 0;
}
.imgRealityQ5 {
	width: calc(100% / 3);
}
.reality6 {
	margin: 0 -8.5%;
}
@media screen and (max-width: 800px) {
	.realityQ5 {
		flex-direction: column;
    }
    .imgRealityQ5 {
        width: 75%;
		margin: auto;
    }
    .reality6 {
        margin: 0;
    }
}
@media screen and (max-width: 500px) {
	.realityQ5 {
		padding: 4vw 0 0;
    }
    .imgRealityQ5 {
        width: 100%;
    }
}