@import url("https://fonts.cdnfonts.com/css/d-din");
*,
*:after,
*:before {
  box-sizing: inherit;
}

html {
  overflow-x: hidden;
  font-size: 62.5%;
}

body {
  position: relative;
  width: 100%;
  font-family: "Noto Sans JP", serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #353b3e;
  overflow: hidden;
}
body #wrapper {
  opacity: 0;
  transition: all 0.75s;
}
body #wrapper.fadein {
  opacity: 1;
}

a {
  text-decoration: none;
  color: #353b3e;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}
a.underline {
  text-decoration: underline;
}
a.underline:hover {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

br.sp {
  display: none;
}
br.pc {
  display: block;
}

@media screen and (max-width: 767px) {
  br.sp {
    display: block;
  }
  br.pc {
    display: none;
  }
}
.f11, .f11 * {
  font-size: 0.6875vw;
}

.f12, .f12 * {
  font-size: 0.75vw;
}

.f13, .f13 * {
  font-size: 0.8125vw;
}

.f14, .f14 * {
  font-size: 0.875vw;
}

.f16, .f16 * {
  font-size: 1vw;
}

.f18, .f18 * {
  font-size: 1.125vw;
}

.f20, .f20 * {
  font-size: 1.25vw;
}

.f24, .f24 * {
  font-size: 1.5vw;
}

.f28, .f28 * {
  font-size: 1.75vw;
}

.f30, .f30 * {
  font-size: 1.875vw;
}

.f32, .f32 * {
  font-size: 2vw;
}

.f36, .f36 * {
  font-size: 2.25vw;
}

.f40, .f40 * {
  font-size: 2.5vw;
}

.f44, .f44 * {
  font-size: 2.75vw;
}

.f48, .f48 * {
  font-size: 3vw;
}

.f56, .f56 * {
  font-size: 3.5vw;
}

.f60, .f60 * {
  font-size: 3.75vw;
}

.f64, .f64 * {
  font-size: 4vw;
}

.f72, .f72 * {
  font-size: 4.5vw;
}

.f80, .f80 * {
  font-size: 5vw;
}

.f90, .f90 * {
  font-size: 5.625vw;
}

.f96, .f96 * {
  font-size: 6vw;
}

.f120, .f120 * {
  font-size: 7.5vw;
}

.f128, .f128 * {
  font-size: 8vw;
}

.f160, .f160 * {
  font-size: 10vw;
}

.f240, .f240 * {
  font-size: 15vw;
}

.f320, .f320 * {
  font-size: 20vw;
}

@media screen and (max-width: 1024px) {
  .f11, .f11 * {
    font-size: 0.9625vw;
  }
  .f12, .f12 * {
    font-size: 1.05vw;
  }
  .f13, .f13 * {
    font-size: 1.1375vw;
  }
  .f14, .f14 * {
    font-size: 1.225vw;
  }
  .f16, .f16 * {
    font-size: 1.4vw;
  }
  .f18, .f18 * {
    font-size: 1.575vw;
  }
  .f20, .f20 * {
    font-size: 1.75vw;
  }
  .f24, .f24 * {
    font-size: 2.1vw;
  }
  .f28, .f28 * {
    font-size: 2.45vw;
  }
  .f30, .f30 * {
    font-size: 2.625vw;
  }
  .f32, .f32 * {
    font-size: 2.8vw;
  }
  .f36, .f36 * {
    font-size: 3.15vw;
  }
  .f40, .f40 * {
    font-size: 3.5vw;
  }
  .f44, .f44 * {
    font-size: 3.85vw;
  }
  .f48, .f48 * {
    font-size: 4.2vw;
  }
  .f56, .f56 * {
    font-size: 4.9vw;
  }
  .f60, .f60 * {
    font-size: 5.25vw;
  }
  .f64, .f64 * {
    font-size: 5.6vw;
  }
  .f72, .f72 * {
    font-size: 6.3vw;
  }
  .f80, .f80 * {
    font-size: 7vw;
  }
  .f90, .f90 * {
    font-size: 7.875vw;
  }
  .f96, .f96 * {
    font-size: 8.4vw;
  }
  .f120, .f120 * {
    font-size: 10.5vw;
  }
  .f128, .f128 * {
    font-size: 11.2vw;
  }
  .f160, .f160 * {
    font-size: 14vw;
  }
  .f240, .f240 * {
    font-size: 21vw;
  }
  .f320, .f320 * {
    font-size: 28vw;
  }
}
@media screen and (max-width: 767px) {
  .f11, .f11 * {
    font-size: 2.0625vw;
  }
  .f12, .f12 * {
    font-size: 2.25vw;
  }
  .f13, .f13 * {
    font-size: 2.4375vw;
  }
  .f14, .f14 * {
    font-size: 2.975vw;
  }
  .f16, .f16 * {
    font-size: 3.4vw;
  }
  .f18, .f18 * {
    font-size: 3.825vw;
  }
  .f20, .f20 * {
    font-size: 3.75vw;
  }
  .f24, .f24 * {
    font-size: 4.5vw;
  }
  .f28, .f28 * {
    font-size: 5.25vw;
  }
  .f30, .f30 * {
    font-size: 5.625vw;
  }
  .f32, .f32 * {
    font-size: 6vw;
  }
  .f36, .f36 * {
    font-size: 6.75vw;
  }
  .f40, .f40 * {
    font-size: 7.5vw;
  }
  .f44, .f44 * {
    font-size: 8.25vw;
  }
  .f48, .f48 * {
    font-size: 9vw;
  }
  .f56, .f56 * {
    font-size: 10.5vw;
  }
  .f60, .f60 * {
    font-size: 11.25vw;
  }
  .f64, .f64 * {
    font-size: 12vw;
  }
  .f72, .f72 * {
    font-size: 13.5vw;
  }
  .f80, .f80 * {
    font-size: 15vw;
  }
  .f90, .f90 * {
    font-size: 16.875vw;
  }
  .f96, .f96 * {
    font-size: 18vw;
  }
  .f120, .f120 * {
    font-size: 22.5vw;
  }
  .f128, .f128 * {
    font-size: 24vw;
  }
  .f160, .f160 * {
    font-size: 30vw;
  }
  .f240, .f240 * {
    font-size: 45vw;
  }
  .f320, .f320 * {
    font-size: 60vw;
  }
}
#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: white;
  z-index: 10001;
}
#loader > img {
  width: 256px;
  height: 78.03655424px;
}

