@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap'); */

/* /wp-content/themes/uhuru_careers_2023/career/css/career2023.css */
/* url(./../img/career2023/ */

/* ================================================================ */

:root {
  --green :#91B122;
  --blue : #2EA5E5;
  --lightblue: #E6F3F9;
  --white: #fff;
  --lightgray: #FAFAFA;
  --black: #000;

  --font72: 72px;
  --font45: 45px;
  --font36: 36px;
  --font32: 32px;
  --font24: 24px;
  --font20: 20px;
  --font16: 16px;
  --font14: 14px;

  --radiusLg: 31px;
  --radius: 24px;
  --radiusSm: 16px;

  --mainwidth: 1300px; /* max1440pxに対して内側1262px*/
}

@media (max-width: 978px) {
  :root {

    --font72: 48px;
    --font45: 24px;
    --font36: 24px;
    --font32: 24px;
    --font24: 20px;
    --font20: 16px;
    --font16: 16px;
  }
}

/* ==============================================================
  careerContents
================================================================ */

a {transition: .3s;}
a:hover {transition: .3s;}

.size45 {font-size: var(--font45);} 
.size36 {font-size: var(--font36);} 
.size32 {font-size: var(--font32);} 
.size24 {font-size: var(--font24);} 
.size20 {font-size: var(--font20);} 
.size16 {font-size: var(--font16);} 


.inner {
  /* width: 78%; */
  width: calc(100% - 40px);
/*   max-width: var(--mainwidth); */
  max-width: 1260px;
  margin: 0 auto;
}
@media (max-width: 978px) {
  .inner {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
  }
}


/*  */

nav {
	width: auto !important;
	color: #fff;
	font-weight: bold;
}
/* グロナビ　レスポンシブ調整 */
@media (min-width: 768px) and (max-width: 978px) {
	nav {
		top: 20px;
		right: 180px;
		line-height: 1.5;
	}
	nav ul li {
		font-size: 12px;
	    margin-left: 1.5vw;
	}
}

.s_on nav {
	color: #000;
}
nav ul li.on_r::after,
nav ul li.on_l::after{
	background-color: #fff;
}
.s_on nav ul li.on_r::after,
.s_on nav ul li.on_l::after{
	background-color: #222;
}
#gheader p.logo {
	top: 33px;
}
@media (max-width: 978px) {
	.s_on nav {
  	color: #fff;
	}
	#gheader .entry_btn {
		right: 88px;
	}
    #gheader .entry_btn,
    #gheader .entry_btn a,
	#gheader .entry_btn-newGraduate,
	#gheader .entry_btn-newGraduate a {
		height: 60px;
		font-size: 11px;
  }
    #gheader .entry_btn,
    #gheader .entry_btn a {
    	width: 76px;
	}
	#gheader .entry_btn-newGraduate,
	#gheader .entry_btn-newGraduate a {
		min-width: 88px;
    	width: 88px;
	}
  /*   #gheader .entry_btn-newGraduate,
  #gheader .entry_btn-newGraduate a {
    width: 88px;
	height: 60px;
	font-size: 1.4rem;
  } */
  #gheader p.logo {
	display: none !important;
	top: 16px;
  }
}


/*  */


.button {
  width: 312px;
  height: 60px;
}
.button a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  background-color: var(--green);
  font-size: var(--font16);
  font-weight: bold;
  border-radius: var(--radiusLg);
  padding: 20px 0;
  border: 2px solid var(--white);
  letter-spacing: 1px;
  transition: .3s;
}
.button.button_white a {
  color: var(--green);
  background-color: var(--white);
  border: 2px solid var(--green);
}
.button svg {
  width: 20px;
  height: 20px;
  margin: 0 8px 0 0;
}
.button path {
  stroke: var(--white);
  transition: .3s;
}
.button span {
	line-height: 20px;
}
.button a:hover {
  background-color: #84A317;
}
.button.button_white a:hover {
  color: var(--white);
  background-color: var(--green);
  border: 2px solid var(--white);
}
.button.button_white path {
  stroke: var(--green);
  transition: .3s;
}
.button a:hover path {
}
.button.button_white a:hover path {
  stroke: var(--white);
  transition: .3s;
}
@media (max-width: 978px) {
  .button {
    width: calc(100% - 20px);
    max-width: 260px;
    height: 48px;
  }
  .button a {
    font-size: 14px;
    padding: 12px 0;
  }
}
/*  */

