/* ============================================ */
/* philosophy-mission
/* ============================================ */
#career #main {
  --color-category: var(--color-newgrads);
}

/* ===== top-area ===== */
#top-area {
  min-height: 550px;
}
#top-area.img-half::before {
  background: var(--color-category);
  height: calc(100% - 180px);
}
#top-area.img-half .page-title {
  position: absolute;
  top: 180px;
  height: calc(100% - 180px - 15%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
}
#top-area.img-half .page-title .ja .small {
  font-size: 50%;
}
#top-area.img-half .page-title .en {
  font-size: 23px;
  font-size: 1.4375rem;
  font-weight: 400;
  margin: 2em 0 0;
}
#top-area.img-half .img {
  height: 85%;
}
#top-area.img-half .img::before {
  background-image: url(/recruit/assets/img/common/philosophy-mission/top-area.jpg);
}

@media screen and (max-width: 1024px) {
  #top-area.img-half::before {
    height: calc(100% - 150px);
  }
  #top-area.img-half .page-title {
    top: 150px;
    height: calc(100% - 150px - 15%);
  }
}
@media screen and (max-width: 768px) {
  #top-area {
    min-height: auto;
  }
  #top-area.img-half {
    padding: 30px 0 50px;
  }
  #top-area.img-half::before {
    display: block;
    height: 200px;
  }
  #top-area.img-half .page-title {
    position: relative;
    top: auto;
    height: auto;
    color: var(--color-category);
  }
  #top-area.img-half .page-title .en {
    font-size: 18px;
    font-size: 1.125rem;
    margin: 1em 0 0;
  }
  #top-area.img-half .img {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: 250px;
    margin: 30px 0 0;
  }
}
/* ===== comprehensive ===== */
#comprehensive {
  position: relative;
  margin: -50px 0 0;
}
#comprehensive .wrap {
  display: flex;
  align-items: center;
}
#comprehensive .text {
  width: fit-content;
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 2;
  color: var(--color-category);
  flex-shrink: 0;
  padding: 100px 0;
}
@media screen and (max-width: 1024px) {
  #comprehensive .text {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media screen and (max-width: 768px) {
  #comprehensive .text {
    font-size: 16px;
    font-size: 1rem;
  }
}
@media screen and (max-width: 600px) {
  #comprehensive {
    margin: 0;
    padding: 50px 0 0;
  }
  #comprehensive .wrap {
    flex-direction: column;
    gap: 30px;
  }
  #comprehensive .text {
    text-align: justify;
    padding: 0;
  }
  #comprehensive .img {
    width: 100%;
    max-width: 300px;
  }
}
/* ===== domain ===== */
#domain {
  position: relative;
  padding: 100px 0 140px;
  background: var(--color-lightnavy);
}
#domain::before {
  content: "Domain";
  position: absolute;
  right: 5%;
  bottom: 0;
  color: var(--color-white);
  font-size: 202px;
  font-size: 12.625rem;
  font-weight: 600;
  line-height: 0.65em;
  font-family: var(--fontfamily-en);
}
#domain .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}
#domain .text {
  width: 385px;
  line-height: 2;
  order: 2;
  flex-shrink: 0;
}
#domain .text .title {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-category);
  margin: 0 0 1em;
}
#domain .img {
  order: 1;
}

@media screen and (max-width: 1024px) {
  #domain::before {
    font-size: 160px;
    font-size: 10rem;
  }
  #domain .wrap {
    flex-direction: column;
  }
  #domain .text {
    width: 100%;
    order: 1;
  }
  #domain .img {
    width: 100%;
    max-width: 620px;
    order: 2;
  }
}
@media screen and (max-width: 768px) {
  #domain {
    padding: 80px 0 100px;
  }
  #domain::before {
    font-size: 120px;
    font-size: 7.5rem;
  }
  #domain .text .title {
    font-size: 22px;
    font-size: 1.375rem;
  }
}
@media screen and (max-width: 600px) {
  #domain {
    padding: 80px 0;
  }
  #domain::before {
    font-size: 80px;
    font-size: 5rem;
  }
  #domain .text .title {
    font-size: 20px;
    font-size: 1.25rem;
  }
}
/* ===== aim ===== */
#aim {
  position: relative;
  padding: 120px 0 140px;
}
#aim .title {
  position: relative;
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-category);
  margin: 0 0 1.5em;
}
#aim .title::before {
  content: "";
  position: absolute;
  left: -1.8em;
  top: calc(50% + 0.1em);
  transform: translate(0, -50%);
  width: 1.3em;
  height: 1.3em;
  border: solid 7px var(--color-blue);
  border-radius: 50%;
}
#aim .list .list-item {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--color-lightnavy);
  color: var(--color-category);
  padding: 1em;
  border-radius: 10px;
}
#aim .list .list-item + .list-item {
  margin: 10px 0 0;
}
#aim .goal {
  margin: 100px 0 0;
}
#aim .goal .item-list .year {
  width: fit-content;
  display: flex;
  gap: 30px;
  width: 100%;
  max-width: 600px;
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 20px auto;
  padding: 0 0 0.5em;
  border-bottom: solid 1px var(--color-black);
}
#aim .goal .item-list .year .before {
  width: calc(40% - 45px);
}
#aim .goal .item-list .year .spacer {
  width: 30px;
}
#aim .goal .item-list .year .after {
  width: calc(60% - 45px);
}
#aim .goal .item-list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#aim .goal .item-list .item + .item {
  margin: 50px 0 0;
}
#aim .goal .item-list .item .item-title {
  font-size: 28px;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-category);
  border-left: solid 8px var(--color-category);
  padding: 0 0 0 0.5em;
}
#aim .goal .item-list .item .item-title .small {
  display: block;
  font-size: 70%;
}
#aim .goal .item-list .item .item-title .subscript {
  font-size: 60%;
}
#aim .goal .item-list .item .year {
  display: none;
}
#aim .goal .item-list .item .number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  gap: 30px;
}
#aim .goal .item-list .item .number .before {
  width: calc(40% - 45px);
}
#aim .goal .item-list .item .number .arrow {
  width: 30px;
  height: 40px;
  background: var(--color-category);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}