@media screen and (max-width: 767px) {
  #loader {
    padding: 0 4.5vw 25vw 0;
  }
  #loader > img {
    width: 200px;
    height: 60.966058px;
  }
}
#career header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: clamp(150px, 17.5vw, 290px);
  height: clamp(68.571429px, 8.00000005vw, 132.5714294px);
  background-color: white;
  z-index: 1;
}
#career header > img {
  width: 82%;
}
#career .intro-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 115vw;
  padding-top: 11.5vw;
  background-color: #66a0e5;
  overflow: hidden;
}
#career .intro-wrap .bg-cloud {
  position: absolute;
  top: 5vw;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100vw;
  height: 52.8125vw;
}
#career .intro-wrap .bg-train {
  position: absolute;
  top: 38vw;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100vw;
  height: 83.375vw;
}
#career .intro-wrap .bg-light {
  position: absolute;
  top: 80vw;
  right: auto;
  bottom: auto;
  left: -14vw;
  width: 60vw;
  height: 60vw;
  mix-blend-mode: screen;
}
#career .intro-wrap .intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  z-index: 1;
}
#career .intro-wrap .intro > h1 {
  font-weight: 900;
}
#career .intro-wrap .intro > span {
  margin-top: 0.6em;
  font-family: "D-DIN", sans-serif;
}
#career .intro-wrap .intro > h2 {
  margin-top: 4em;
  font-weight: 700;
}
#career .intro-wrap .intro > p {
  margin-top: 2em;
  line-height: 2em;
  text-align: center;
}
#career .about-wrap {
  margin-top: 7vw;
}
#career .about-wrap .eng {
  display: block;
  color: #e6e6e6;
  font-family: "D-DIN", sans-serif;
  text-align: center;
}
#career .about-wrap .jpn {
  margin-top: -0.3em;
  font-weight: 700;
  text-align: center;
}
#career .about-wrap .occupation-list {
  display: flex;
  justify-content: center;
  margin-top: 3.5vw;
}
#career .about-wrap .occupation-list .o-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20vw;
  margin: 0 1.25vw;
  padding: 2.5vw 2vw 2vw;
  color: white;
  background-color: #0082cd;
}
#career .about-wrap .occupation-list .o-set > img {
  width: 5.5vw;
}
#career .about-wrap .occupation-list .o-set > h3 {
  margin-top: 1em;
  font-weight: 700;
}
#career .about-wrap .occupation-list .o-set > p {
  margin-top: 1.4em;
  line-height: 1.6em;
}
#career .about-wrap .occupation-list .o-set > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vw;
  height: 3vw;
  margin-top: 2em;
  background-color: #004ea1;
  background-image: url(/recruit/dentetsu/career/_/images/ico_blank_01w.svg);
  background-size: 0.875vw 0.6875vw;
  background-position: right 1vw center;
  background-repeat: no-repeat;
  border-radius: 1.5vw;
  transition: all 0.3s;
}
#career .about-wrap .occupation-list .o-set > a > span {
  color: white;
  text-indent: -0.3em;
}
#career .about-wrap .occupation-list .o-set > a:hover {
  background-color: #002e5e;
}
#career .about-wrap .expert-link {
  margin-top: 3em;
  text-align: center;
}
#career .about-wrap .expert-link > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26vw;
  height: 3vw;
  margin: 2em auto 0;
  background-color: #353b3e;
  background-image: url(/recruit/dentetsu/career/_/images/ico_blank_01w.svg);
  background-size: 0.875vw 0.6875vw;
  background-position: right 1vw center;
  background-repeat: no-repeat;
  border-radius: 1.5vw;
  transition: all 0.3s;
}
#career .about-wrap .expert-link > a > span {
  color: white;
  text-indent: -0.8em;
}
#career .about-wrap .expert-link > a:hover {
  background-color: #515b60;
}
#career .about-wrap .environment-link {
  position: relative;
  display: flex;
  width: 42.5vw;
  height: 12.5vw;
  margin: 4em auto 0;
  border: 1px solid #ccc;
}
#career .about-wrap .environment-link::before {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  right: 0.8vw;
  bottom: 0.8vw;
  left: auto;
  width: 0.9625vw;
  height: 0.75625vw;
  background-image: url(/recruit/dentetsu/career/_/images/ico_blank_01.svg);
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#career .about-wrap .environment-link:hover .ev-thm > img {
  transform: scale(1.04);
}
#career .about-wrap .environment-link .ev-thm {
  width: 50%;
  overflow: hidden;
}
#career .about-wrap .environment-link .ev-thm > img {
  transition: all 0.3s;
}
#career .about-wrap .environment-link .ev-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  text-align: center;
}
#career .about-wrap .environment-link .ev-txt > h3 {
  font-weight: 700;
}
#career .about-wrap .environment-link .ev-txt > p {
  margin-top: 1em;
  line-height: 1.5em;
}
#career .image-wrap {
  position: relative;
  width: 100vw;
  height: 40vw;
  margin-top: 3vw;
}
#career .image-wrap .-img1- {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 52.5vw;
  height: 35.0175vw;
}
#career .image-wrap .-img2- {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  width: 52.5vw;
  height: 35.0175vw;
}
#career .entry-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40vw;
  height: 9vw;
  margin: 10vw auto 0;
  background-image: linear-gradient(180deg, rgb(0, 181, 228), rgb(0, 142, 211), rgb(0, 130, 205));
  box-shadow: 0 1.25vw 2.5vw 0 rgba(0, 0, 0, 0.25);
  border-radius: 4.5vw;
  overflow: hidden;
}
#career .entry-button::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  background-image: linear-gradient(180deg, rgb(133, 230, 255), rgb(59, 177, 242), rgb(0, 130, 205));
  opacity: 0;
  transition: all 0.5s;
}
#career .entry-button > span {
  position: relative;
  color: white;
  font-family: "D-DIN", sans-serif;
  font-weight: 700;
  z-index: 1;
  transition: all 0.5s;
}
#career .entry-button:hover::before {
  opacity: 1;
}
#career .entry-button:hover > span {
  text-shadow: 0 0.3vw 0.2vw rgba(0, 75, 132, 0.2);
}
#career .back-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11.25vw;
  height: 3vw;
  margin: 5vw auto 0;
  background-color: #1364b0;
  border-radius: 1.5vw;
}
#career .back-button > span {
  color: white;
  text-indent: 0.5em;
}
#career .back-button > span::after {
  content: "";
  display: inline-block;
  width: 0.90625vw;
  height: 0.8125vw;
  margin-left: 0.4em;
  background-image: url(/recruit/dentetsu/career/_/images/ico_back.png);
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#career footer {
  padding: 4em 0 3em;
  text-align: center;
}
#career footer > span {
  font-family: "D-DIN", sans-serif;
}