.arrowIcon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lightblue);
  border-radius: 50%;
  transition: .3s;
}
.arrowIcon svg {
  width: 38%;
  transform-origin: 0%;
}
.arrowIcon path {
  stroke: var(--blue);
}
a:hover .arrowIcon {
  transform: translateX(4px);
  transition: .3s;
}
@media (max-width: 978px) {
  .arrowIcon {
    width: 32px;
    height: 32px;
  }

}

/*  */

.anchor {
	position: absolute;
	top: -64px;
}

/*  */

._sp {
  display: none;
}
._pc {
  display: block;
}
@media (max-width: 978px) {
  ._sp {
    display: block;
  }
  ._pc {
    display: none;
  }
}

/*  */


/* ==============================================================
演出用
================================================================ */


@keyframes careerlist_on {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

 @keyframes careerlist_off {
  0% {
  }
  100% {
    transform: translateX(0);
  }
}


.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: .8s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 0.8s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);
  opacity: 1;
  }
}

/*  */

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
  
  @keyframes fadeUpAnime {
    from {
      opacity: 0;
      transform: translateY(100px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* ==============================================================
ファーストビュー
================================================================ */

#first_view {
  position: relative;
  display: flex;
  height: 76vh !important;
  align-items: center;
  color: var(--white);
}


#first_view #first_bg {
  display: block !important;
  height: 76vh;
  min-height: 618px;
/*   background:  url(./../img/career2023/mv.jpg) 50% 50%/cover no-repeat; */
  background:  url(/wp-content/uploads/2023/09/mv-scaled.jpg) 50% 50%/cover no-repeat;
  transform-origin: center center;
  transform: scale(1.1) !important;
}
#first_view #first_bg.fadeInBg {
  transform: scale(1.0) !important;
  transition: 6s ease-out;
}
@media (max-width: 978px) {
  #first_view #first_bg {
    background: url(/wp-content/uploads/2023/09/mv_sp.jpg) 50% 50%/cover no-repeat;
/*     background: url(./../img/career2023/mv_sp.jpg) 50% 50%/cover no-repeat; */
  }
}

.firstView_title {
  position: relative;
  width: 100%;
  z-index: 1;
}
.firstView_title .titleEn {
  font-size: var(--font72);
  line-height: 1;
}
.firstView_title .titleJp {
  font-size: var(--font24);
  letter-spacing: 16px;
  margin: 10px auto 0;
}
.firstView_title .copytext span {
  display: block;
  line-height: 1.5;
  font-size: var(--font36);
  letter-spacing: 16px;
}
.firstView_title .copytext span:first-child {
  margin: 24px auto 0;
}
.firstView_title .copytext span:last-child {
  margin: 0 auto 48px;
}
.buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 24px auto 0;
}
.copytext {
	min-height: 110px;
}
.copy {
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  color: var(--white);
  font-size: 10px;
  z-index: 1;
}
@media (max-width: 978px) {
  .firstView_title .copytext span {
    font-size: 20px;
    margin: 24px auto 32px;
    letter-spacing: 4px;
  }
  .firstView_title .titleJp {
    letter-spacing: 12px;
    margin: 8px auto 0;
    font-size: 16px;
  }
  .firstView_title .titleEn {
    margin-top: 32px;
  }
  .buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
	.copytext {
	min-height: 60px;
	}
}


