@charset "UTF-8";

main {
  overflow-x: hidden;
}

.Concept {
  background-color: var(--color-chiyoda-blue);
  font-family: var(--font-family-sans);
  margin: 0 0 5rem 0;
  padding: 75px 1rem 1rem 1rem;
  position: relative;
  width: 100%;
}

.Concept_Decoration {
  background-color: #fff;
  border-radius: 3px 3px 10px 10px;
  height: 54px;
  left: 8%;
  position: absolute;
  top: 0;
  width: 80px;
}

.Concept_Decoration::before {
  background-color: var(--color-chiyoda-green);
  border-radius: 10.5px;
  content: "";
  height: 49px;
  left: 5px;
  position: absolute;
  top: 0;
  width: 70px;
}

.Concept_Number {
  color: var(--color-text-white);
  font: 400 2.5rem / 1 var(--font-family-caveat);
  left: 8%;
  margin: 0;
  position: absolute;
  text-shadow: 1px 1px 20px var(--color-black);
  top: .5em;
  transform: rotate(352deg) translateX(100px);
  width: fit-content;
}

.Concept_Info {
  background-position: right;
  background-size: cover;
  margin: 0 0 0 auto;
  position: relative;
  width: 100%;
}

.Concept_Belongs {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 1rem auto;
  text-align: center;
  text-shadow: 1px 1px 10px var(--color-black);
  width: fit-content;;
}

.Concept_BelongsDepartment {
  color: var(--color-text-white);
  font: 400 var(--font-size-m) / 1 var(--font-family-sans);
  letter-spacing: .2rem;
  margin: 0 .25rem;
}

.Concept_BelongsRole {
  color: var(--color-text-white);
  font: 400 var(--font-size-xl) / 1 var(--font-family-sans);
  letter-spacing: .6rem;
  margin: 0 .25rem;
}

.Concept_Center {
  position: relative;
  width: 100%;
}

.Concept_ImageWrapper {
  height: 300px;
  overflow: hidden;
}

.Concept_Image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Concept_Image.Image-MK {
  object-position: 45% 33%;
}

.Concept_Image.Image-MM {
  object-position: 70% 33%;
}

.Concept_Image.Image-RY {
  object-position: 75% 0;
}

.Concept_Image.Image-SK {
  object-position: 85% 33%;
}
/*
.Concept_Image.Image-ST {
  object-position: 95% 13%;
}
*/
.Concept_Image.Image-TK {
  object-position: 50% 50%;
}

.Concept_Image.Image-YA {
  height: 100%;
  object-fit: cover;
  object-position: 58% 25%;
  width: 100%;
}

.Concept_Attributes {
  align-items: center;
  color: var(--color-text-white);
  display: flex;
  font: 400 var(--font-size-m) / 1.5 var(--font-family-sans);
  margin: .5rem 0 0 auto;
  padding: 0;
  width: fit-content;
}

.Concept_Attribute {
  font: 400 var(--font-size-xs) / 1.2 var(--font-family-sans);
  margin: 0 .5rem 0 0;
}

.Concept_Name {
  font: 400 var(--font-size-l) / 1 var(--font-family-sans);
  margin: 0;
}

.Concept_Text {
  bottom: 15%;
  display: flex;
  flex-wrap: wrap;
  font: 400 var(--font-size-s) / 1.5 var(--font-family-hand);
  left: 2%;
  letter-spacing: .25em;
  margin: 0;
  padding: 0 0;
  position: absolute;
}

.Concept_Text span {
  background-color: rgba(248, 249, 250, .95);
  padding: .3em .3em;
}

.Concept_Text .Concept_TextComma {
  letter-spacing: -.5em;
  padding: 0;
}