#aim .goal .item-list .item .number .after {
  width: calc(60% - 45px);
}

@media screen and (max-width: 1400px) {
  #aim .goal .item-list .item .item-title {
    font-size: 23px;
    font-size: 1.4375rem;
  }
}
@media screen and (max-width: 1200px) {
  #aim .goal .item-list .year {
    display: none;
  }
  #aim .goal .item-list .item {
    flex-direction: column;
    align-items: flex-start;
  }
  #aim .goal .item-list .item .item-title {
    margin: 0 0 20px;
  }
  #aim .goal .item-list .item .year {
    display: flex;
    margin: 0 auto 15px;
  }
  #aim .goal .item-list .item .number {
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  #aim {
    padding: 80px 0;
  }
  #aim .title {
    font-size: 22px;
    font-size: 1.375rem;
    padding: 0 0 0 1.8em;
  }
  #aim .title::before {
    left: 0;
  }
  #aim .list .list-item {
    font-size: 18px;
    font-size: 1.125rem;
  }
  #aim .goal {
    margin: 50px 0 0;
  }
  #aim .goal .item-list .item .item-title {
    font-size: 22px;
    font-size: 1.375rem;
  }
  #aim .goal .item-list .item .year {
    gap: 20px;
    font-size: 20px;
    font-size: 1.25rem;
  }
  #aim .goal .item-list .item .year .before {
    width: calc(40% - 30px);
  }
  #aim .goal .item-list .item .year .spacer {
    width: 20px;
  }
  #aim .goal .item-list .item .year .after {
    width: calc(60% - 30px);
  }
  #aim .goal .item-list .item .number {
    gap: 20px;
  }
  #aim .goal .item-list .item .number .before {
    width: calc(40% - 30px);
  }
  #aim .goal .item-list .item .number .arrow {
    width: 20px;
    height: 25px;
  }
  #aim .goal .item-list .item .number .after {
    width: calc(60% - 30px);
  }
}
@media screen and (max-width: 600px) {
  #aim .title {
    font-size: 20px;
    font-size: 1.25rem;
  }
  #aim .list .list-item {
    font-size: 16px;
    font-size: 1rem;
  }
  #aim .goal .item-list .item .item-title {
    font-size: 18px;
    font-size: 1.125rem;
  }
  #aim .goal .item-list .item .year {
    gap: 10px;
    font-size: 16px;
    font-size: 1rem;
  }
  #aim .goal .item-list .item .year .before {
    width: calc(40% - 10px);
  }
  #aim .goal .item-list .item .year .spacer {
    width: 10px;
  }
  #aim .goal .item-list .item .year .after {
    width: calc(60% - 10px);
  }
  #aim .goal .item-list .item .number {
    gap: 10px;
  }
  #aim .goal .item-list .item .number .before {
    width: calc(40% - 10px);
  }
  #aim .goal .item-list .item .number .arrow {
    width: 10px;
    height: 15px;
  }
  #aim .goal .item-list .item .number .after {
    width: calc(60% - 10px);
  }
}
/* ===== creed-philosophy ===== */
#creed-philosophy {
  position: relative;
  padding: 80px 0 110px;
  background: var(--color-lightnavy);
}
#creed-philosophy .wrap {
  display: flex;
  justify-content: space-between;
}
#creed-philosophy .title {
  display: flex;
  align-items: baseline;
  gap: 30px;
  color: var(--color-category);
  margin: 0 0 15px;
}
#creed-philosophy .title .ja {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 600;
}
#creed-philosophy .title .en {
  font-family: var(--fontfamily-en);
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 500;
}
#creed-philosophy .frame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-height: 280px;
  padding: 25px;
  background: var(--color-white);
  border-radius: 10px;
}
#creed-philosophy .creed {
  width: 48%;
}
#creed-philosophy .creed .img {
  width: 150px;
}
#creed-philosophy .creed .text {
  width: fit-content;
  flex-shrink: 0;
  line-height: 2;
}
#creed-philosophy .philosophy {
  width: 48%;
}
#creed-philosophy .philosophy img {
  width: 90%;
  max-width: 400px;
  margin: 30px 0;
}

@media screen and (max-width: 1024px) {
  #creed-philosophy .wrap {
    flex-direction: column;
    gap: 30px;
  }
  #creed-philosophy .frame {
    min-height: auto;
  }
  #creed-philosophy .creed {
    width: 100%;
  }
  #creed-philosophy .philosophy {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  #creed-philosophy {
    padding: 80px 0;
  }
  #creed-philosophy .title {
    gap: 10px;
  }
  #creed-philosophy .title .ja {
    font-size: 20px;
    font-size: 1.25rem;
  }
  #creed-philosophy .title .en {
    font-size: 16px;
    font-size: 1rem;
  }
  #creed-philosophy .frame {
    flex-direction: column;
    gap: 0;
  }
}

/*# sourceMappingURL=philosophy-mission.css.map */