/* ==============================================================
  新卒採用情報
================================================================ */


.ngEntry {
  margin: 100px auto 0;
}
.ngEntry .flexbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius);
  background-color: var(--lightgray);
  text-align: left;
  margin: 48px auto 0;
  padding: 72px 90px 80px;
}
@media (max-width: 978px) {
  .ngEntry {
    margin: 56px auto 0;
  }
  .ngEntry .flexbox {
    flex-direction: column;
    margin: 24px auto 0;
    padding: 40px 24px;
  }
}

/*  */

.ngEntry .flexheader {
  width: 25%;
}
.ngEntry .flexheader h3 {
  color: var(--black);
  font-size: var(--font24);
  font-weight: bold;
}
.ngEntry .flexheader strong {
  color: var(--blue);
  font-size: var(--font16);
}
.ngEntry .flexheader p {
  font-size: var(--font16);
  margin: 16px 0 0;
  line-height: 1.8;
}

/*  */

.ngEntry .flexbody {
  width: calc(75% - 56px);
}
.ngEntry .flexbody a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flexbody li {
  position: relative;
/*   border-bottom: 1px solid #D9D9D9; */
}
.ngEntry li .infoHeader {
  display: flex;
  flex-direction: column;
  width: calc(100% - 42px - 24px);
  padding: 24px 0;
}
.ngEntry li .infoHeader p {
  position: relative;
  width: fit-content;
  overflow: hidden;
}
.ngEntry li .infoHeader p:before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #222;
  transform-origin: center right;
  transform: translateX(-100%);
  animation: careerlist_on .3s forwards;
  transition: .3s;
}
.ngEntry li:hover .infoHeader p:before {
  animation: careerlist_off .3s forwards;
  transition: .3s;
}
.ngEntry li:first-child .infoHeader {
  width: calc(100% - 42px - 24px);
/*   padding: 0 0 24px 0; */
	padding: 0;
}
.ngEntry li .infoHeader strong {
  font-size: var(--font20);
}
.ngEntry li .infoHeader p {
  display: inline-block;
  font-size: var(--font14);
  margin: 16px 0 0;
  line-height: 1.8;
}
/*  */

@media (max-width: 978px) {
  .ngEntry .flexheader {
    width: 100%;
  }
  .ngEntry .flexbody {
    width: 100%;
    margin: 56px 0 0;
  }
  .ngEntry .flexheader h3 {
    margin: 8px 0 0;
  }
  .ngEntry .flexheader p {
    margin: 8px 0 0;
}
.ngEntry li:first-child .infoHeader {
  width: calc(100% - 32px - 16px);
}
.ngEntry li .infoHeader {
  display: flex;
  flex-direction: column;
}
  .ngEntry li .infoHeader p {
    margin: 16px 0 0;
  }
}

.ngEntry li .infoHeader .arrowIcon {
  position: absolute;
  right: 0;
  top: calc(50% - 21px);
  transform: translateX(0);
  transition: .2s;
}
.ngEntry li:hover .infoHeader .arrowIcon {
  transform: translateX(4px);
  transition: .2s;
}

/* ==============================================================
  キャリア人材
================================================================ */


.midCareer {
  margin: 100px auto 0;
}
@media (max-width: 978px) {
  .midCareer {
    margin: 72px auto 0;
  }
}