@media screen and (min-width: 768px) {
  .Concept {
    padding: 1.5rem;
  }

  .Concept_Number {
    font-size: 3.5rem;
    left: 25%;
    position: absolute;
    top: 0;
    transform: rotate(352deg) translateX(-20%);
    z-index: 5;
  }

  .Concept_Info {
    width: 75%;
  }

  .Concept_Belongs {
    align-items: center;
    flex-direction: column;
    margin: 0 0 3rem 4.5rem;
    position: absolute;
    top: 5rem;
    z-index: 5;
  }

  .Concept_BelongsDepartment {
    font-size: var(--font-size-l);
  }

  .Concept_BelongsRole {
    font-size: 3rem;
    letter-spacing: 0.5rem;
  }

  .Concept_ImageWrapper {
    height: 400px;
    z-index: 0;
  }

  .Concept_Image.Image-MK {
    object-position: 15% 33%;
  }

  .Concept_Image.Image-MM {
    object-position: 45% 33%;
  }

  .Concept_Image.Image-ST {
    object-position: 80% 23%;
  }

  .Concept_Image.Image-TK {
    object-position: 3% 40%;
  }

  .Concept_Text {
    font-size: var(--font-size-l);
    left: 0;
    transform: translateX(-30%);
  }

  .Concept_Attributes {
    background-color: var(--color-chiyoda-blue);
    bottom: 0;
    display: block;
    margin: 0 0 0 auto;
    padding: .5rem 0 0 .5rem;
    position: absolute;
    right: 0;
    z-index: 5;
  }

  .Concept_Attribute {
    font: 400 var(--font-size-m) / 1.5 var(--font-family-sans);
    margin: 0 0 .5rem 0;
  }

  .Concept_Name {
    margin: 0 0 0 0;
  }
}

.InterviewHeading {
  background-color: var(--color-gray-light);
  font: 300 1.3rem / 1.2 var(--font-family-sans);
  padding: .5rem 1rem .5rem calc(50vw - 50%);
  position: relative;
  margin: 0 0 0 calc(50% - 50vw);
  width: fit-content;
}

.InterviewHeading.InterviewHeading-Job {
  border-right: 8px solid #fff2cc;
}

.InterviewHeading.InterviewHeading-Company {
  border-left: 8px solid #fba3bc;
  padding: .5rem 0 .5rem 1rem;
  margin: 0 calc(50% - 50vw) 0 0;
  width: auto;
}

.InterviewHeading.InterviewHeading-Attraction {
  border-right: 8px solid var(--color-chiyoda-green);
}

.InterviewHeading.InterviewHeading-RootingFor {
  border-right: 8px solid var(--color-chiyoda-blue);
}

.InterviewHeading::after {
  content: "";
  background-color: #fff;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
}

.InterviewHeading.InterviewHeading-Company::after {
  left: 0;
}

@media screen and (min-width: 576px) {
  .InterviewHeading {
    font-size: var(--font-size-l);
  }
}

.InterviewCatch {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font: 400 var(--font-size-s) / 1.8 var(--font-family-sans);
  font-feature-settings: "palt" 1;
  letter-spacing: .08em;
  margin: 0 0;
  position: relative;
  width: fit-content;
}

.InterviewCatch > span {
  position: relative;
  width: fit-content;
  z-index: 5;
}

.InterviewCatch::after {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  content: "";
  opacity: .8;
  position: absolute;
  transform: translate(-50%, -50%);
}

.InterviewCatch.InterviewCatch-Job::after {
  background-color: #fff2cc;
  left: 90%;
  top: 90%;
  width: 150px;
}

.InterviewCatch.InterviewCatch-Company::after {
  background-color: #fba3bc;
  left: -3%;
  top: 90%;
  width: 130px;
}

.InterviewCatch.InterviewCatch-Attraction::after {
  background-color: var(--color-chiyoda-green);
  left: 0;
  top: 50%;
  width: 110px;
}

.InterviewCatch.InterviewCatch-RootingFor {
  font-family: var(--font-family-hand);
  font-size: 1.1rem;
  margin: 2rem 0 0 0;
}

