@charset "UTF-8";
.page__ttl {
  text-align: center;
  margin-top: 90px;
  margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .page__ttl {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}
.page__ttl span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 506px;
  margin-inline: auto;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .page__ttl span {
    width: 48%;
    max-width: 190px;
  }
}
.page__ttl span img {
  width: 100%;
  height: auto;
}
.page__ttl span::after {
  content: "";
  display: flex;
  align-items: center;
  width: 20.5%;
  height: auto;
  aspect-ratio: 65/87;
  background: url(/recruit/assets/images/common/chara01.svg) center center/contain no-repeat;
  position: absolute;
  right: 10%;
  top: 50%;
  z-index: 1;
  margin: auto;
  animation: float-bobbing 3s ease-in-out infinite;
}
@media only screen and (max-width: 767px) {
  .page__ttl span::after {
    width: 21%;
  }
}

.page__read {
  text-align: center;
  margin-bottom: 90px;
}
.page__read span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", sans-serif;
  font-size: clamp(1.5rem, 2.2222222222vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: #000000;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #000000;
}
@media only screen and (max-width: 767px) {
  .page__read span {
    font-size: 16px;
  }
}

.section__box {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", sans-serif;
  padding-block: 90px;
}
@media only screen and (max-width: 767px) {
  .section__box {
    padding-block: 0 145px;
  }
}
.section__box .section__inner .sec__ttl {
  padding: 90px 5%;
  margin-bottom: 90px;
}
@media only screen and (max-width: 767px) {
  .section__box .section__inner .sec__ttl {
    padding: 25px 5% 125px;
  }
}
.section__box .section__inner .sec__ttl .ttl__inner {
  width: 90%;
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: end;
  gap: 30px;
  /*
  .year__box {
      display: grid;
      grid-template-columns: max-content 1fr;
      align-items: baseline;
      font-weight: 700;
      line-height: 1;
      color: $white;
      gap: 14px;
      .no {
          font-size: function.size(196);
          line-height: 1cap;
      }
      .vertical {
          writing-mode: vertical-rl;
          margin-bottom: -10px;

          > span {
              font-size: function.size(46);
          }
      }
  }
      */
}
.section__box .section__inner .sec__ttl .ttl__inner .ttl__text {
  font-size: clamp(1.59375rem, 2.3611111111vw, 2.125rem);
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
  margin-block: calc((1em - 1lh) / 2);
  text-box-trim: trim-both;
  text-box-edge: text;
}
@media only screen and (max-width: 767px) {
  .section__box .section__inner .sec__ttl .ttl__inner .ttl__text {
    font-size: 20px;
  }
}
.section__box .section__inner .grid__box {
  width: 90%;
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  grid-auto-rows: auto;
}
@media only screen and (max-width: 767px) {
  .section__box .section__inner .grid__box {
    display: block;
  }
}
.section__box .section__inner .grid__box li {
  background: #ffffff;
  border-radius: 20px;
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
  border: 2px solid #000000;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .section__box .section__inner .grid__box li + li {
    margin-top: 60px;
  }
}
.section__box .section__inner .grid__box li .list__ttl {
  background-image: repeating-linear-gradient(90deg, #000000, #000000 4px, transparent 4px, transparent 8px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 2px;
  padding: 32px 24px;
  position: relative;
  font-size: clamp(1.875rem, 2.7777777778vw, 2.5rem);
  font-weight: 700;
  line-height: 1cap;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .section__box .section__inner .grid__box li .list__ttl {
    font-size: 20px;
  }
}
.section__box .section__inner .grid__box li .list__ttl:has(.terms) {
  padding-top: 56px;
}
.section__box .section__inner .grid__box li .list__ttl .terms {
  min-width: 130px;
  text-align: center;
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  border: 2px solid #000000;
  border-top: none;
  padding: 5px 15px;
  background: #40bbf0;
  border-radius: 0 0 10px 10px;
  font-size: clamp(0.75rem, 1.1111111111vw, 1rem);
  font-weight: 700;
  line-height: 1cap;
  color: #ffffff;
  padding: 10px 20px;
}
.section__box .section__inner .grid__box li .list__ttl .alias {
  font-size: clamp(1.03125rem, 1.5277777778vw, 1.375rem);
}
.section__box .section__inner .grid__box li .text__box {
  padding: 24px;
}
.section__box .section__inner .grid__box li .text__box p {
  font-size: clamp(0.75rem, 1.0416666667vw, 0.9375rem);
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .section__box .section__inner .grid__box li .text__box p {
    font-size: 14px;
  }
}
.section__box.sec__step01 .section__inner .sec__ttl {
  background: #fcee21 url("/recruit/assets/images/support/step01_kanji01.svg") no-repeat right center/50% auto;
}
@media only screen and (max-width: 767px) {
  .section__box.sec__step01 .section__inner .sec__ttl {
    background: #fcee21 url("/recruit/assets/images/support/step01_kanji01.svg") no-repeat left 15% bottom/auto 100px;
    position: relative;
  }
  .section__box.sec__step01 .section__inner .sec__ttl::before {
    position: absolute;
    inset: 0 10% -80px auto;
    margin: auto;
    content: "";
    display: inline-block;
    background: url("/recruit/assets/images/support/step01_image01.svg") center center/contain no-repeat;
    aspect-ratio: 109/196;
    width: auto;
    height: 185px;
  }
}
.section__box.sec__step01 .section__inner .sec__ttl .ttl__inner {
  position: relative;
}
.section__box.sec__step01 .section__inner .sec__ttl .ttl__inner::before {
  position: absolute;
  inset: 0 10% 0 auto;
  margin: auto;
  content: "";
  display: inline-block;
  background: url("/recruit/assets/images/support/step01_image01.svg") center center/contain no-repeat;
  aspect-ratio: 109/196;
  width: auto;
  height: 320%;
}
@media only screen and (max-width: 767px) {
  .section__box.sec__step01 .section__inner .sec__ttl .ttl__inner::before {
    display: none;
  }
}
.section__box.sec__step01 .section__inner .sec__ttl .ttl__inner .ttl__text {
  color: #000000;
}
.section__box.sec__step01 .section__inner .grid__box li .list__ttl {
  background-color: #fcee21;
  color: #000000;
}
.section__box.sec__step02 .section__inner .sec__ttl {
  background: #40bbf0 url("/recruit/assets/images/support/step02_kanji01.svg") no-repeat right center/50% auto;
}
@media only screen and (max-width: 767px) {
  .section__box.sec__step02 .section__inner .sec__ttl {
    background: #40bbf0 url("/recruit/assets/images/support/step02_kanji01.svg") no-repeat left 15% bottom/auto 100px;
    position: relative;
  }
  .section__box.sec__step02 .section__inner .sec__ttl::before {
    position: absolute;
    inset: 0 10% -80px auto;
    margin: auto;
    content: "";
    display: inline-block;
    background: url("/recruit/assets/images/support/step02_image01.svg") center center/contain no-repeat;
    aspect-ratio: 175/394;
    width: auto;
    height: 165px;
  }
}
.section__box.sec__step02 .section__inner .sec__ttl .ttl__inner {
  position: relative;
}
.section__box.sec__step02 .section__inner .sec__ttl .ttl__inner::before {
  position: absolute;
  inset: 0 10% 0 auto;
  margin: auto;
  content: "";
  display: inline-block;
  background: url("/recruit/assets/images/support/step02_image01.svg") center center/contain no-repeat;
  aspect-ratio: 175/394;
  width: auto;
  height: 320%;
}
@media only screen and (max-width: 767px) {
  .section__box.sec__step02 .section__inner .sec__ttl .ttl__inner::before {
    display: none;
  }
}
.section__box.sec__step02 .section__inner .grid__box li .list__ttl {
  background-color: #40bbf0;
}
.section__box.sec__step03 {
  padding-bottom: 200px;
}
@media only screen and (max-width: 767px) {
  .section__box.sec__step03 {
    padding-bottom: 136px;
  }
}
.section__box.sec__step03 .section__inner .sec__ttl {
  background: #2a79c3 url("/recruit/assets/images/support/step03_kanji01.svg") no-repeat right center/50% auto;
}
@media only screen and (max-width: 767px) {
  .section__box.sec__step03 .section__inner .sec__ttl {
    background: #2a79c3 url("/recruit/assets/images/support/step03_kanji01.svg") no-repeat left 15% bottom/auto 100px;
    position: relative;
  }
  .section__box.sec__step03 .section__inner .sec__ttl::before {
    position: absolute;
    inset: 0 10% -50px auto;
    margin: auto;
    content: "";
    display: inline-block;
    background: url("/recruit/assets/images/support/step03_image01.svg") center center/contain no-repeat;
    aspect-ratio: 253/387;
    width: auto;
    height: 205px;
  }
}
.section__box.sec__step03 .section__inner .sec__ttl .ttl__inner {
  position: relative;
}
.section__box.sec__step03 .section__inner .sec__ttl .ttl__inner::before {
  position: absolute;
  inset: 0 10% 0 auto;
  margin: auto;
  content: "";
  display: inline-block;
  background: url("/recruit/assets/images/support/step03_image01.svg") center center/contain no-repeat;
  aspect-ratio: 253/387;
  width: auto;
  height: 320%;
}
@media only screen and (max-width: 767px) {
  .section__box.sec__step03 .section__inner .sec__ttl .ttl__inner::before {
    display: none;
  }
}
.section__box.sec__step03 .section__inner .grid__box li .list__ttl {
  background-color: #2a79c3;
}

@keyframes float-bobbing {
  0%, 100% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(-80%);
  }
}