.midCareer .midCareerLists {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: inherit;
  justify-content: flex-start;
  margin: 48px auto 0;
}
.midCareer .midCareerLists > li {
  position: relative;
  width: calc((100% - 32px)/3);
  text-align: left;
  padding: 0 40px 40px 40px;
  box-sizing: border-box;
  line-height: 1;
  z-index: 0;
}
.midCareer .midCareerLists > li::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: calc(100% - 36px);
  background-color: var(--lightgray);
  border-radius: 16px;
  z-index: -1;
}
.midCareer .midCareerLists > li:nth-child(3n + 1) {
  margin: 0;
}
.midCareer .midCareerLists > li strong {
  display: inline-block;
  color: var(--blue);
  font-size: var(--font16);
  margin: 24px 0 0;
}
.midCareer .midCareerLists h3 {
  font-size: var(--font20);
  font-weight: bold;
  margin: 8px 0 0;
}
@media (max-width: 978px) {
  .midCareer .midCareerLists {
    flex-direction: column;
    gap: 0;
    margin: 24px auto 0;
  }
  .midCareer .midCareerLists > li {
    width: 100%;
    padding: 0 24px 32px 24px;
  }
  .midCareer .midCareerLists > li + li,
  .midCareer .midCareerLists > li:nth-child(3n + 1) {
    margin: 32px 0 0;
  }
  .midCareer .midCareerLists > li:first-child {
    margin: 0;
  }
  .midCareer .midCareerLists > li::before {
    height: calc(100% - 32px);
  }
  .midCareerLists img {
    width: 64px;
    height: 64px;
  }
} 
/*  */

.midCareerList  {
  margin: 24px 0 0;
}
.midCareerList li {
  position: relative;
  font-size: var(--font14);
  line-height: 1.8;
  padding: 0 0 0 16px;
}
.midCareerList li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  transform: rotateZ(-45deg);
}
.midCareerList li a {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.midCareerList li a:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #222;
  transform-origin: center right;
  transform: translateX(-100%);
  animation: careerlist_on .3s forwards;
  transition: .3s;
}
.midCareerList li:hover a:after {
  animation: careerlist_off .3s forwards;
  transition: .3s;
}
.midCareerList li + li {
  margin: 4px 0 0;
}
@media (max-width: 978px) {
  .midCareerList li:before {
    top: 6px;
  }
}

/* 
 */

@media (max-width: 978px) {
  .midCareerList li {
    line-height: 1.5;
  }
  .midCareerList + .midCareerList {
    margin: 
  }
}

/* ==============================================================
  資料ダウンロード
================================================================ */

.documentDl {
	position: relative;
	width: calc(100% - 48px);
	margin: 100px auto 0;
	background: #000 url(./../img/career2023/photo_office01.png) 50% 50% no-repeat;
    background-size: cover;
    border-radius: 24px;
    max-width: 1360px;
}
@media (max-width: 978px) {
  .documentDl {
    width: 100%;
    margin: 72px auto 0;
  }
}

/* .documentDl .photo {
  position: relative;
  width: 100%;
  height: 29vw;
  max-height: 426px;
  background:  url(./../img/career2023/photo_office01.png) 50% 50% /120% no-repeat;
  overflow: hidden;
}

@media (max-width: 978px) {
  .documentDl .photo {
    height: 60vw;
    background:  url(/wp-content/uploads/2023/09/photo_office01_sp.jpg) 50% 50% /150% no-repeat;
	opacity: 0.75;
	}
} */

/*  */

.documentDl .flexbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 96px 0 78px;
}
.documentDl .flexheader {
  color: var(--white);
  font-size: var(--font45);
  text-align: left;
  margin: 0 auto 0 100px;
}
.documentDl .flexheader h3 {
  font-weight: bold;
  line-height: 1.5;
}
.documentDl .flexheader p {
  font-size: var(--font16);
  font-weight: bold;
  margin: 24px 0 0;
  line-height: 1.8;
}
.documentDl .button { 
  margin: 40px 0 0;
}
.documentDlCard {
  width: 39vw;
  max-width: 580px;
  height: 22vw;
  max-height: 327px;
  border-radius: 24px;
  background:  url(/wp-content/uploads/2025/01/image_pamphlet.webp) 50% 50% /cover no-repeat;
}
.documentDlCard a {
	display: block;
	width: 100%;
	height: 100%;
/* 	transition: .2s; */
}
.documentDlCard a:hover {
/* 	margin: -10px 0 0; */
/* 	transition: .2s; */
}
@media (max-width: 978px) {
  .documentDl .flexbox {
    padding: 48px 0 72px;
/* 	width: calc(100% - 60px); */
/* 	max-width: calc(100% - 60px); */
	}
  .documentDl .flexheader {
    margin: 0 auto;
  }
/*   .documentDl .flexheader p {
    font-size: var(--font14);
    font-weight: normal;
    margin: 8px 0 0;
    line-height: 1.7;
  } */
  .documentDl .button { 
    margin: 32px auto 0;
  }
  .documentDlCard {
    width: 100%;
    margin: 24px 0 0;
    height: 44vw;
  }
.documentDlCard a:hover {
/* 	margin: 0; */
}
}