.InterviewCatch.InterviewCatch-RootingFor > span:first-child::first-letter {
  color: var(--color-text-white);
  font-size: 1.66em;
}

.InterviewCatch.InterviewCatch-RootingFor::after {
  background-color: var(--color-chiyoda-blue);
  left: 0;
  top: 1.5rem;
  transform: translate(calc(1.9em - 100%), -50%);
  width: 100px;
}

.InterviewCatch.InterviewCatch-RootingFor.InterviewCatch-Quotation::after {
  transform: translate(calc(3.6em - 100%), -50%);
}

@media screen and (min-width: 576px) {
  .InterviewCatch {
    font-size: var(--font-size-m);
  }

  .InterviewCatch.InterviewCatch-RootingFor {
    font-size: var(--font-size-l);
    margin: 2.5rem 0 0 0;
  }

  .InterviewCatch.InterviewCatch-RootingFor::after {
    width: 120px;
  }
}

.Comment {
  font: 300 var(--font-size-xs) / 1.5 var(--font-family-sans);
  margin: 0 0;
  max-width: 650px;
}

@media screen and (min-width: 768px) {
  .Comment {
    font-size: var(--font-size-s);
  }
}

.Job {
  margin: 0 auto 6rem auto;
  /*padding: 0 10px;*/
  width: 100%;
}


.Job_1 {
	margin: 0 auto 0 auto;
  width: 100%;
}

.Job_2 {
	margin: 0 auto 6rem auto;
  width: 100%;
}


.Job_Heading {
	/*
  margin: 0 0 2rem 0;
  width: 14rem;
	*/
	background-color: #fff;
	padding: 0 0 1rem 0;
}

.Job_Contents {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
	
  background-color: rgba(255,255,255,.85);
}

.Job_FirstContent {
  /*margin: 0 0 1.5rem 0;*/
	margin: 0 1rem 1.5rem 1rem;
  width: 100%;
}

.Job_Catch {
  margin: 2rem auto 2rem auto;
  width: fit-content;
}

.Job_FirstComment {
  margin: 0 auto 1.5rem auto;
  position: relative;
  width: fit-content;
}

.Job_ImageWrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
  width: 100%;
}

.Job_Image {
  height: 100%;
  max-width: 650px;
  object-fit: cover;
  width: 100%;
}

.Job_SecondComment {
  align-items: center;
  display: flex;
  margin: 0 auto 0 auto;
  padding: 0 0 0 0;
  width: 100%;
}