@media screen and (max-width: 1024px) {
  #career .intro-wrap {
    padding-top: 12.5vw;
  }
  #career .intro-wrap .intro > h1 {
    font-size: 5.22vw;
  }
  #career .intro-wrap .intro > span {
    font-size: 2.6vw;
  }
  #career .intro-wrap .intro > h2 {
    margin-top: 3.5em;
    font-size: 2.6vw;
  }
  #career .intro-wrap .intro > p {
    font-size: 1.625vw;
  }
  #career .about-wrap .jpn {
    font-size: 2.6vw;
  }
  #career .about-wrap .occupation-list {
    margin-top: 4vw;
  }
  #career .about-wrap .occupation-list .o-set {
    width: 22vw;
    margin: 0 1vw;
  }
  #career .about-wrap .occupation-list .o-set > img {
    width: 7.15vw;
  }
  #career .about-wrap .occupation-list .o-set > p {
    font-size: 1.4625vw;
  }
  #career .about-wrap .occupation-list .o-set > a {
    width: 13vw;
    height: 4vw;
    background-size: 1.1375vw 0.89375vw;
    background-position: right 1.5vw center;
    border-radius: 2vw;
  }
  #career .about-wrap .expert-link > a {
    width: 36vw;
    height: 4vw;
    background-size: 1.1375vw 0.89375vw;
    background-position: right 1.5vw center;
    border-radius: 2vw;
  }
  #career .about-wrap .environment-link {
    width: 55.25vw;
    height: 16.25vw;
  }
  #career .about-wrap .environment-link::before {
    position: absolute;
    top: auto;
    right: 1vw;
    bottom: 1vw;
    left: auto;
    width: 1.3125vw;
    height: 1.03125vw;
  }
  #career .entry-button {
    height: 10vw;
    margin: 10vw auto 0;
    border-radius: 5vw;
  }
  #career .back-button {
    width: 15vw;
    height: 4vw;
    border-radius: 2vw;
  }
  #career .back-button > span::after {
    width: 1.26875vw;
    height: 1.1375vw;
  }
}
@media screen and (max-width: 767px) {
  #career .intro-wrap {
    height: 220vw;
    padding-top: 25vw;
    background-color: #5595e2;
  }
  #career .intro-wrap .bg-cloud {
    height: 65vw;
  }
  #career .intro-wrap .bg-train {
    height: 190vw;
  }
  #career .intro-wrap .bg-light {
    width: 120vw;
    height: 180vw;
  }
  #career .intro-wrap .intro > h1 {
    font-size: 11.25vw;
    line-height: 1.25em;
    text-align: center;
  }
  #career .intro-wrap .intro > span {
    font-size: 5.4vw;
  }
  #career .intro-wrap .intro > h2 {
    margin-top: 3em;
    font-size: 5.4vw;
  }
  #career .intro-wrap .intro > p {
    font-size: 3.75vw;
    line-height: 1.8em;
  }
  #career .intro-wrap .intro > p + p {
    margin-top: 1.8em;
  }
  #career .about-wrap {
    margin-top: 15vw;
  }
  #career .about-wrap .eng {
    font-size: 20vw;
  }
  #career .about-wrap .jpn {
    margin-top: 0;
    font-size: 4.8vw;
  }
  #career .about-wrap .occupation-list {
    flex-wrap: wrap;
    margin-top: 8vw;
  }
  #career .about-wrap .occupation-list .o-set {
    width: 45vw;
    margin: 0 1.5vw 3vw;
    padding: 1.5em 1em 1.5em;
  }
  #career .about-wrap .occupation-list .o-set > img {
    width: 15.4vw;
  }
  #career .about-wrap .occupation-list .o-set > p {
    margin-top: 1.2em;
    font-size: 3.7125vw;
  }
  #career .about-wrap .occupation-list .o-set > a {
    width: 100%;
    height: 12vw;
    margin-top: 1.5em;
    background-size: 2.8875vw 2.26875vw;
    background-position: right 4vw center;
    border-radius: 6vw;
  }
  #career .about-wrap .expert-link {
    margin-top: 2em;
  }
  #career .about-wrap .expert-link > a {
    width: 88vw;
    height: 12vw;
    background-size: 2.8875vw 2.26875vw;
    background-position: right 4vw center;
    border-radius: 6vw;
  }
  #career .about-wrap .environment-link {
    flex-direction: column;
    width: 72vw;
    height: auto;
  }
  #career .about-wrap .environment-link::before {
    position: absolute;
    top: auto;
    right: 2vw;
    bottom: 2vw;
    left: auto;
    width: 3.5vw;
    height: 2.75vw;
  }
  #career .about-wrap .environment-link .ev-thm {
    width: 100%;
    height: 42.35294088vw;
  }
  #career .about-wrap .environment-link .ev-txt {
    width: 100%;
    padding: 1.5em 1em;
  }
  #career .image-wrap {
    height: 120vw;
    margin-top: 15vw;
  }
  #career .image-wrap .-img1- {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 90vw;
    height: 60.03vw;
  }
  #career .image-wrap .-img2- {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 90vw;
    height: 60.03vw;
    margin-top: -10vw;
    margin-left: 10vw;
  }
  #career .entry-button {
    width: 80vw;
    height: 20vw;
    margin: 8vw auto 0;
    border-radius: 10vw;
  }
  #career .back-button {
    width: 38vw;
    height: 9vw;
    margin: 9vw auto 0;
    border-radius: 4.5vw;
  }
  #career .back-button > span::after {
    width: 3.08125vw;
    height: 2.7625vw;
  }
}