@charset "UTF-8";
/* -----------------------------------------------
home
----------------------------------------------- */
/* -----------------------------------------------
recruit
----------------------------------------------- */
/* ====================================================
layout
==================================================== */
/* -----------------------------------------------
header
----------------------------------------------- */
.l-header {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 9999;
  background-color: transparent;
  height: 7rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
@media print, screen and (max-width: 768px) {
  .l-header {
    height: 5rem;
  }
}
.l-header.js-min_header {
  position: fixed;
  top: 0;
}
.l-header__logo {
  width: 26rem;
  display: block;
  background-size: cover;
}
@media print, screen and (max-width: 768px) {
  .l-header__logo {
    width: 20rem;
    padding: 1rem 0 0 0;
  }
}
.l-header__inner {
  padding: 0 0 0 3rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
}
@media print, screen and (max-width: 768px) {
  .l-header__inner {
    padding: 0 0 0 1.5rem;
    justify-content: space-between;
  }
}
.l-header__nav {
  margin-left: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 0;
  z-index: 9999;
  padding: 10rem 2rem 0;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #06316de3;
  display: none;
  height: 100vh;
  width: 30%;
}
.l-header__nav.is_open {
  display: block;
}
@media print, screen and (max-width: 768px) {
  .l-header__nav {
    width: 100%;
  }
}
.l-header__nav > .btn {
  color: #fff;
  display: block;
  padding: 1rem 1rem;
  font-size: 1.5rem;
  text-align: center;
  border: 1px solid #fff;
}
.l-header__list > li {
  border-bottom: 1px solid #ffffff45;
}
.l-header__list > li > a {
  color: #fff;
  display: block;
  padding: 1rem 0;
  font-size: 1.5rem;
}
.l-header__btn {
  line-height: 1;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff7f00;
  letter-spacing: 0.3em;
  font-size: 2rem;
  width: 15rem;
  text-align: center;
  font-weight: 400;
  margin-left: auto;
  z-index: 99999;
}
@media print, screen and (max-width: 768px) {
  .l-header__btn {
    display: none;
  }
}

/* -----------------------------------------------
hamburger
----------------------------------------------- */
.l-hamburger {
  cursor: pointer;
  display: block;
  z-index: 99999;
  position: relative;
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
  width: 7rem;
  height: 100%;
}
@media print, screen and (max-width: 768px) {
  .l-hamburger {
    width: 5rem;
    height: 5rem;
  }
}
.l-hamburger span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 0;
  right: 0%;
  margin: auto;
  height: 2px;
  border-radius: 2rem;
  width: 3rem;
  background: #fff;
}
@media print, screen and (max-width: 768px) {
  .l-hamburger span {
    width: 2rem;
  }
}
.l-hamburger span:nth-of-type(1) {
  top: 2.2rem;
}
@media print, screen and (max-width: 768px) {
  .l-hamburger span:nth-of-type(1) {
    top: 1.5rem;
  }
}
.l-hamburger span:nth-of-type(2) {
  top: calc(50% - 0.1rem);
}
.l-hamburger span:nth-of-type(3) {
  bottom: 2.2rem;
}
@media print, screen and (max-width: 768px) {
  .l-hamburger span:nth-of-type(3) {
    bottom: 1.5rem;
  }
}
@media print, screen and (max-width: 768px) {
  .l-hamburger.is_open span {
    width: 3rem;
  }
}
.l-hamburger.is_open span:nth-of-type(1) {
  top: 3.4rem;
  transform: translateY(0) rotate(-223deg);
}
@media print, screen and (max-width: 768px) {
  .l-hamburger.is_open span:nth-of-type(1) {
    top: 2.4rem;
  }
}
.l-hamburger.is_open span:nth-of-type(2) {
  opacity: 0;
}
.l-hamburger.is_open span:nth-of-type(3) {
  bottom: 3.5rem;
  transform: translateY(0) rotate(223deg);
}
@media print, screen and (max-width: 768px) {
  .l-hamburger.is_open span:nth-of-type(3) {
    bottom: 2.3rem;
  }
}

/* ====================================================
footer
==================================================== */
.l-footer {
  background-color: #06316d;
  padding: 8rem 0 5rem;
  color: #fff;
}
@media print, screen and (max-width: 768px) {
  .l-footer {
    padding: 5rem 0 5rem;
  }
}
.l-footer__logo {
  width: 30rem;
  display: block;
}
.l-footer__logo > img {
  width: 100%;
}
.l-footer__logo--recruit {
  width: 42rem;
  display: block;
}
@media print, screen and (max-width: 768px) {
  .l-footer__logo--recruit {
    width: 36rem;
  }
}
.l-footer__logo--recruit > img {
  width: 100%;
}
.l-footer__head {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 2rem;
}
@media print, screen and (max-width: 768px) {
  .l-footer__head {
    display: block;
  }
}
.l-footer__head > figcaption {
  width: calc(100% - 30rem);
}
@media print, screen and (max-width: 768px) {
  .l-footer__head > figcaption {
    width: 100%;
  }
}
.l-footer__head > figcaption > .add {
  font-weight: 400;
  margin-top: 3rem;
}
.l-footer__head > figcaption > .add > a {
  color: #fff;
}
.l-footer__head > figcaption > .btnarea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
@media print, screen and (max-width: 768px) {
  .l-footer__head > figcaption > .btnarea {
    gap: 1rem;
  }
}
.l-footer__head > figcaption > .btnarea > a {
  border: 1px solid #89acc2;
  color: #fff;
  display: block;
  width: 24rem;
  text-align: center;
  font-weight: 400;
  padding: 0.2rem;
}
@media print, screen and (max-width: 768px) {
  .l-footer__head > figcaption > .btnarea > a {
    width: auto;
    flex: 1;
    padding: 0.5rem;
  }
}
.l-footer__head > figcaption > .btnarea > a + a {
  margin-left: 2rem;
}
.l-footer__head > figure {
  width: 30rem;
}
@media print, screen and (max-width: 768px) {
  .l-footer__head > figure {
    width: 100%;
    margin-top: 2rem;
  }
}
.l-footer-nav {
  display: grid;
  color: #fff;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  border-top: 1px solid #89acc2;
  border-bottom: 1px solid #89acc2;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}
@media print, screen and (max-width: 768px) {
  .l-footer-nav {
    display: none;
  }
}
.l-footer-nav a {
  color: #fff;
  font-size: 1.4rem;
}
.l-footer-nav__list > li {
  position: relative;
  padding-left: 1em;
}
.l-footer-nav__list > li::before {
  content: "|";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 200;
  margin: auto;
  color: #fff;
  font-size: 1em;
}
.l-footer-nav__list > li + li {
  margin-top: 1rem;
}
.l-footer-nav__list > ul {
  display: grid;
  font-size: 1.4rem;
  grid-template-columns: repeat(2, max-content);
  margin-top: 0.7rem;
}
.l-footer-nav__list > ul > li {
  position: relative;
  padding-left: 1em;
  margin-right: 3rem;
}
.l-footer-nav__list > ul > li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 1em;
  margin: auto;
  color: #fff;
  font-size: 0.5em;
}
.l-footer-nav__list > ul > li > a {
  font-weight: 400;
}
.l-footer__foot {
  padding-top: 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: 400;
}
@media print, screen and (max-width: 768px) {
  .l-footer__foot {
    display: block;
    text-align: center;
    border-top: 1px solid #89acc2;
  }
}
.l-footer__foot > .links > a {
  display: block;
  color: #fff;
}
@media print, screen and (max-width: 768px) {
  .l-footer__foot > .links > a {
    margin-bottom: 1rem;
  }
}

/* ====================================================
entry
==================================================== */
.l-entry {
  height: 47rem;
  background-image: url(../img/recruit/home/entry_bg.jpg);
  background-size: cover;
  padding: 2rem 0;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .l-entry {
    height: 30rem;
    padding: 2rem;
    background-position: left -16rem center;
  }
}
.l-entry__en {
  position: absolute;
  left: 2rem;
  top: 1rem;
  width: 40rem;
}
@media print, screen and (max-width: 768px) {
  .l-entry__en {
    width: 15rem;
  }
}
.l-entry__en > img {
  width: 100%;
}
.l-entry__title.c-title--xl > .en {
  color: #fff;
  display: inline-block;
}
.l-entry__title.c-title--xl > .en::first-letter {
  color: #fff;
}
.l-entry__title.c-title--xl > .ja {
  color: #fff;
}
.l-entry__wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
}
.l-entry__textarea {
  margin-left: auto;
}