@media screen and (min-width: 576px) {
  .Job {
    max-width: 540px;
  }

  .Job_FirstContent {
    /*margin: 0 0 3rem 0;*/
	  margin: 0 1rem 3rem 1rem;
  }

  .Job_ImageWrapper {
    margin: 0 auto 0 auto;
    width: 50%;
  }

  .Job_SecondComment {
    padding: 0 0 0 1rem;
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .Job  {
    max-width: 720px;
  }
}

@media screen and (min-width: 992px) {
  .Job {
    max-width: 960px;
  }
}

.Company {
  margin: 0 auto 6rem auto;
  padding: 0 10px;
  width: 100%;
}

.Company_Contents {
  width: 100%;
}

.Company_FirstContent {
  background-color: #fff;
  margin: 0 auto 1rem auto;
  padding: 0 0 0 0;
  position: relative;
  right: 0;
}

.Company_Heading {
  margin: 0 0 2rem 0;
}

.Company_Catch {
  margin: 0 auto 2rem auto;
  width: fit-content;
}

.Company_FirstComment {
  position: relative;
}

.Company_ImageWrapper {
  aspect-ratio: 3 / 2;
  display: block;
  margin: 0 auto 1rem auto;
  overflow: hidden;
  width: 100%;
}

.Company_Image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Company_SecondComment {
  background-color: #fff;
  left: 0;
  padding: 0 0;
  position: relative;
}

@media screen and (min-width: 576px) {
  .Company {
    max-width: 540px;
  }
}

@media screen and (min-width: 768px) {
  .Company {
    max-width: 720px;
  }

  .Company_FirstContent {
    margin: 0 2rem -3rem auto;
    padding: 0 0 .5rem .5rem;
    right: -5%;
    width: 400px;
  }

  .Company_ImageWrapper {
    margin: 0 auto -2rem auto;
    width: 75%;
  }

  .Company_SecondComment {
    padding: .5rem .5rem 0 0;
    width: 400px;
  }
}

@media screen and (min-width: 992px) {
  .Company {
    max-width: 800px;
  }

  .Company_FirstContent {
    right: -15%;
  }

  .Company_ImageWrapper {
  margin: 0 auto -3.5rem auto;
  }

  .Company_SecondComment {
    left: -5rem;
  }
}

.Schedule {
  margin: 0 auto 6rem auto;
  width: 100%;
}

.Schedule_New {
  /*margin: 0 auto 6rem auto;*/
  width: 100%;
}

.Schedule_Heading {
  margin: 0 0 1.5rem 0;
  position: relative;
  width: 100%;
}

.Schedule_Heading::before {
  border-bottom: 1px solid var(--color-gray);
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: 55%;
  transform: translate(-100%, -50%);
  width: 50vw;
}

.Schedule_HeadingText {
  background-color: #fff;
  color: var(--color-gray);
  font: 500 var(--font-size-l) / 1.2 var(--font-family-sans);
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  width: fit-content;
}

.Schedule_Contents {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0;
  width: 100%;
}

.Schedule_Timeline, 
.Schedule_Timeline_New {
  align-items: center;
  background-color: rgba(255, 255, 255, .8);
  border: 1px solid var(--color-gray);
  display: flex;
  margin: 0 auto 1rem auto;
  padding: 1.5rem 1.5rem;
  width: fit-content;
}

.Schedule_TimelineList {
  height: fit-content;
  margin: 0 0 0 .5rem;
  padding: 0 0 0 1.5rem;
  position: relative;
}

.Schedule_TimelineList::before {
  background-color: var(--color-chiyoda-blue-light);
  content: "";
  height: calc(100% - 1.5rem);
  left: 0;
  opacity: .7;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
}

.Schedule_TimelineItem {
  display: flex;
  margin: 0 0 1rem 0;
  position: relative;
}

.Schedule_TimelineItem::before {
  background-color: var(--color-chiyoda-blue);
  border-radius: 50%;
  content: "";
  height: var(--font-size-xs);
  left: -1.5rem;
  position: absolute;
  top: .75rem;
  transform: translate(-50%, -50%);
  width: var(--font-size-xs);
}

.Schedule_TimelineItem:last-child {
  margin: 0 0 0 0;
}

.Schedule_TimelineTime {
  font: 400 var(--font-size-s) / 1.5 var(--font-family-sans);
  margin: 0 1rem 0 0;
  text-align: right;
  width: 2.5rem;
}

.Schedule_TimelineEvent {
  font: 400 var(--font-size-s) / 1.5 var(--font-family-sans);
  margin: 0;
}

.Schedule_ImageWrapper {
  aspect-ratio: 3 / 2;
  flex: 1 1 auto;
  height: auto;
  margin: 0 1rem 0 1rem;
  max-height: 420px;
  padding: 0 0 0 0;
  width: 100%;
}

.Schedule_Image {
  width: 100%;
}

@media screen and (min-width: 576px) {
  .Schedule {
    max-width: 540px;
  }

  .Schedule_Heading {
    margin: 0 0 3rem 0;
  }

  .Schedule_Timeline {
    margin: 1rem 0;
    transform: translateX(30%);
  }
	
  .Schedule_Timeline_New {
	margin: 1rem auto;
    transform: translateX(0%);
  }

  .Schedule_TimelineTime {
    font-size: var(--font-size-m);
  }

  .Schedule_TimelineEvent {
    font-size: var(--font-size-m);
  }

  .Schedule_ImageWrapper {
    margin: 0 calc(50% - 50vw) 0 0;
    padding: 0 calc(50vw - 50%) 0 0;
    width: unset;
  }
}

@media screen and (min-width: 768px) {
  .Schedule {
    max-width: 720px;
  }
	
  .Schedule_Timeline {
    margin: 2rem 0;
  }

  .Schedule_Timeline_New {
	  margin: 2rem auto;
	  transform: translateX(0%);
  }
}

@media screen and (min-width: 992px) {
  .Schedule {
    max-width: 960px;
  }
	.Schedule_Timeline_New {
	  margin: 2rem auto;
	  transform: translateX(0%);
  }
}

.Attraction {
  margin: 0 auto 6rem auto;
  padding: 0 10px;
  width: 100%;
}

.Attraction_Heading {
	background-color: #fff;
	padding: 0 0 1rem 0;
	
}

.Attraction_Contents {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.Attraction_FirstContent {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 1rem 0;
  padding: 0 0;
  width: 100%;
}

.Attraction_Catch {
  margin: 0 0 2rem .5rem;
}

.Attraction_FirstComment {
  position: relative;
}

.Attraction_ImageWrapper {
  aspect-ratio: 3 / 2;
  margin: 0 auto 1rem auto;
  overflow: hidden;
  width: 100%;
}

.Attraction_Image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Attraction_SecondComment {
  display: flex;
  justify-content: center;
  margin: 0 0 0 0;
  width: 100%;
}

@media screen and (min-width: 576px) {
  .Attraction {
    max-width: 540px;
  }

  .Attraction_FirstContent {
    align-items: center;
  }

  .Attraction_Catch {
    margin: 0 0 2rem 0;
  }
}

@media screen and (min-width: 768px) {
  .Attraction {
    max-width: 720px;
  }

  .Attraction_Heading {
    margin: 0 0 1rem 0;
  }

  .Attraction_FirstContent {
    margin: 0 0 0 0;
    padding: 0 1rem;
    width: 60%;
  }

  .Attraction_ImageWrapper {
    aspect-ratio: 1 / 1;
    margin: 0 0 0 auto;
    max-width: 350px;
    width: 40%;
  }

  .Attraction_SecondComment {
    margin: 2rem 0 0 0;
  }
}

@media screen and (min-width: 992px) {
  .Attraction {
    max-width: 940px;
  }

  .Attraction_Heading {
    margin: 0 0 0 0;
  }
}

.RootingFor {
  margin: 0 auto 6rem auto;
  padding: 0 10px;
  width: 100%;
}

.RootingFor_Heading {
  margin: 0 0 .5rem 0;
}

.RootingFor_Catch {
  display: flex;
  margin: 0 0 1rem auto;
  width: fit-content;
}

.RootingFor_Catch_New {
	display: flex;
  margin: 0 0 1rem auto;
  /*width: fit-content;*/
	
	justify-content: center;
}

.RootingFor_Comment {
  background-color: #fff;
  left: 0;
  margin: 0 0 1rem 0;
  padding: 0 0 0 0;
  position: relative;
  width: 100%;
  z-index: 5;
}

.RootingFor_ImageWrapper {
  aspect-ratio: 3 / 2;
  display: block;
  margin: 0 auto 0 auto;
  overflow: hidden;
  width: 100%;
  z-index: 0;
}

.RootingFor_Image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media screen and (min-width: 576px) {
  .RootingFor {
    max-width: 540px;
  }

  .RootingFor_Catch {
    margin: 0 0 1.5rem auto;
  }
}

@media screen and (min-width: 768px) {
  .RootingFor {
    max-width: 720px;
  }

  .RootingFor_Comment {
    margin: 0 auto -2rem 0;
    padding: 0 .5rem .5rem 0;
    width: 450px;
  }

  .RootingFor_ImageWrapper {
    width: 75%;
  }
}

@media screen and (min-width: 992px) {
  .RootingFor {
    max-width: 960px;
  }

  .RootingFor_Heading {
    margin: 0 0 -1.5rem 0;
  }
}

.Others {
  margin-bottom: 12rem;
  overflow: hidden;
}

.Others_Heading {
  background-color: var(--color-gray-light);
  font: 300 var(--font-size-l) / 1.5 var(--font-family-sans);
  margin: 0 auto 3rem auto;
  padding: .5rem 1rem;
  width: fit-content;
}


/* 社員紹介New_ver.追加 */

.Job_Heading_New {
  position: relative;
    padding: 1rem 0;
    border-bottom: 3px solid;
    color: black;
    font-weight: bold;
    font-size: 26px;
	margin: 0 auto 1rem auto;
    text-align: center;
	/*width: 33%;*/
	width: 29%;
}

.Job_Heading_New:before,
.Job_Heading_New:after {
    position: absolute;
    top: 100%;
    left: 22%;
    content: "";
    height: 0;
    width: 0;
}

.Job_Heading_New:before {
    border: 14px solid;
    border-color: transparent;
    border-top-color: black;
    margin-left: -14px;
}

.Job_Heading_New:after {
    border: 10px solid;
    border-color: transparent;
    border-top-color: white;
    margin-left: -10px;
}

@media screen and (max-width: 992px) {
	.Job_Heading_New {
      font-size: 22px;
      width: 40%;
	}
}

@media screen and (max-width: 768px) {
    .Job_Heading_New {
      font-size: 20px;
      width: 55%;
    }
}

@media screen and (max-width: 576px) {
    .Job_Heading_New {
      font-size: 18px;
      width: 60%;
    }
}


.Imagespace {
	height: 500px;
}

@media screen and (max-width: 576px) {
    .Imagespace {
      height: 300px;
    }
}


/* 20240207パララックス */
.Job_section1 {
  position: relative;
  width: 100%;
	height: 1600px;
	margin: 0 auto;
}

.Job_section2 {
  position: relative;
  width: 100%;
  height: 1550px;
	margin: 0 auto;
}

.Job_sectionInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(auto, auto, auto, auto); /* これで背景を切り抜く */
}
.Job_imageBg01 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 37%;
	background-repeat: no-repeat;
	padding-top: 66.73913%;
}