/* ==============================================================
  従業員インタビュー、ピックアップ
================================================================ */

.memberInterview {
  position: relative;
  margin: 92px auto 0;
}
@media (max-width: 978px) {
  .memberInterview {
    margin: 56px auto 72px;
  }
}

.memberInterview .flexbox,
.PickupTopics .flexbox {
  width: 75%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
/*   justify-content: space-between; */
  margin: 48px auto 0;
}
.interviewBlock {
  position: relative;
  width: calc((100% - 8rem)/3);
  border-radius: 24px;
  box-shadow: 0 0 10px 0 rgba(0, 72, 157, .1);
  transition: .5s;
  opacity: 0;
  background-color: #fff;
  overflow: hidden;
}
.interviewBlock:hover {
  box-shadow: 0 0 16px 0 rgba(0, 72, 157, .3);
  transition: .5s;
}
.interviewBlock a {
  display: block;
}
.interviewBlock_photo figure {
  position: relative;
  width: 100%;
  padding-top: 67%;
  overflow: hidden;
}
.interviewBlock a .interviewBlock_photo img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  font-size: 0;
  transform: scale(1.05);
  transition: 2.6s;
}
.interviewBlock a:hover .interviewBlock_photo img {
  transform: scale(1.15);
  transition: 2.6s;
}
.interviewBlock_text {
  font-size: var(--font16);
  text-align: left;
  line-height: 1.8;
  padding: 32px 32px 68px;
}
.interviewBlock_text .arrowIcon {
  position: absolute;
  right: 24px;
  bottom: 24px;
}
@media (max-width: 978px) {
  .memberInterview .flexbox, 
  .PickupTopics .flexbox {
    width: calc(100% - 40px);
	max-width: 570px;
	gap: 32px;
    flex-direction: column;
    margin: 32px auto 0;
  }
  .interviewBlock {
    width: 100%;
  }
  .interviewBlock_text p {
    font-size: var(--font16);
  }
  .interviewBlock_text {
    padding: 24px 24px 68px;
  }
  .interviewBlock_text .arrowIcon {
    width: 42px;
    height: 42px;
  }
}

.readmore {
width: calc(100% - 48px);
margin: 0 auto;
}
.readmore .button {
margin: 0 auto;
}
.readmore a {
letter-spacing: 1.6px;
}


/* ==============================================================
ピックアップ
================================================================ */
.PickupTopics {
position: relative;
margin-top: 100px;
padding: 100px 0;
background: rgba(132, 193, 227, 1);
}
.PickupTopics h2 {
color: #fff;
}
.PickupTopics:before {
content: "PICKUP";
position: absolute;
top: -3vw;
right: 0;
left: 0;
margin: auto;
width: 100%;
font-size: 280px;
font-family: "Roboto", sans-serif;
font-weight: 500;
text-align: center;
color: rgba(255, 255, 255, .3);
}
.pickupTopics .flexbox {
margin: 10px auto 0;
}
@media (max-width: 978px) {
.PickupTopics {
margin: 56px auto 0;
padding: 56px 0;
}
.PickupTopics:before {
top: -4vw;
font-size: 30vw;
}
}