/* ====================================================
mv
==================================================== */
.l-mv {
  padding-top: 14rem;
  overflow: hidden;
}
@media print, screen and (max-width: 768px) {
  .l-mv {
    padding-top: 10rem;
  }
}
.l-mv__title {
  padding-left: 14rem;
  line-height: 1;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .l-mv__title {
    padding-left: 2rem;
  }
}
.l-mv__title > .en {
  color: #0055af;
  font-size: 9.2rem;
  font-family: "Coda", system-ui;
  font-weight: 400;
  line-height: 1;
  display: block;
}
.l-mv__title > .en::first-letter {
  color: #00d7c5;
}
@media print, screen and (max-width: 768px) {
  .l-mv__title > .en {
    font-size: 4rem;
  }
}
.l-mv__title > .ja {
  color: #0055af;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  display: block;
  margin-top: 2rem;
}
@media print, screen and (max-width: 768px) {
  .l-mv__title > .ja {
    font-size: 1.5rem;
    display: block;
    margin-left: 0;
    margin-top: 1rem;
    padding-bottom: 1rem;
  }
}
.l-mv__img {
  width: 100%;
  margin-top: 9rem;
  clip-path: polygon(26rem 0, 100% 0, 100% 100%, 0 100%, 0 10rem);
}
@media print, screen and (max-width: 768px) {
  .l-mv__img {
    aspect-ratio: 5 / 2;
    overflow: hidden;
    width: 100%;
    margin-top: 1rem;
    clip-path: polygon(16rem 0, 100% 0, 100% 100%, 0 100%, 0 5rem);
  }
  .l-mv__img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
.l-mv__category {
  background-image: url(../img/consulting/water/mv.jpg);
  background-size: cover;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  height: 29rem;
  margin-top: 4rem;
  padding-left: 4rem;
}
@media print, screen and (max-width: 768px) {
  .l-mv__category {
    height: 22rem;
    padding-left: 2rem;
    margin-top: 2rem;
    background-position: center;
  }
}
.l-mv__category > .label {
  color: #fff;
  font-size: 4rem;
  padding: 0.2em 1em;
  line-height: 1.4;
  background: linear-gradient(139.61deg, #3191cd 2.57%, #24bd82 94.37%);
}
@media print, screen and (max-width: 768px) {
  .l-mv__category > .label {
    font-size: 2.8rem;
    padding: 0.2em 0.5em;
  }
}

/* ====================================================
sec
==================================================== */
.l-sec {
  margin: 10rem 0;
}
@media print, screen and (max-width: 768px) {
  .l-sec {
    margin: 8rem 0;
  }
}

.l-sec-in {
  padding: 10rem 0;
}
@media print, screen and (max-width: 768px) {
  .l-sec-in {
    padding: 8rem 0;
  }
}

.l-media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}
@media print, screen and (max-width: 768px) {
  .l-media {
    gap: 2rem;
    grid-template-columns: repeat(1, 1fr);
  }
}
@media print, screen and (max-width: 768px) {
  .l-media > figure {
    aspect-ratio: 5 / 3;
  }
  .l-media > figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.l-media-imgfull {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4rem;
}
.l-media-imgfull.img-left > figure {
  margin-left: calc(50% - 50vw);
}
@media print, screen and (max-width: 768px) {
  .l-media-imgfull.img-left > figure {
    margin-left: 0;
  }
}
@media print, screen and (max-width: 768px) {
  .l-media-imgfull {
    gap: 2rem;
  }
}
.l-media-imgfull > figure {
  width: calc(100% + (100vw - 100rem) / 2);
}
@media print, screen and (max-width: 768px) {
  .l-media-imgfull > figure {
    aspect-ratio: 5 / 3;
    width: 100%;
  }
  .l-media-imgfull > figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

/* ====================================================
bg
==================================================== */
.recruit-child {
  background-color: #f1fcff;
}

.l-bg-blue {
  background-color: #f1fcff;
}

.l-bg-gradblue {
  background: linear-gradient(90deg, rgba(92, 155, 255, 0.1) 0%, rgba(67, 239, 255, 0.1) 100%);
}

.l-bg-fix {
  position: fixed;
}

.l-bgcircle {
  position: absolute;
  border-radius: 50%;
}

/* 共通 */
.l-bgcircle::before,
.l-bgcircle::after {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  filter: blur(3rem);
}

/* gradient1 */
.l-bgcircle::before {
  background: radial-gradient(circle at 30% 30%, #4fa9ff 0%, #1fa4f7 35%, #5bd8d8 60%, #21e59a 100%);
  animation: gradientMove1 5s ease-in-out infinite;
}

/* gradient2 */
.l-bgcircle::after {
  background: radial-gradient(circle at 70% 70%, #33e0b0 0%, #64c7ff 40%, #3fbfff 70%, #7bb8ff 100%);
  animation: gradientMove2 10s ease-in-out infinite;
}

@keyframes gradientMove1 {
  0% {
    background-position: 10% 10%;
    transform: translate(-4rem, -3rem) scale(1);
  }
  25% {
    background-position: 80% 30%;
    transform: translate(5rem, -1rem) scale(1.4);
  }
  50% {
    background-position: 90% 80%;
    transform: translate(3rem, 4rem) scale(1.2);
  }
  75% {
    background-position: 30% 70%;
    transform: translate(-4rem, 3rem) scale(1.45);
  }
  100% {
    background-position: 40% 90%;
    transform: translate(-2rem, -4rem) scale(1.1);
  }
}
@keyframes gradientMove2 {
  0% {
    background-position: 80% 80%;
    transform: translate(4rem, 3rem) scale(1.4);
  }
  25% {
    background-position: 20% 60%;
    transform: translate(-5rem, 1rem) scale(1.1);
  }
  50% {
    background-position: 30% 30%;
    transform: translate(-3rem, -4rem) scale(1.3);
  }
  75% {
    background-position: 70% 20%;
    transform: translate(4rem, -2rem) scale(1.45);
  }
  100% {
    background-position: 70% 10%;
    transform: translate(2rem, 4rem) scale(1.2);
  }
}
body {
  font-size: 1.8rem;
  font-weight: 400;
}
@media print, screen and (max-width: 768px) {
  body {
    font-size: 1.5rem;
  }
}

/* -----------------------------------------------
home
----------------------------------------------- */
.home-bgcircle-wrap01 {
  overflow: hidden;
  position: relative;
}
.home-bgcircle-wrap01 > .circle01 {
  right: 2rem;
  top: 80rem;
  width: 8rem;
  height: 8rem;
  z-index: 2;
  opacity: 0.8;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap01 > .circle01 {
    width: 5rem;
    height: 5rem;
    right: 2rem;
    top: 30rem;
  }
}
.home-bgcircle-wrap01 > .circle02 {
  right: -24rem;
  top: 80rem;
  width: 30rem;
  height: 30rem;
  z-index: 1;
  opacity: 0.4;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap01 > .circle02 {
    width: 12rem;
    height: 12rem;
    right: -10rem;
    top: 50rem;
  }
}
.home-bgcircle-wrap01 > .circle03 {
  left: -2rem;
  bottom: 80rem;
  z-index: 1;
  opacity: 0.8;
  width: 6rem;
  height: 6rem;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap01 > .circle03 {
    width: 4cqmin;
    height: 4rem;
    bottom: 96rem;
  }
}
.home-bgcircle-wrap01 > .circle04 {
  left: -15rem;
  bottom: 12rem;
  z-index: 1;
  opacity: 0.4;
  width: 30rem;
  height: 30rem;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap01 > .circle04 {
    left: -5rem;
    bottom: 22rem;
    width: 10rem;
    height: 10rem;
  }
}
.home-bgcircle-wrap01 > .circle05 {
  right: 0;
  bottom: 72rem;
  z-index: 1;
  opacity: 0.8;
  width: 10rem;
  height: 10rem;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap01 > .circle05 {
    display: none;
  }
}
.home-bgcircle-wrap02 {
  overflow: hidden;
  position: relative;
}
.home-bgcircle-wrap02 > .circle01 {
  right: -5rem;
  top: 30rem;
  width: 10rem;
  height: 10rem;
  z-index: 2;
  opacity: 0.4;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap02 > .circle01 {
    width: 5rem;
    height: 5rem;
    right: 0;
  }
}
.home-bgcircle-wrap02 > .circle02 {
  left: -15rem;
  top: 60rem;
  width: 30rem;
  height: 30rem;
  z-index: 1;
  opacity: 0.4;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap02 > .circle02 {
    width: 15rem;
    height: 15rem;
    left: -10rem;
    top: 90rem;
  }
}
.home-bgcircle-wrap03 {
  overflow: hidden;
  position: relative;
}
.home-bgcircle-wrap03 > .circle01 {
  right: 10rem;
  top: -5rem;
  width: 10rem;
  height: 10rem;
  z-index: 2;
  opacity: 0.8;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap03 > .circle01 {
    top: -2rem;
    width: 3rem;
    height: 3rem;
  }
}
.home-bgcircle-wrap03 > .circle02 {
  right: -15rem;
  top: 0rem;
  width: 30rem;
  height: 30rem;
  z-index: 1;
  opacity: 0.4;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap03 > .circle02 {
    right: -10rem;
    width: 15rem;
    height: 15rem;
    opacity: 0.3;
  }
}
.home-bgcircle-wrap03 > .circle03 {
  left: -5rem;
  bottom: 20rem;
  width: 10rem;
  height: 10rem;
  z-index: 2;
  opacity: 0.8;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap03 > .circle03 {
    bottom: 0rem;
    width: 3rem;
    height: 3rem;
  }
}
.home-bgcircle-wrap03 > .circle04 {
  left: -15rem;
  bottom: -15rem;
  width: 30rem;
  height: 30rem;
  z-index: 1;
  opacity: 0.4;
}
@media print, screen and (max-width: 768px) {
  .home-bgcircle-wrap03 > .circle04 {
    left: -5rem;
    bottom: -5rem;
    width: 15rem;
    height: 15rem;
  }
}
.home-mv {
  position: relative;
  z-index: 3;
}
.home-mv__title {
  position: absolute;
  bottom: 6rem;
  left: 4rem;
  width: 64.2rem;
  z-index: 2;
}
@media print, screen and (max-width: 768px) {
  .home-mv__title {
    left: 2rem;
    width: 35rem;
    bottom: 0;
  }
}
.home-mv::after {
  position: absolute;
  content: "";
  left: auto;
  right: 10rem;
  top: auto;
  bottom: 5rem;
  margin: auto;
  background-image: url(../img/recruit/home/mv_deco.png);
  background-size: cover;
  width: 5.4rem;
  height: 5.4rem;
}
@media print, screen and (max-width: 768px) {
  .home-mv::after {
    width: 2rem;
    height: 2rem;
    right: 2rem;
  }
}
.home-mv::before {
  position: absolute;
  content: "";
  left: 4rem;
  right: auto;
  top: auto;
  bottom: 0rem;
  margin: auto;
  background-image: url(../img/recruit/home/mv_deco.png);
  background-size: cover;
  width: 5.4rem;
  height: 5.4rem;
}
@media print, screen and (max-width: 768px) {
  .home-mv::before {
    width: 2rem;
    height: 2rem;
    left: 2rem;
  }
}
.home-slider {
  overflow: hidden;
  visibility: hidden;
  /* 中央だけ大きく */
}
.home-slider .slick-track {
  display: flex;
  align-items: center;
}
.home-slider .slick-slide {
  float: none;
  margin-top: 18rem;
}
@media print, screen and (max-width: 768px) {
  .home-slider .slick-slide {
    margin-top: 14rem;
    margin-left: 6rem;
    margin-right: -6rem;
  }
}
.home-slider .slick-slide:has(+ .slick-center) {
  margin-right: 5rem;
  margin-left: -5rem;
}
@media print, screen and (max-width: 768px) {
  .home-slider .slick-slide:has(+ .slick-center) {
    margin-right: 0;
    margin-left: 0;
  }
}
.home-slider.slick-initialized {
  visibility: visible;
}
.home-slider .slick-list {
  height: 72rem;
}
@media print, screen and (max-width: 768px) {
  .home-slider .slick-list {
    height: 44rem;
  }
}
.home-slider__img {
  transform: translateX(0);
}
.home-slider__img img {
  width: 75%;
  margin: auto;
  transition: all 0.4s;
  transform: scale(1.6) translateY(0);
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .home-slider__img img {
    transform: scale(1) translateY(0);
    width: 100%;
  }
}
.home-slider .slick-center img {
  width: 100%;
  z-index: 2;
  transform: scale(2);
}
@media print, screen and (max-width: 768px) {
  .home-slider .slick-center img {
    margin: 0 0 0 0rem;
  }
}
@media print, screen and (max-width: 768px) {
  .home-slider .slick-center {
    margin-right: 0;
    margin-left: 0;
  }
}
.home-slider .slick-center + .slick-active {
  margin-left: 5rem;
  margin-right: -5rem;
}
@media print, screen and (max-width: 768px) {
  .home-slider .slick-center + .slick-active {
    margin-left: 0;
    margin-right: 0;
  }
}
.home-lead {
  position: relative;
  padding-top: 10rem;
  z-index: 3;
}
@media print, screen and (max-width: 768px) {
  .home-lead {
    padding-top: 6rem;
  }
}
.home-lead__wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 5rem;
}
@media print, screen and (max-width: 768px) {
  .home-lead__wrap {
    padding: 0 2rem;
    gap: 2rem;
  }
}
.home-lead__wrap > figure {
  flex: 1;
}
@media print, screen and (max-width: 768px) {
  .home-lead__wrap > figure {
    flex: auto;
    order: 2;
    text-align: center;
  }
  .home-lead__wrap > figure > img {
    width: 80%;
  }
}
.home-lead__wrap > figcaption {
  flex: 1;
}
@media print, screen and (max-width: 768px) {
  .home-lead__wrap > figcaption {
    flex: auto;
    order: 1;
  }
}
.home-lead__wrap > figcaption > p {
  margin-top: 3rem;
}
.home-forward {
  position: relative;
  z-index: 2;
  padding-bottom: 35.5rem;
  background-image: url(../img/recruit/home/wave_bg.svg), url(../img/recruit/home/logo_bg.svg);
  background-size: 100% auto, 80rem auto;
  background-position: center bottom, right bottom -6rem;
  background-repeat: no-repeat;
}
@media print, screen and (max-width: 768px) {
  .home-forward {
    background-size: 100% auto, 30rem auto;
    background-position: center bottom -1rem, right bottom -2rem;
    padding-bottom: 14rem;
    padding-top: 5rem;
  }
}
.home-forward__txt {
  font-size: 3.6rem;
  line-height: 1.6;
  margin: 3rem 0 4rem;
}
@media print, screen and (max-width: 768px) {
  .home-forward__txt {
    font-size: 3rem;
  }
}
.home-forward__txt > span {
  font-size: 0.8em;
}
.home-forward__wrap {
  position: relative;
  height: 53.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media print, screen and (max-width: 768px) {
  .home-forward__wrap {
    height: auto;
  }
}
.home-forward__wrap > figure {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 2rem;
  width: 73rem;
}
@media print, screen and (max-width: 768px) {
  .home-forward__wrap > figure {
    width: 80%;
    right: 0;
    position: relative;
    margin-left: auto;
    margin-top: -4rem;
  }
}
@media print, screen and (max-width: 768px) {
  .home-design {
    margin-top: 3rem;
  }
}
.home-design__head {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}
.home-design__head > .txt {
  font-size: 2.2rem;
  margin-left: auto;
}
@media print, screen and (max-width: 768px) {
  .home-design__head > .txt {
    font-size: 1.8rem;
    margin-left: 0;
    margin-top: 2rem;
  }
}
.home-design__head > .txt em {
  font-size: 1.5em;
  color: #0055af;
  background-color: #eafffa;
}
@media print, screen and (max-width: 768px) {
  .home-design__head > .txt em {
    font-size: 1.3em;
  }
}
.home-design__list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5rem;
  padding: 6rem 0;
  margin-top: 6rem;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .home-design__list {
    gap: 2rem;
    padding: 4rem 0;
    margin-top: 4rem;
  }
}
.home-design__list::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../img/recruit/common/note.png);
  background-size: 1.5rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-repeat: repeat;
}
.home-design__item {
  flex: 1;
  display: block;
  padding-top: 28rem;
  position: relative;
  overflow: hidden;
}
@media print, screen and (max-width: 768px) {
  .home-design__item {
    flex: auto;
    padding-top: 15rem;
  }
}
.home-design__item::before {
  transition: transform 0.6s ease;
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.home-design__item:hover {
  opacity: 1;
}
.home-design__item:hover::before {
  transform: scale(1.1);
}
.home-design__item:nth-child(1)::before {
  background-image: url(../img/recruit/home/design_img01.jpg);
}
.home-design__item:nth-child(1) > .textarea {
  background-image: url(../img/recruit/common/linkbg-blue.png);
}
.home-design__item:nth-child(2)::before {
  background-image: url(../img/recruit/home/design_img02.jpg);
}
.home-design__item:nth-child(2) > .textarea {
  background-image: url(../img/recruit/common/linkbg-green.png);
}
.home-design__item > .textarea {
  padding: 2.2rem 2.5rem;
  color: #fff;
  font-size: 2.6rem;
  line-height: 1.5;
  background-size: cover;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .home-design__item > .textarea {
    padding: 1.5rem 1.5rem;
    font-size: 1.5rem;
  }
}
.home-design__item > .textarea::after {
  position: absolute;
  content: "";
  left: auto;
  right: 1.5rem;
  top: auto;
  bottom: 1.5rem;
  margin: auto;
  background-image: url(../img/recruit/common/icon-arrow-white.svg);
  background-size: cover;
  width: 4rem;
  height: 4rem;
}
@media print, screen and (max-width: 768px) {
  .home-design__item > .textarea::after {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.home-design__item > .textarea > em {
  display: block;
  font-size: 1.4em;
  font-weight: 500;
}
.home-interview {
  padding: 10rem 0;
  z-index: 3;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .home-interview {
    padding: 6rem 0;
  }
}
.home-interview__head {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}
.home-interview__head > a {
  margin-left: auto;
}
.home-interview__grid {
  padding: 0 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  margin-top: 4rem;
}
@media print, screen and (max-width: 768px) {
  .home-interview__grid {
    margin-top: 0;
    display: block;
    padding: 0 0;
  }
}
.home-career {
  background-image: url(../img/recruit/home/career_bg.jpg);
  background-size: cover;
  width: calc(100% - 10rem);
  margin: auto;
  text-align: center;
  border-radius: 1.3rem;
  padding: 8rem 2rem;
  z-index: 3;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .home-career {
    width: 100%;
    padding: 6rem 2rem;
    border-radius: 0;
  }
}
.home-career__title {
  display: block;
  text-align: center;
  margin: auto;
  color: #fff;
  padding-top: 0;
  font-size: 4.6rem;
}
@media print, screen and (max-width: 768px) {
  .home-career__title {
    font-size: 3rem;
    line-height: 1.5;
  }
}
.home-career__title > .line {
  display: inline-block;
  position: relative;
  padding-bottom: 0.5em;
}
.home-career__title > .line::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  margin: auto;
  background-image: url(../img/recruit/home/career_pen.svg);
  width: 29rem;
  height: 2.9rem;
  background-size: cover;
}
@media print, screen and (max-width: 768px) {
  .home-career__title > .line::after {
    width: 20rem;
    height: 2rem;
  }
}
.home-career__btn {
  margin: 4rem auto 0;
}
@media print, screen and (max-width: 768px) {
  .home-career__btn {
    margin: 3rem auto 0;
  }
}
.home-envi {
  background: url(../img/recruit/common/noise.png), linear-gradient(90deg, #5c9bff 0%, #43efff 100%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
  padding: 8rem 0 10rem;
  margin-top: 13rem;
  position: relative;
  z-index: 2;
}
@media print, screen and (max-width: 768px) {
  .home-envi {
    padding: 6rem 0 6rem;
    margin-top: 0;
  }
}
.home-envi__head {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}
.home-envi__head > a {
  margin-left: auto;
}
.home-envi--deco01 {
  position: absolute;
  top: -3rem;
  left: 0;
  width: 100%;
}
@media print, screen and (max-width: 768px) {
  .home-envi--deco01 {
    display: none;
  }
}
.home-envi--deco01 > img {
  width: 100%;
}
.home-envi--deco02 {
  position: absolute;
  bottom: -3rem;
  left: 2rem;
  width: 47rem;
}
@media print, screen and (max-width: 768px) {
  .home-envi--deco02 {
    display: none;
  }
}
.home-envi--deco02 > img {
  width: 100%;
}
.home-envi .home-envi__title > .en {
  color: #fff;
}
.home-envi .home-envi__title > .en::first-letter {
  color: #fff;
}
.home-envi .home-envi__title > .ja {
  color: #fff;
}
.home-envi__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 8rem;
  margin-top: 4rem;
  text-align: center;
}
@media print, screen and (max-width: 768px) {
  .home-envi__list {
    gap: 2rem;
    margin-top: 2rem;
  }
}
.home-envi__item {
  background-color: #fff;
  border-radius: 50%;
  width: 27.5rem;
  height: 27.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1rem;
}
@media print, screen and (max-width: 768px) {
  .home-envi__item {
    width: 18rem;
    height: 18rem;
  }
}
.home-envi__item > figure {
  width: 10rem;
}
@media print, screen and (max-width: 768px) {
  .home-envi__item > figure {
    width: 6rem;
  }
}
.home-envi__item > figcaption {
  color: #0055af;
  font-size: 2rem;
  font-weight: 500;
}
@media print, screen and (max-width: 768px) {
  .home-envi__item > figcaption {
    font-size: 1.5rem;
  }
}
.home-qa {
  background-color: #e4f7fd;
  padding: 12rem 0 10rem;
  position: relative;
  z-index: 1;
}
@media print, screen and (max-width: 768px) {
  .home-qa {
    padding: 6rem 0 6rem;
  }
}
.home-qa__title {
  text-align: center;
  margin: auto;
}
.home-qa__main {
  margin-top: 6rem;
}
@media print, screen and (max-width: 768px) {
  .home-qa__main {
    margin-top: 3rem;
  }
}
.home-qa__wrap {
  position: relative;
  z-index: 2;
}
.home-job {
  background-image: url(../img/recruit/home/job_bg.jpg);
  background-size: cover;
  padding: 7rem 0 8rem;
  position: relative;
  margin-bottom: 20rem;
}
@media print, screen and (max-width: 768px) {
  .home-job {
    margin-bottom: 10rem;
  }
}
.home-job__wrap {
  gap: 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.home-job__wrap > figcaption {
  flex: 1;
}
@media print, screen and (max-width: 768px) {
  .home-job__wrap > figcaption {
    flex: auto;
  }
}
.home-job__wrap > figure {
  flex: 1.5;
}
@media print, screen and (max-width: 768px) {
  .home-job__wrap > figure {
    flex: auto;
  }
}
.home-job .home-job__title {
  position: relative;
}
.home-job .home-job__title > .en {
  color: #fff;
}
.home-job .home-job__title > .en::first-letter {
  color: #fff;
}
.home-job .home-job__title > .ja {
  color: #fff;
  position: absolute;
  top: 1em;
  left: 8em;
}
.home-job__txt {
  width: 80%;
  margin: 1.5rem auto 0;
}
.home-job__txt > img {
  width: 100%;
}
.home-job__btn {
  position: absolute;
  bottom: -3rem;
  left: 0;
  right: 0;
}
.home-job__btn > a {
  margin: auto;
}

/* -----------------------------------------------
page
----------------------------------------------- */
.page-bgcircle {
  position: fixed;
  z-index: -1;
  height: 100vh;
  width: 100vw;
}
.page-bgcircle > .circle01 {
  right: 2rem;
  top: -4rem;
  width: 15rem;
  height: 15rem;
  opacity: 0.4;
}
@media print, screen and (max-width: 768px) {
  .page-bgcircle > .circle01 {
    width: 5rem;
    height: 5rem;
    right: 2rem;
    top: 30rem;
  }
}
.page-bgcircle > .circle02 {
  right: 12rem;
  top: 4rem;
  width: 5rem;
  height: 5rem;
  opacity: 0.4;
}
@media print, screen and (max-width: 768px) {
  .page-bgcircle > .circle02 {
    width: 12rem;
    height: 12rem;
    right: -10rem;
    top: 50rem;
  }
}
.page-bgcircle > .circle03 {
  left: -15rem;
  bottom: 0;
  opacity: 0.2;
  width: 30rem;
  height: 30rem;
}
@media print, screen and (max-width: 768px) {
  .page-bgcircle > .circle03 {
    width: 4cqmin;
    height: 4rem;
    bottom: 96rem;
  }
}

/* -----------------------------------------------
design
----------------------------------------------- */
.design-sec.consul02 {
  margin-top: -15rem;
}
@media print, screen and (max-width: 768px) {
  .design-sec.consul02 {
    margin-top: 0;
  }
}
.design-leader {
  z-index: 2;
  position: relative;
}
.design-leader > .title {
  font-size: 3.8rem;
  color: #fff;
  display: inline-block;
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
  padding-left: 14rem;
  max-width: 51rem;
  width: 100%;
  position: absolute;
  bottom: -4rem;
}
@media print, screen and (max-width: 768px) {
  .design-leader > .title {
    font-size: 2.6rem;
    padding: 0 2rem;
    bottom: 0;
    max-width: auto;
    width: fit-content;
  }
}
.consul01 .design-leader > .title {
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
}
.consul02 .design-leader > .title {
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #008ddf 4.27%, #00f4e3 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
}
@media print, screen and (max-width: 768px) {
  .design-leader > figure {
    aspect-ratio: 5 / 2;
  }
  .design-leader > figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
.consul01 .design-leader > figure {
  clip-path: polygon(0 0, calc(100% - 26rem) 0, 100% 10rem, 100% 100%, 0 100%);
}
@media print, screen and (max-width: 768px) {
  .consul01 .design-leader > figure {
    clip-path: polygon(0 0, calc(100% - 16rem) 0, 100% 5rem, 100% 100%, 0 100%);
  }
}
.consul02 .design-leader > figure {
  clip-path: polygon(26rem 0, 100% 0, 100% 100%, 0 100%, 0 10rem);
}
@media print, screen and (max-width: 768px) {
  .consul02 .design-leader > figure {
    clip-path: polygon(16rem 0, 100% 0, 100% 100%, 0 100%, 0 5rem);
  }
}
.design-main {
  padding: 12rem 0 15rem;
  background-image: url(../img/recruit/design/note_bg.png);
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: cover;
}
@media print, screen and (max-width: 768px) {
  .design-main {
    padding: 5rem 0 5rem;
  }
}
.consul01 .design-main {
  padding: 12rem 0 32rem;
}
@media print, screen and (max-width: 768px) {
  .consul01 .design-main {
    padding: 5rem 0 5rem;
  }
}
.design-consul {
  padding-top: 10rem;
}
@media print, screen and (max-width: 768px) {
  .design-consul {
    padding-top: 4rem;
  }
}
.design-consul__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 5.6rem;
}
@media print, screen and (max-width: 768px) {
  .design-consul__list {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 3rem;
  }
}
.design-consul__item {
  display: block;
  position: relative;
  overflow: hidden;
}
.design-consul__item > a::before {
  transition: transform 0.6s ease;
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
.design-consul__item > a:hover {
  opacity: 1;
}
.design-consul__item > a:hover::before {
  transform: scale(1.1);
}
.design-consul__item.water > a::before {
  background-image: url(../img/recruit/design/consul-water.jpg);
}
.design-consul__item.sewer > a::before {
  background-image: url(../img/recruit/design/consul-sewer.jpg);
}
.design-consul__item.civil > a::before {
  background-image: url(../img/recruit/design/consul-civil.jpg);
}
.design-consul__item.survey > a::before {
  background-image: url(../img/recruit/design/consul-survey.jpg);
}
.design-consul__item.hydro > a::before {
  background-image: url(../img/recruit/design/consul-hydro.jpg);
}
.design-consul__item.longevity > a::before {
  background-image: url(../img/recruit/design/consul-longevity.jpg);
}
.design-consul__item.disaster > a::before {
  background-image: url(../img/recruit/design/consul-disaster.jpg);
}
.design-consul__item.geosoil > a::before {
  background-image: url(../img/recruit/design/consul-geosoil.jpg);
}
.design-consul__item.ict > a::before {
  background-image: url(../img/recruit/design/consul-ict.jpg);
}
.design-consul__item > a {
  display: block;
  color: #fff;
  padding-top: 18rem;
}
@media print, screen and (max-width: 768px) {
  .design-consul__item > a {
    padding-top: 14rem;
  }
}
.design-consul__item > a > p {
  padding: 1.5rem;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .design-consul__item > a > p {
    padding: 0.5rem 1.5rem;
  }
}
.design-consul__item > a > p::after {
  position: absolute;
  content: "";
  left: auto;
  right: 1rem;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../img/recruit/common/icon-arrow-white.svg);
  background-size: cover;
  width: 2.5rem;
  height: 2.5rem;
}
@media print, screen and (max-width: 768px) {
  .design-consul__item > a > p::after {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.consul01 .design-consul__item > a > p {
  background-image: url(../img/recruit/common/linkbg-blue.png);
}
.consul02 .design-consul__item > a > p {
  background-image: url(../img/recruit/common/linkbg-green.png);
}

/* -----------------------------------------------
environment
----------------------------------------------- */
.env__list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 5rem;
  margin-top: 5rem;
}
@media print, screen and (max-width: 768px) {
  .env__list {
    gap: 3rem;
    margin-top: 3rem;
  }
}
.env__item {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 4rem;
  align-items: center;
}
@media print, screen and (max-width: 768px) {
  .env__item {
    gap: 2rem;
    align-items: flex-start;
    grid-template-columns: 8rem 1fr;
  }
}

/* -----------------------------------------------
forward
----------------------------------------------- */
.forward-strong {
  margin-top: 15rem;
}
@media print, screen and (max-width: 768px) {
  .forward-strong {
    margin-top: 3rem;
  }
}
.forward-strong__head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media print, screen and (max-width: 768px) {
  .forward-strong__head {
    grid-template-columns: repeat(1, 1fr);
    padding-bottom: 6rem;
  }
}
.forward-strong__head::after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  margin: auto;
  content: "+";
  color: #0055af;
  font-weight: 500;
  font-size: 10rem;
  text-align: center;
  line-height: 1;
}
@media print, screen and (max-width: 768px) {
  .forward-strong__head::after {
    font-size: 6rem;
  }
}
.forward-strong__head > li {
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 37rem;
}
@media print, screen and (max-width: 768px) {
  .forward-strong__head > li {
    height: 36rem;
    padding-bottom: 2rem;
    flex-direction: column;
  }
  .forward-strong__head > li + li {
    margin-top: -4rem;
  }
}
.forward-strong__head > li:nth-child(1), .forward-strong__head > li:nth-child(3) {
  margin-top: 12rem;
}
@media print, screen and (max-width: 768px) {
  .forward-strong__head > li:nth-child(1), .forward-strong__head > li:nth-child(3) {
    margin-top: 0;
  }
}
@media print, screen and (max-width: 768px) {
  .forward-strong__head > li:nth-child(3) {
    margin-top: -4rem;
  }
}
.forward-strong__head > li::after {
  border-radius: 50%;
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -5%;
  width: 37rem;
  height: 37rem;
  background: linear-gradient(264.12deg, rgba(28, 169, 245, 0.2) 4.48%, rgba(45, 126, 255, 0.2) 100%);
}
@media print, screen and (max-width: 768px) {
  .forward-strong__head > li::after {
    width: 36rem;
    height: 36rem;
    left: 0;
  }
}
.forward-strong__head > li > figcaption {
  width: 80%;
  padding-top: 2rem;
}
@media print, screen and (max-width: 768px) {
  .forward-strong__head > li > figcaption {
    width: 60%;
    padding-top: 0;
  }
}
.forward-strong__head > li > figure {
  position: absolute;
  top: -4rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 11rem;
  font-size: 1.5rem;
}
@media print, screen and (max-width: 768px) {
  .forward-strong__head > li > figure {
    width: 8rem;
    position: static;
    margin-bottom: 1rem;
  }
}
.forward-strong__foot {
  background-color: #fff;
  padding: 6rem;
  margin-top: 6rem;
}
@media print, screen and (max-width: 768px) {
  .forward-strong__foot {
    padding: 2.5rem 2rem;
    margin-top: 3rem;
  }
}
.forward-strong__foot > .title {
  text-align: center;
  font-size: 2.8rem;
  color: #0055af;
  margin-bottom: 2rem;
}
@media print, screen and (max-width: 768px) {
  .forward-strong__foot > .title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}
.forward-strong__foot > figure {
  margin: 2rem auto 0;
  width: 80%;
}
@media print, screen and (max-width: 768px) {
  .forward-strong__foot > figure {
    width: 100%;
  }
}
.forward-goal {
  background-image: url(../img/recruit/forward/goal_bg.png);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
}
.forward-goal__wrap {
  margin-top: 7rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  align-items: center;
}
@media print, screen and (max-width: 768px) {
  .forward-goal__wrap {
    margin-top: 3rem;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }
}
.forward-goal__wrap > figure {
  position: relative;
  z-index: 2;
}
.forward-goal__wrap > figcaption {
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #0055af;
  color: #0055af;
  font-size: 2.6rem;
  width: 41rem;
  height: 41rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media print, screen and (max-width: 768px) {
  .forward-goal__wrap > figcaption {
    width: 28rem;
    height: 28rem;
    margin: -2rem auto;
    font-size: 1.8rem;
    z-index: 1;
  }
}

/* -----------------------------------------------
career
----------------------------------------------- */
.career-head {
  background-image: url(../img/recruit/career/head_bg.png);
  background-position: right top;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
.career-head__wrap {
  display: grid;
  grid-template-columns: 46rem 1fr;
  gap: 5rem;
}
@media print, screen and (max-width: 768px) {
  .career-head__wrap {
    grid-template-columns: repeat(1, 1fr);
    gap: 3rem;
  }
}
.career-head__wrap > figcaption > .title {
  font-size: 3.2rem;
  color: #0055af;
  margin-bottom: 3rem;
}
@media print, screen and (max-width: 768px) {
  .career-head__wrap > figcaption > .title {
    font-size: 2.2rem;
    margin-bottom: 2rem;
  }
}
.career-head__wrap > figure {
  width: calc(100% + (100vw - 100rem) / 2);
  height: 70rem;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .career-head__wrap > figure {
    width: 100%;
    height: 40rem;
  }
}
.career-head__wrap > figure > div {
  position: absolute;
}
.career-head__wrap > figure > div:nth-child(1) {
  top: 0;
  left: 0;
  width: 24rem;
  z-index: 2;
}
@media print, screen and (max-width: 768px) {
  .career-head__wrap > figure > div:nth-child(1) {
    width: 15rem;
  }
}
.career-head__wrap > figure > div:nth-child(2) {
  top: 2rem;
  right: 0;
  width: 43rem;
  z-index: 1;
}
@media print, screen and (max-width: 768px) {
  .career-head__wrap > figure > div:nth-child(2) {
    width: 28rem;
  }
}
.career-head__wrap > figure > div:nth-child(3) {
  bottom: 0;
  left: 4rem;
  width: 26rem;
  z-index: 2;
}
@media print, screen and (max-width: 768px) {
  .career-head__wrap > figure > div:nth-child(3) {
    width: 18rem;
  }
}
.career-message {
  background-image: url(../img/recruit/career/message_bg.jpg);
  background-size: cover;
  background-position: bottom center;
  color: #fff;
}
.career-message__txt {
  width: fit-content;
  margin-left: auto;
  line-height: 2.4;
}

/* -----------------------------------------------
interview
----------------------------------------------- */
.interview01,
.interview02,
.interview03 {
  background-image: url(../img/recruit/interview/body_bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.interview-person {
  position: relative;
  margin-top: -7rem;
}
@media print, screen and (max-width: 768px) {
  .interview-person {
    margin-top: 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}
.interview-person > figcaption {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  top: 12rem;
  left: 14rem;
  height: fit-content;
  z-index: 2;
}
@media print, screen and (max-width: 768px) {
  .interview-person > figcaption {
    position: static;
    order: 2;
    width: 100%;
    margin-top: -7rem;
  }
}
.interview-person > figcaption > .catch > span {
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
  color: #fff;
  display: inline-block;
  font-size: 3rem;
  font-weight: 600;
  margin-top: 1rem;
  padding: 0 0.8em;
}
@media print, screen and (max-width: 768px) {
  .interview-person > figcaption > .catch > span {
    font-size: 1.8rem;
  }
}
.interview-person > figcaption > .catch > span + span {
  margin-top: 1rem;
}
.interview-person > figcaption > .info {
  font-weight: 600;
  margin-top: 5rem;
  padding-left: 4rem;
  line-height: 1.7;
}
@media print, screen and (max-width: 768px) {
  .interview-person > figcaption > .info {
    padding-left: 2rem;
    font-size: 1.4rem;
    margin-top: 1rem;
  }
}
.interview-person > figcaption > .info > em {
  color: #0055af;
  font-size: 2em;
}
@media print, screen and (max-width: 768px) {
  .interview-person > figcaption > .info > em {
    font-size: 1.4em;
  }
}
.interview-person > figure {
  width: 78rem;
  margin-left: auto;
  margin-top: 0;
  clip-path: polygon(26rem 0, 100% 0, 100% 100%, 0 100%, 0 20rem);
}
@media print, screen and (max-width: 768px) {
  .interview-person > figure {
    width: 90%;
    height: 26rem;
    clip-path: polygon(10rem 0, 100% 0, 100% 100%, 0 100%, 0 10rem);
  }
}
.interview-message .c-title--xl > .en {
  font-size: 7rem;
}
@media print, screen and (max-width: 768px) {
  .interview-message .c-title--xl > .en {
    font-size: 4rem;
  }
}
.interview-message .c-title--xl > .ja {
  font-size: 2rem;
}
@media print, screen and (max-width: 768px) {
  .interview-message .c-title--xl > .ja {
    font-size: 1.5rem;
  }
}
.interview-message::after {
  position: absolute;
  content: "";
  left: 0;
  right: auto;
  top: auto;
  bottom: 0;
  margin: auto;
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
  z-index: -1;
  height: 90%;
  width: calc(100% - 10rem);
  clip-path: polygon(59rem 0, 100% 0, 100% 100%, 0 100%, 0 8rem, 54rem 8rem);
}
@media print, screen and (max-width: 768px) {
  .interview-message::after {
    clip-path: none;
    width: 100%;
    height: auto;
    background: none;
  }
}
.interview-message__wrap {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem;
  position: relative;
  margin-top: 0;
  padding-bottom: 8rem;
}
@media print, screen and (max-width: 768px) {
  .interview-message__wrap {
    margin-top: 0;
    gap: 0;
    padding-bottom: 0;
    grid-template-columns: repeat(1, 1fr);
  }
}
.interview-message__wrap > figcaption {
  color: #fff;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .interview-message__wrap > figcaption {
    margin-top: 2rem;
  }
  .interview-message__wrap > figcaption > div {
    position: relative;
    z-index: 2;
    padding: 2rem 0 7rem;
  }
  .interview-message__wrap > figcaption::after {
    position: absolute;
    content: "";
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    margin: auto;
    background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
    background-repeat: repeat, no-repeat;
    background-size: 10rem, cover;
    background-blend-mode: soft-light;
    width: 100vw;
    height: 100%;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    width: 100vw;
  }
}
.interview-message__wrap > figure {
  width: calc(100% + (100vw - 100rem) / 2);
}
@media print, screen and (max-width: 768px) {
  .interview-message__wrap > figure {
    width: 100%;
    margin-top: -4rem;
    z-index: 3;
  }
}
.interview-links {
  margin-top: 0;
}
.interview-links__grid {
  padding: 0 4rem;
  width: 70%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  margin-top: 4rem;
}
@media print, screen and (max-width: 768px) {
  .interview-links__grid {
    margin-top: 0;
    display: block;
    padding: 0 0;
    width: 100%;
  }
}

/* -----------------------------------------------
entry
----------------------------------------------- */
.entry__contact {
  background-color: #fff;
  padding: 4rem 4rem;
  margin-top: 6rem;
}
@media print, screen and (max-width: 768px) {
  .entry__contact {
    padding: 2rem 2rem 3rem;
    margin-top: 3rem;
  }
}
.entry__table tbody th {
  width: 20%;
}
@media print, screen and (max-width: 768px) {
  .entry__table tbody th {
    width: 30%;
  }
}

.entry--btn {
  display: inline-block;
  transform: skewX(-12deg);
  max-width: 24rem;
  width: 100%;
  position: relative;
  background: linear-gradient(264.12deg, #1ca5f5 4.48%, #00ccf9 100%);
}
@media print, screen and (max-width: 768px) {
  .entry--btn {
    max-width: 26rem;
  }
}
.entry--btn::after {
  position: absolute;
  content: "";
  left: auto;
  right: 2rem;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../img/recruit/common/icon-arrow-blue.svg);
  background-size: cover;
  width: 2em;
  height: 2em;
  transform: skewX(12deg);
}
@media print, screen and (max-width: 768px) {
  .entry--btn::after {
    width: 1.5em;
    height: 1.5em;
  }
}
.entry--btn input {
  background: transparent;
  transform: skewX(12deg);
  color: #fff;
  border: none;
  width: 100%;
  padding: 1.2em 4em 1.2em 2em;
}

input[type="submit" i]:disabled {
  background: transparent;
}

/* ====================================================
component
==================================================== */
.c-title--xl {
  padding-left: 5.2rem;
  position: relative;
  padding-top: 1rem;
  display: block;
  width: fit-content;
}
@media print, screen and (max-width: 768px) {
  .c-title--xl {
    padding-left: 3rem;
  }
}
.c-title--xl.deco--green::after {
  background-image: url(../img/recruit/home/title_deco-green.svg);
}
.c-title--xl::after {
  position: absolute;
  content: "";
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  margin: auto;
  width: 5.4rem;
  height: 6rem;
  background-image: url(../img/recruit/home/title_deco-blue.svg);
  background-size: cover;
}
@media print, screen and (max-width: 768px) {
  .c-title--xl::after {
    width: 2.7rem;
    height: 3rem;
  }
}
.c-title--xl > .en {
  font-size: 9.2rem;
  color: #0055af;
  display: block;
  line-height: 1;
  font-family: "Coda", system-ui;
}
@media print, screen and (max-width: 768px) {
  .c-title--xl > .en {
    font-size: 4rem;
  }
}
.c-title--xl > .en::first-letter {
  color: #00d7c5;
}
.c-title--xl > .ja {
  font-size: 2.6rem;
}
@media print, screen and (max-width: 768px) {
  .c-title--xl > .ja {
    font-size: 1.8rem;
  }
}
.c-title--lg {
  color: #0055af;
  font-size: 3.2rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  line-height: 1.8;
}
@media print, screen and (max-width: 768px) {
  .c-title--lg {
    font-size: 2.4rem;
  }
}
.c-title--sm {
  font-size: 2.4rem;
  font-weight: 600;
}
@media print, screen and (max-width: 768px) {
  .c-title--sm {
    font-size: 2rem;
  }
}
.c-title--cover {
  padding: 0.2em 0.5em;
  font-size: 1.8rem;
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
  color: #fff;
  display: inline-block;
}

.c-heading-line {
  display: flex;
  align-items: center;
  font-size: 2.6rem;
  font-weight: 600;
  color: #0055af;
}
@media print, screen and (max-width: 768px) {
  .c-heading-line {
    font-size: 2rem;
  }
}
.c-heading-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #0055af;
  margin-left: 1.6rem;
}
.c-heading-line__q {
  margin-right: 0.8rem;
  color: #00d7c5;
  font-size: 1.2em;
  font-weight: 400;
}

.c-btn--lg {
  max-width: 42rem;
}
@media print, screen and (max-width: 768px) {
  .c-btn--lg {
    max-width: 35rem;
  }
}
.c-btn--md {
  max-width: 33rem;
}
@media print, screen and (max-width: 768px) {
  .c-btn--md {
    max-width: 25rem;
  }
}
.c-btn--inblue {
  display: block;
  line-height: 1.3;
  font-family: "Lato", sans-serif;
  color: #135984;
  font-weight: 400;
  text-align: center;
  background: #ffffff;
  border: 1px solid #135984;
  box-shadow: inset 0px 0px 5.9px 5px rgba(52, 144, 192, 0.46);
  border-radius: 5px;
  padding: 2rem;
}
@media print, screen and (max-width: 768px) {
  .c-btn--inblue {
    padding: 1.5rem;
  }
}
.c-btn--inblue:hover {
  opacity: 1;
  background-color: #135984;
  color: #ffffff;
}
.c-btn--grad {
  display: block;
  line-height: 1.3;
  text-align: center;
  display: block;
  color: #ffffff;
  background: linear-gradient(264.12deg, #1ca5f5 4.48%, #00ccf9 100%);
  padding: 1.2em 4em 1.2em 2em;
  font-weight: 500;
  transform: skewX(-12deg);
  position: relative;
}
.c-btn--grad::after {
  position: absolute;
  content: "";
  left: auto;
  right: 2rem;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../img/recruit/common/icon-arrow-blue.svg);
  background-size: cover;
  width: 2em;
  height: 2em;
  transform: skewX(12deg);
}
@media print, screen and (max-width: 768px) {
  .c-btn--grad::after {
    width: 1.5em;
    height: 1.5em;
  }
}
.c-btn--grad > span {
  display: block;
  transform: skewX(12deg);
}
@media print, screen and (max-width: 768px) {
  .c-btn--grad {
    padding: 1.5rem;
  }
}
.c-btn--orange {
  background-color: #ff7f00;
  display: block;
  line-height: 1.3;
  text-align: left;
  display: block;
  color: #ffffff;
  padding: 1.2em 4em 1.2em 2em;
  font-weight: 500;
  transform: skewX(-12deg);
  position: relative;
}
.c-btn--orange::after {
  position: absolute;
  content: "";
  left: auto;
  right: 2rem;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../img/recruit/common/icon-arrow-whor.svg);
  background-size: cover;
  width: 2em;
  transform: skewX(12deg);
  height: 2em;
}
@media print, screen and (max-width: 768px) {
  .c-btn--orange::after {
    width: 1.5em;
    height: 1.5em;
  }
}
.c-btn--orange > span {
  display: block;
  transform: skewX(12deg);
}
@media print, screen and (max-width: 768px) {
  .c-btn--orange {
    padding: 1.5rem;
  }
}

.c-link-arrow {
  display: flex;
  align-items: center;
}
.c-link-arrow__text {
  display: inline-block;
  color: #0055af;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.6em;
  line-height: 1.8;
  margin-right: 2rem;
}
.c-link-arrow__icon {
  width: 2em;
  display: inline-block;
  transition: all 0.8s ease;
}
.c-link-arrow__icon > img {
  width: 100%;
}
.c-link-arrow:hover {
  opacity: 1;
}
.c-link-arrow:hover .c-link-arrow__icon {
  transform: translateX(1rem);
}

/* ====================================================
list
==================================================== */
.c-list--square {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-list--square li {
  position: relative;
  padding-left: 1.2em;
}
.c-list--square li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6em;
  height: 0.6em;
  background-color: #4fb3a7;
  /* 画像に近い青緑 */
}
.c-list--square li + li {
  margin-top: 0.2em;
}

/* ====================================================
parts
==================================================== */
.c-bg-cut {
  background-size: cover;
  background-position: center;
  clip-path: polygon(6rem 0, 100% 0, 100% 100%, 0 100%, 0 6rem);
}

/* ====================================================
project
==================================================== */
/* -----------------------------------------------
inner
----------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .p-inner--pc {
    width: 100rem;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 900px) and (min-width: 768px) {
  .p-inner--pc {
    width: 100%;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
@media print, screen and (max-width: 768px) {
  .p-inner--sp {
    width: 100%;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}
/* -----------------------------------------------
p-faq
----------------------------------------------- */
.p-faq {
  background-color: #fff;
  cursor: pointer;
  margin-top: 2rem;
}
@media (prefers-reduced-motion: no-preference) {
  .p-faq::details-content {
    overflow: clip;
    transition-duration: 300ms;
    transition-property: content-visibility, block-size;
    transition-behavior: allow-discrete;
  }
}
.p-faq:not(:open)::details-content {
  block-size: 0;
}
.p-faq[open] > summary > span {
  transform: rotate(180deg);
}
.p-faq > summary {
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  flex-wrap: nowrap;
}
.p-faq > summary::before {
  position: absolute;
  content: "Q.";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: relative;
  margin: 0 0.5em 0 0;
  color: #0055af;
  font-size: 1.5em;
  line-height: 1;
  font-family: "Coda", system-ui;
}
.p-faq > summary > span {
  position: relative;
  margin-left: auto;
  transition: all 0.3s ease;
}
.p-faq > summary > span::before, .p-faq > summary > span::after {
  content: "";
  position: absolute;
  top: 0.2em;
  margin: auto;
  bottom: 0;
  width: 15px;
  height: 2px;
  background: #1f5fa8;
}
@media print, screen and (max-width: 768px) {
  .p-faq > summary > span::before, .p-faq > summary > span::after {
    width: 1rem;
  }
}
.p-faq > summary > span::before {
  left: 60%;
  transform: translateX(-100%) rotate(45deg);
  transform-origin: right center;
}
.p-faq > summary > span::after {
  left: 60%;
  transform: rotate(-45deg);
  transform-origin: left center;
}
.p-faq > p {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 0 2rem 1.5rem;
  font-weight: 400;
}
.p-faq > p::before {
  line-height: 1;
  position: absolute;
  content: "A.";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: relative;
  color: #00d7c5;
  font-size: 1.5em;
  margin: 0 2rem 0 0;
  font-family: "Coda", system-ui;
}

/* -----------------------------------------------
table
----------------------------------------------- */
.p-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8em;
}
@media print, screen and (max-width: 768px) {
  .p-table {
    font-size: 1.4rem;
  }
}
.p-table th,
.p-table td {
  padding: 1rem 1.5rem;
  border: 1px solid #dbe0e2;
  vertical-align: top;
}
.p-table th.c-cell-blue,
.p-table td.c-cell-blue {
  background-color: #0055af;
  border: 1px solid #fff;
  color: #fff;
}
.p-table th {
  background: #e7f7f1;
  font-weight: 600;
  font-family: "Noto Serif JP", serif;
}
.p-table td {
  background: #fff;
}
.p-table__label {
  margin: 0 0 0.8rem;
  color: #4fb7b1;
  font-weight: 600;
}

/* -----------------------------------------------
p-head
----------------------------------------------- */
.p-head__title {
  font-size: 3.2rem;
  margin-bottom: 3rem;
}
@media print, screen and (max-width: 768px) {
  .p-head__title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
}
.p-head__title > em {
  font-size: 1.2em;
  color: #0055af;
  background-color: #fff;
  display: inline-block;
}
@media print, screen and (max-width: 768px) {
  .p-head__title > em {
    font-size: 1em;
  }
}

/* -----------------------------------------------
p-example
----------------------------------------------- */
.p-example {
  background-color: #fff;
  padding: 3rem;
  margin-top: 4rem;
}
@media print, screen and (max-width: 768px) {
  .p-example {
    padding: 2rem;
  }
}
.p-example__title {
  font-size: 2rem;
  color: #0055af;
  line-height: 1.5;
}
@media print, screen and (max-width: 768px) {
  .p-example__title {
    font-size: 1.8rem;
  }
}
.p-example__title > span {
  font-size: 0.7em;
  color: #00d7c5;
}
.p-example__flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
  margin-top: 3rem;
}
@media print, screen and (max-width: 768px) {
  .p-example__flow {
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
  }
}
.p-example__flow > li {
  background-color: #eafffa;
  padding: 2rem;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .p-example__flow > li {
    display: grid;
    align-items: center;
    grid-template-columns: 4rem 1fr;
    padding: 1rem;
    gap: 1rem;
  }
}
.p-example__flow > li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2.8rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1.5rem solid #0055af;
}
@media print, screen and (max-width: 768px) {
  .p-example__flow > li::after {
    right: 0;
    left: 0;
    margin: auto;
    bottom: -6rem;
    transform: none;
    border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;
    border-top: 1.2rem solid #0055af;
  }
}
.p-example__flow > li:last-child::after {
  display: none;
}
.p-example__flow > li > .num {
  position: absolute;
  font-size: 3rem;
  color: #00d7c5;
  top: 1.5rem;
  left: 1.5rem;
  line-height: 1;
}
@media print, screen and (max-width: 768px) {
  .p-example__flow > li > .num {
    font-size: 2rem;
    top: -1rem;
    left: 1rem;
  }
}
.p-example__flow > li > figure {
  width: 6rem;
  margin: 0 auto 2rem;
}
@media print, screen and (max-width: 768px) {
  .p-example__flow > li > figure {
    width: 100%;
    margin: 0;
  }
}
.p-example__flow > li > figcaption {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
}

/* -----------------------------------------------
p-tab
----------------------------------------------- */
.p-tab {
  border-bottom: 1px solid #0055af;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem;
  padding: 0 2rem;
  margin-bottom: 5rem;
  font-size: 2.4rem;
}
@media print, screen and (max-width: 768px) {
  .p-tab {
    margin-bottom: 3rem;
    font-size: 1.8rem;
    gap: 2rem;
    font-size: 2rem;
  }
}
.p-tab .p-tab--active {
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
  color: #fff;
  padding: 0.3em 1em;
}
.p-tab > li {
  border: 1px solid #0055af;
  border-bottom: none;
  text-align: center;
  cursor: pointer;
  background-color: #f1fcff;
  padding: 0.3em 1em;
  display: block;
  color: #0055af;
  transition: all 0.4s ease;
}
.p-tab > li:hover {
  opacity: 1;
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
  color: #fff;
}

.p-tab-content {
  display: none;
}
.p-tab-content.is-active {
  display: block;
}

/* -----------------------------------------------
p-interview
----------------------------------------------- */
.p-interview-card {
  position: relative;
  display: block;
  transition: all 0.3s ease;
}
@media print, screen and (max-width: 768px) {
  .p-interview-card {
    margin-bottom: 4rem;
  }
}
@media print, screen and (min-width: 768px) {
  .p-interview-card:hover {
    opacity: 1;
    transform: scale(1.05);
  }
  .p-interview-card:hover .p-interview-card__head::after {
    right: 5rem;
  }
}
.p-interview-card--left {
  margin-top: 5rem;
}
@media print, screen and (max-width: 768px) {
  .p-interview-card--left {
    margin-top: 0;
  }
}
.p-interview-card--right {
  margin-top: 7rem;
}
@media print, screen and (max-width: 768px) {
  .p-interview-card--right {
    margin-top: 0;
  }
}
.p-interview-card:nth-child(1) .p-interview-card__label, .p-interview-card:nth-child(3) .p-interview-card__label {
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #1ca9f5 4.27%, #2d7eff 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
}
.p-interview-card:nth-child(2) .p-interview-card__label {
  background: url(../img/recruit/common/noise.png), linear-gradient(263.27deg, #008ddf 4.27%, #00f4e3 95.31%);
  background-repeat: repeat, no-repeat;
  background-size: 10rem, cover;
  background-blend-mode: soft-light;
}
.p-interview-card__head {
  position: relative;
  padding-bottom: 5rem;
}
@media print, screen and (max-width: 768px) {
  .p-interview-card__head {
    padding-bottom: 0;
  }
}
.p-interview-card__head::after {
  transition: all 0.3s ease;
  position: absolute;
  content: "";
  left: auto;
  right: 2rem;
  top: 2rem;
  bottom: auto;
  margin: auto;
  width: 24rem;
  height: 29rem;
  margin: auto;
  background: linear-gradient(139.61deg, #0055af 2.57%, #00d7c5 94.37%);
  background-size: cover;
  z-index: 1;
  transform: skewX(-13deg);
}
@media print, screen and (max-width: 768px) {
  .p-interview-card__head::after {
    display: none;
  }
}
.p-interview-card__head > figure {
  z-index: 2;
  position: relative;
}
@media print, screen and (max-width: 768px) {
  .p-interview-card__head > figure {
    width: 60%;
  }
}
.p-interview-card__label {
  position: absolute;
  bottom: 0;
  left: 5rem;
  color: #fff;
  padding: 1.5rem 2rem;
  line-height: 1.6;
  transform: skewX(-12deg);
  font-size: 1.8rem;
  z-index: 2;
  width: 24rem;
}
@media print, screen and (max-width: 768px) {
  .p-interview-card__label {
    top: 2rem;
    right: 0;
    bottom: auto;
    left: auto;
    font-size: 1.5rem;
    width: 19rem;
  }
}
.p-interview-card__label > span {
  transform: skewX(12deg);
  display: block;
}
.p-interview-card__text {
  margin-top: 1rem;
  font-size: 1.2rem;
  line-height: 1.8;
  margin-left: 7.5rem;
  color: #1c1c1c;
}
@media print, screen and (max-width: 768px) {
  .p-interview-card__text {
    margin-top: 0;
    margin-left: 0;
    width: 47%;
    margin-left: auto;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

/* ====================================================
flex
==================================================== */
.u-fl {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.u-fl.ai-str {
  align-items: stretch;
}
.u-fl.ai-cen {
  align-items: center;
}
.u-fl.jc-cen {
  justify-content: center;
}
.u-fl .fl-item1 {
  flex: 1;
}
.u-fl .fl-item2 {
  flex: 2;
}
@media print, screen and (max-width: 768px) {
  .u-fl .u-item-auto-sp {
    flex: auto;
  }
}

.u-od2 {
  order: 2;
}

@media print, screen and (max-width: 768px) {
  .u-od0-sp {
    order: 0;
  }

  .u-od2-sp {
    order: 2;
  }
}
.u-fl-col2 {
  flex-wrap: wrap;
}

.u-fl-col2 > * {
  width: 50%;
}

.u-fl-col2.gap {
  gap: 5rem;
}

.u-fl-col2.gap > * {
  width: calc(50% - 2.5rem);
}

@media print, screen and (max-width: 768px) {
  .u-fl-col2.u-fl-block_sp > * {
    width: 100%;
  }

  .u-fl-col2.gap.u-fl-block_sp > * {
    margin-bottom: 0;
  }

  .u-fl_sp-col2 > * {
    width: 50%;
  }

  .u-fl_sp-col2.gap {
    gap: 2rem;
  }

  .u-fl_sp-col2.gap > * {
    width: calc(50% - 1rem);
  }
}
/* ====================================================
font
==================================================== */
.u-ft-serif {
  font-family: "Noto Serif JP", serif;
}

.u-ft-coda {
  font-family: "Coda", system-ui;
}

.u-text-xxs {
  font-size: 0.4em;
}

.u-text-xs {
  font-size: 0.5em;
}

.u-text-sm {
  font-size: 0.75em;
}

.u-text-md {
  font-size: 1em;
}

.u-text-lg {
  font-size: 1.25em;
}

.u-left {
  text-align: left;
}

.u-right {
  text-align: right;
}

.u-center {
  text-align: center;
}

/* ====================================================
font-size
==================================================== */
.u-fs12 {
  font-size: 1.2rem;
}

.u-fs13 {
  font-size: 1.3rem;
}

.u-fs14 {
  font-size: 1.4rem;
}

.u-fs15 {
  font-size: 1.5rem;
}

.u-fs16 {
  font-size: 1.6rem;
}

.u-fs17 {
  font-size: 1.7rem;
}

.u-fs18 {
  font-size: 1.8rem;
}

.u-fs19 {
  font-size: 1.9rem;
}

.u-fs20 {
  font-size: 2rem;
}

.u-fs20 {
  font-size: 2rem;
}

.u-fs22 {
  font-size: 2.2rem;
}

.u-fs30 {
  font-size: 3rem;
}

.u-fs40 {
  font-size: 4rem;
}

@media print, screen and (max-width: 768px) {
  .u-fs10-sp {
    font-size: 1rem;
  }

  .u-fs11-sp {
    font-size: 1.1rem;
  }

  .u-fs12-sp {
    font-size: 1.2rem;
  }

  .u-fs13-sp {
    font-size: 1.3rem;
  }

  .u-fs14-sp {
    font-size: 1.4rem;
  }

  .u-fs15-sp {
    font-size: 1.5rem;
  }

  .u-fs16-sp {
    font-size: 1.6rem;
  }

  .u-fs17-sp {
    font-size: 1.7rem;
  }

  .u-fs18-sp {
    font-size: 1.8rem;
  }

  .u-fs19-sp {
    font-size: 1.9rem;
  }

  .u-fs20-sp {
    font-size: 2rem;
  }
}
/* ====================================================
bg
==================================================== */
.u-bg-aqua {
  background-color: #e4f7fd;
}

/* ====================================================
color
==================================================== */
.u-txtc--blue {
  color: #135984;
}

.u-txtc--org {
  color: #ec613a;
}

.u-txtc--rec-blue {
  color: #0055af;
}

/* ====================================================
list
==================================================== */
.u-list-dot {
  list-style: disc;
  padding-left: 1.5em;
}

/* ====================================================
padding
==================================================== */
.u-pl10 {
  padding-left: 1rem;
}

.u-pl20 {
  padding-left: 2rem;
}

.u-pl30 {
  padding-left: 3rem;
}

.u-pl40 {
  padding-left: 4rem;
}

.u-pl50 {
  padding-left: 5rem;
}

.u-pl60 {
  padding-left: 6rem;
}

.u-pl70 {
  padding-left: 7rem;
}

@media print, screen and (max-width: 768px) {
  .u-pl0-sp {
    padding-left: 0rem;
  }

  .u-pl10-sp {
    padding-left: 1rem;
  }

  .u-pl20-sp {
    padding-left: 2rem;
  }
}
/* ====================================================
width
==================================================== */
.u-wi100p {
  width: 100%;
}

@media print, screen and (max-width: 768px) {
  .u-full-sp {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    width: 100vw;
  }
}
/* ====================================================
margin
==================================================== */
.u-mt10 {
  margin-top: 1rem;
}

.u-mt20 {
  margin-top: 2rem;
}

.u-mt30 {
  margin-top: 3rem;
}

.u-mt40 {
  margin-top: 4rem;
}

.u-mt50 {
  margin-top: 5rem;
}

.u-mt60 {
  margin-top: 6rem;
}

.u-mt70 {
  margin-top: 7rem;
}

.u-mt80 {
  margin-top: 8rem;
}

.u-mt90 {
  margin-top: 9rem;
}

.u-mt100 {
  margin-top: 8rem;
}

.u-mlr-auto {
  margin-left: auto;
  margin-right: auto;
}

@media print, screen and (max-width: 768px) {
  .u-mt10-sp {
    margin-top: 1rem;
  }

  .u-mt20-sp {
    margin-top: 2rem;
  }

  .u-mt30-sp {
    margin-top: 3rem;
  }

  .u-mt40-sp {
    margin-top: 4rem;
  }

  .u-mt50-sp {
    margin-top: 5rem;
  }

  .u-mt60-sp {
    margin-top: 6rem;
  }

  .u-mt70-sp {
    margin-top: 7rem;
  }

  .u-mt80-sp {
    margin-top: 8rem;
  }

  .u-mt90-sp {
    margin-top: 9rem;
  }

  .u-mt100-sp {
    margin-top: 10rem;
  }
}