.Job_imageBg02 {
	position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 35%;
	background-repeat: no-repeat;
	padding-top: 64.673913%;
}

.imageBg01 {
  background-image: url(../img/people_third/Job_1_WRWorking.jpg);
	background-size: 920px;
}

.imageBg02 {
  background-image: url(../img/people_third/Job_2_WRWorking.jpg);
	background-size: 920px;
}

.imageBg_RS1 {
  background-image: url(../img/people_third/Job1_RSWorking.jpg);
	background-size: 920px;
}

.imageBg_RS2 {
  background-image: url(../img/people_third/Job2_RSWorking.jpg);
	background-size: 920px;
}





.cntFrame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  padding: 0 100px;
  margin-top: 100vh;
  background: rgba(255,255,255,.8);
  color: #111;
}

@media screen and (max-width: 992px) {
	.imageBg01, .imageBg02, .imageBg_RS1, .imageBg_RS2{
		background-size: 100%;
	}
	.Job_section1 {
		height: 1600px;
	}
	.Job_section2 {
		height: 1500px;
	}
}

@media screen and (max-width: 768px) {
  .cntFrame {
    padding: 0 15px;
  }
  .imageBg01, .imageBg02, .imageBg_RS1, .imageBg_RS2 {
    background-position: 50% 50px;
  }
	.Schedule_New {
		height: 300px;
	}
	.Job_section1 {
		height: 1600px;
	}
	.Job_section2 {
		height: 1400px;
	}
}

@media screen and (max-width: 576px) {
	.Job_section1 {
		height: 1600px;
	}
	.Job_section2 {
		height: 1200px;
	}
}