/* ==============================================================
従業員インタビュー / 区分リスト
================================================================ */
.jobCategories,
.joiningCategories {
width: 78%;
max-width: 1300px;
text-align: left;
}
.jobCategories {
margin: 48px auto 0;
}
.joiningCategories {
margin: 24px auto 0;
}
@media (max-width: 978px) {
.jobCategories,
.joiningCategories {
width: 100%;
/* width: calc(100% - 40px); */
max-width: auto;
}
.jobCategories {
margin: 32px auto 0;
}
.joiningCategories {
margin: 16px auto 0;
}
}
/* .jobCategory */
.jobCategories input[type=checkbox].jobCategory + span {
width: fit-content;
display: inline-block;
color: var(--blue);
font-size: var(--font14);
font-weight: bold;
border-radius: 16px;
background-color: var(--lightblue);
padding: 8px 16px;
cursor: pointer;
border: 1px solid var(--lightblue);
transition: .1s;
}
.jobCategories input[type=checkbox].jobCategory + span:hover {
border: 1px solid var(--blue);
transition: .1s;
}
.jobCategories label + label {
margin: 0 0 0 16px;
}
.jobCategories input[type=checkbox].jobCategory:checked + span {
color: var(--lightblue);
background-color: var(--blue);
}
@media (max-width: 978px) {
.jobCategories input[type=checkbox].jobCategory + span {
padding: 6px 10px;
margin: 4px 0 0;
}
.jobCategories label + label {
margin: 0 0 0 4px;
}
}
/* .joiningCategories */
.joiningCategories label {
font-size: var(--font14);
font-weight: bold;
}
.joiningCategories label span {
padding: 0 0 0 8px;
}
.joiningCategories label + label {
margin: 0 0 0 16px;
}
input[type="radio"] {
position: relative;
width: 16px;
height: 16px;
border: 1px solid #d9d9d9;
border-radius: 50%;
vertical-align: -2px;
}
input[type="radio"]:checked {
border: 1px solid var(--blue);
}
input[type="radio"]:checked:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--blue);
content: '';
}
.interviewTag {
position: relative;
color: var(--blue);
font-size: var(--font14);
font-weight: bold;
letter-spacing: 2px;
line-height: 1.8;
}
.interviewTag span + span {
position: relative;
}
.interviewTag span + span:before {
content: "・"
}



/* ==============================================================
  環境や精度について
================================================================ */

.knowData ul {
width: calc(100% - 120px);
max-width: 1200px;
display: flex;
flex-wrap: wrap;
gap: 24px;
margin: 48px auto 64px;
padding: 0;
}
.knowData ul li {
width: calc((100% - 48px) / 3);
}
.knowData ul li:nth-child(n + 4) {
margin-top: 16px;
}
.knowData_image {
background: rgba(230, 243, 249, 1);
padding: 32px 0;
border-radius: 16px;
}
.knowData_image img {
max-width: 80%;
}
.knowData li p {
font-size: var(--font16);
line-height: 1.6;
text-align: left;
padding: 16px 16px 0 16px;
}
@media (max-width: 978px) {
.knowData ul li {
width: 100%;
/* width: ((100% - 24px)); */
}
.knowData_image {
padding: 24px 0;
}
.knowData li p {
padding: 8px 10px 0 10px;
}
.knowData ul li:nth-child(n + 4) {
margin-top: 0;
}
}


/*  */
.systemEtc {
  margin: 0 auto 0;
  padding: 80px 0 100px;
  background-color: var(--lightgray);
}
.systemEtc .lead {
  font-size: var(--font16);
  margin: 16px auto 0;
}
@media (max-width: 978px) {
  .systemEtc {
    margin: 0 auto 0;
    padding: 56px 0 72px;
  }
  .systemEtc .lead {
    width: calc(100% - 40px);
    line-height: 1.8;
    text-align: left;
  }
}

.systemEtc .flexbox ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 48px auto 0;
}
.systemEtc .flexbox li {
  width: calc((100% - 52px)/3);
  height: 15vw;
  max-height: 220px;
  margin: 0 0 26px 26px;
}
.systemEtc .flexbox li:nth-child(3n + 1) {
  margin: 0 0 26px;
}
@media (max-width: 978px) {
  .systemEtc .flexbox ul {
    flex-direction: column;
    margin: 24px auto 0;
  }
  .systemEtc .flexbox li {
	width: 100%;
/*     width: calc(100% - 40px); */
	max-width: 570px;
    height: auto;
    margin: 0 auto;
  }
  .systemEtc .flexbox li:nth-child(3n + 1) {
    margin: 0;
  }
  .systemEtc .flexbox li + li {
    margin: 24px auto 0 !important;
  }
}

.systemEtc .flexbox li a {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  border-radius: 24px;
  box-shadow: 0 0 10px 0 rgba(0, 72, 157, .1);
  transition: .5s;
}
.systemEtc .flexbox li a:hover {
  box-shadow: 0 0 16px 0 rgba(0, 72, 157, .3);
  transition: .5s;
}
.systemEtc .flexbox .arrowIcon {
  position: absolute;
  right: 24px;
  bottom: 24px;
}
@media (max-width: 978px) {
  .systemEtc .flexbox li a {
    padding: 54px 0; 
  }

}

.systemEtc .systemTitle { 
  color: var(--blue);
  font-size: var(--font32);
  font-weight: bold;
  line-height: 1.1;
}
.systemEtc .systemTitle + span {
  font-size: var(--font14);
  margin: 8px auto 0;
}  
@media (max-width: 978px) {
  .systemEtc .arrowIcon {
    width: 42px;
    height: 42px;
  }
  .systemEtc .systemTitle + span {
    margin: 12px auto 0;
  }
}

/* ==============================================================
  エントリーはこちら
================================================================ */
.entryIsHere {
  position: relative;
  padding: 92px 0;
  background:  url(./../img/career2023/photo_office02.jpg) 50% 50% /150% no-repeat;
}
@media (max-width: 978px) {
  .entryIsHere {
    background:  url(./../img/career2023/photo_office02_sp.jpg) 50% 50% /150% no-repeat;
  }
}

.entryformBase {
  border-radius: 24px;
}
.entryformBase a {
  width: 62%;
  display: flex;
  background-color: var(--white);
  max-width: 870px;
  border-radius: 24px;
  margin: 0 auto;
  padding: 56px 48px 58px 90px;
  box-sizing: border-box;
}
@media (max-width: 978px) {
  .entryformBase a {
    width: calc(100% - 56px);
    flex-direction: column;
    padding: 48px 32px 32px 32px;
  }
}

.entryformBase .entryformHeader {
  width: calc(100% - 88px - 24px);
  text-align: left;
}
.entryformBase .entryformHeader .entryformTitle {
  font-size: var(--font45);
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 4px;
}
.entryformBase .entryformHeader p {
  margin: 24px 0 0;
  font-size: 18px;
}
@media (max-width: 978px) {
  .entryformBase .entryformHeader {
    width: 100%;
  }
  .entryformBase .entryformHeader .entryformTitle {
    font-size: 32px;
  }
  .entryformBase .entryformHeader p {
	margin: 16px 0 0;
	line-height: 1.8;
    font-size: 16px;
  }
}

.entryformBase .arrowIcon {
  width: 88px;
  height: 88px;
  background-color: var(--green);
}
.entryformBase .arrowIcon path {
  stroke: var(--white);
}
@media (max-width: 978px) {
  .entryformBase .arrowIcon {
    width: 80px;
    height: 80px;
	margin: 24px 0 0 auto;
  }
}


/* ================================================================ */
#list .memberInterview {
margin-top: 160px;
}
@media (max-width: 978px) {
#list .memberInterview {
margin-top: 100px;
}
}