@charset "utf-8";

/* ------------------------------------
 * sofybe/recruit
 * --------------------------------- */

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

:lang(ja) :is(body, button, input, optgroup, select, textarea),
:lang(ja)[data-script-enabled="true"] :is(body, button, input, optgroup, select, textarea),
:lang(ja)[data-webfont-loaded="true"] :is(body, button, input, optgroup, select, textarea),
:lang(ja)[data-webfont-loaded="false"] :is(body, button, input, optgroup, select, textarea) {
  font-family: "Noto Sans JP", sans-serif;
}

body {
  overflow-x: clip;
  font-family: "Noto Sans JP", sans-serif;

}

:root {
  --sofybe-recruit-black-01: #242828;
  --sofybe-recruit-white-01: #fff;
  --root-font-size: 10;
  --rem: 1rem / var(--root-font-size);
}

/* ------------------------------------
 * Header
 * --------------------------------- */

/* ソフィBeとほぼ共通 */
.uc-page-header .uc-header-site {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 19.5px;
  background: transparent;
}

.uc-lyt-container.uc-header-site .uc-lyt-row {
  padding: 0
}

.uc-lyt-container.uc-header-site .uc-lyt-row .uc-header-logo {
  padding: 0 11px 4.25px 1px;
}

.uc-page-header .uc-header-logo .uc-mod-media-01 {
  width: 62px;
}


.uc-page-header .uc-header-site .uc-lyt-row {
  padding: 15px 0;
}

.uc-page-header:has(.uc-header-site.no-fix-header) {
  position: static;
}

@media screen and (min-width: 769px) {
  .uc-page-header .uc-header-site {
    right: 0;
    left: 0;
    max-width: 1420px;
    padding: 10px;
    margin: 0 auto;
  }

  .uc-lyt-container.uc-header-site .uc-lyt-row .uc-header-logo {
    padding: 10px 11px 5.75px 1px;
  }

  .uc-page-header .uc-header-logo .uc-mod-media-01 {
    width: 80px;
  }

  .sofybe-tab-content-item .uc-mod-media-01 {
    max-width: 335px;
  }
}

/* ------------------------------------
 * Body
 * --------------------------------- */

/* heading */

.CMP-CM09-heading:has(>.primary-none) {
  height: 0;
}

.primary-none>* {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
}

.recruit-block {
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/bg_01.png");
  background-repeat: repeat;
  background-position: -5px -7px;
}

.main-kv.uc-mod-media-01 {
  margin-bottom: 36px;
}

.main-kv.uc-mod-media-01 .uc-object img {
  width: 100vw;
}

.intro-image.uc-mod-media-01 {
  padding-inline: 42px 60px;
  margin-block: 10px 7px;
}

/* scene */
.scene-heading-image {
  padding-inline: 35px;
  margin-bottom: 24px;
}

.scene-image.uc-mod-media-01 {
  width: 100vw;
  padding-inline: 6px 0;
  margin: 0 calc(50% - 50vw);
}


/* about */
.about-heading-image {
  padding-inline: 75px;
  margin-bottom: 32px;
}

.about-text {
  font-size: calc(16 * var(--rem));
  font-weight: 500;
  line-height: calc(28 / 16);
  color: var(--sofybe-recruit-black-01);
  text-align: center;
  letter-spacing: normal;
}

.about-sub-text {
  font-size: calc(16 * var(--rem));
  font-weight: 500;
  line-height: calc(28 / 16);
  color: var(--sofybe-recruit-black-01);
  text-align: center;
  letter-spacing: normal;
}

/* カルーセル */
.about-block {
  width: 100%;
  padding: 33.5px 18.5px 32px;
  overflow: hidden;
  background-color: var(--sofybe-recruit-white-01);
  border-radius: 20px;
  box-shadow: 2px 3px 4px rgb(0 0 0 / 10%);
}

.about-slick .slick-track {
  display: flex;
  align-items: stretch;
}

.about-slick.slick-initialized .slick-slide {
  float: none;
  display: flex;
  height: auto;
  padding: 7.5px;
}

.about-slick .slick-slide>.about-block {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.about-slick .slick-prev,
.about-slick .slick-next {
  width: 40px;
  height: 40px;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100%;
  border: none;
}

.about-slick .slick-prev::before,
.about-slick .slick-next::before {
  content: none;
}

.about-slick .slick-prev,
.about-slick .slick-next {
  position: absolute;
  top: 45%;
  z-index: 1;
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/icon-arrow_01.png");
}

.about-slick .slick-prev {
  left: -7px;
  transform: translateY(-50%) scale(-1, 1);
}

.about-slick .slick-next {
  right: -7px;
  transform: translateY(-50%);
}

/* ドット全体 */
.about-slick .slick-dots {
  display: flex;
  gap: 21px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 4px 0 0;
  list-style: none;
}

.about-slick .slick-dots li {
  height: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.about-slick .slick-dots li::marker {
  content: "";
}

/* ドットのボタン */
.about-slick .slick-dots li button {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  background-color: var(--sofybe-recruit-white-01);
  border: none;
  border-radius: 50%;
}

.about-slick .slick-dots li button::before {
  content: none;
}

.about-slick .slick-dots li.slick-active button {
  width: 9px;
  height: 9px;
  background-color: var(--sofybe-recruit-white-01);
}

.about-slick .slick-dots li.slick-active button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  content: "";
  background-color: #b4cfde;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.about-slick .slick-dots,
.about-slick .slick-dots li {
  list-style: none;
}

.about-slick-text-01>* {
  margin-bottom: 10px;
  font-size: calc(18.5 * var(--rem));
  font-weight: 700;
  line-height: calc(60 / 37);
  color: var(--sofybe-recruit-black-01);
  letter-spacing: -0.025em;
}

.about-slick-text-02>* {
  font-size: calc(12.5 * var(--rem));
  font-weight: 400;
  line-height: normal;
  line-height: calc(43 / 25);
  color: var(--sofybe-recruit-black-01);
  text-align: center;
  letter-spacing: -0.025em;
}

.about-slick-image.uc-mod-media-01 {
  padding-inline: 46px;
  margin-bottom: 12px;
}

.about-text-block {
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

.about-slick .slick-prev.slick-disabled,
.about-slick .slick-next.slick-disabled {
  display: none !important;
}

/* use */
.use-heading-image {
  padding-inline: 35px;
  margin-bottom: 12px;
}

.use-text-image.uc-mod-media-01 {
  padding-inline: 17px
}

.use-step-wrap {
  margin-top: -78px;
}

.use-step-wrap>.CMP-CM06-section+.CMP-CM06-section .use-step-block {
  margin-top: -34px;
}

.use-step-wrap>.CMP-CM06-section:not(:last-child) .use-step-block::after {
  position: absolute;
  bottom: -39px;
  left: 50%;
  content: "";
  border-top: 20px solid #fc9a7d;
  border-right: 22px solid transparent;
  border-left: 22px solid transparent;
  transform: translateX(-50%);
}

.use-step-block {
  position: relative;
}

.use-step-image.uc-mod-media-01 {
  position: relative;
  top: 89px;
  left: 0;
  width: 100%;
  max-width: 185px;
  margin-bottom: 0;
}

.use-step-image-01.uc-mod-media-01 {
  left: -6px;
}

.use-step-image-02.uc-mod-media-01 {
  left: 1px;
}

.use-step-image-03.uc-mod-media-01 {
  left: -1px;
}

.use-step-text-block {
  padding: 100px 10px 22.5px;
  background-color: var(--sofybe-recruit-white-01);
  border-radius: 6.6px;
}

.use-step-text-01>* {
  font-size: calc(17.5 * var(--rem));
  font-weight: 700;
  line-height: calc(62.65 / 35);
  color: #fc9a7d;
  letter-spacing: -0.04em;
}

.use-step-text-02>* {
  font-size: calc(12.5 * var(--rem));
  font-weight: 400;
  line-height: calc(44 / 25);
  color: var(--sofybe-recruit-black-01);
  text-align: center;
  letter-spacing: -0.05em;
}

.CMP-CM09-heading:has(>.use-step-heading),
.use-step-text-02 {
  width: 100%;
  max-width: 306px;
  margin-inline: auto;
}

.use-step-heading>* {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}

.use-step-heading span:nth-of-type(1) {
  display: none;
}

.use-step-heading span:nth-of-type(2) {
  display: inline-block;
  margin-bottom: -6px;
}

.use-step-heading span:nth-of-type(2) img {
  width: 100%;
  max-width: 58px;
  margin-top: -12px;
}

/* summary */
.summary-image.uc-mod-media-01 {
  padding-inline: 10px;
  margin-bottom: 15px;
  margin-left: -6px;
}

.summary-text>* {
  font-size: calc(12.5 * var(--rem));
  font-weight: 400;
  line-height: calc(59 / 25);
  color: var(--sofybe-recruit-black-01);
  letter-spacing: 0.07em;
}

/* share */
.share-intro-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-inline: 20px 8px;
  margin-bottom: 19px;
}

.share-intro-heading-image {
  margin-bottom: 14px;
}

.share-intro-image.uc-mod-media-01 {
  position: relative;
  top: 6px;
  left: 1px;
  max-width: 300px;
  margin: 0;
}

.share-intro-text {
  font-size: calc(12.5 * var(--rem));
  font-weight: 400;
  font-feature-settings: "palt";
  line-height: calc(45 / 25);
  color: var(--sofybe-recruit-black-01);
  letter-spacing: -0.03em;
}

.share-button a,
.share-button button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  max-width: 332px;
  padding: 18px 26px 3px 60px;
  margin-inline: auto;
  font-size: calc(17 * var(--rem));
  font-weight: 400;
  line-height: normal;
  color: var(--sofybe-recruit-black-01);
  text-align: center;
  letter-spacing: 0.04em;
  cursor: pointer;
  background-color: var(--sofybe-recruit-white-01);
  border: solid 1px #b4cfde;
  border-radius: 6.5px;
  box-shadow: unset;
}

.share-button a::before,
.share-button button::before {
  position: relative;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
}

.share-button-01 a::before {
  top: -8px;
  left: -41px;
  inline-size: 41.5px;
  block-size: 41.5px;
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/icon-share_01.png");
}

.share-button-02 button::before {
  top: -8px;
  left: -41px;
  inline-size: 41.5px;
  block-size: 41.5px;
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/icon-share_02.png");
}

.share-button a::after,
.share-button button::after {
  position: absolute;
  top: 50%;
  right: 17px;
  width: 8px;
  height: 10px;
  content: "";
  background-color: #323232;
  background-image: unset;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  transform: translateY(-50%);
}

.share-button {
  position: relative;
}

.share-button p::before {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 333px;
  height: 62px;
  content: "";
  background-color: #b4cfde;
  border-radius: 6.5px;
  transform: translateX(calc(-50% + 2px));
}

/* app */
.app-block {
  width: 100%;
  padding: 35px 14px 30px;
  background-color: var(--sofybe-recruit-white-01);
  border-radius: 15px;
  box-shadow: 12px 6px 12px -6px rgb(0 0 0 / 20%);
}

.app-image.uc-mod-media-01 {
  padding-inline: 21px;
  margin-bottom: 22px;
}

.app-text>* {
  font-size: calc(12.5 * var(--rem));
  font-weight: 400;
  line-height: normal;
  color: var(--sofybe-recruit-black-01);
  letter-spacing: -0.02em;
}

.app-text-image.uc-mod-media-01 {
  margin-bottom: 5px;
}

.app-text-image.uc-mod-media-01 img {
  max-width: 50%;
}

.app-button {
  padding-inline: 7.5px;
}

.app-button a {
  position: relative;
  display: inline-block;
  padding: 11.5px 69px 14px 43px;
  overflow: hidden;
  font-size: calc(19 * var(--rem));
  font-weight: 400;
  line-height: normal;
  color: var(--sofybe-recruit-white-01);
  text-align: center;
  letter-spacing: 0.05em;
  background: linear-gradient(to bottom, #ff8b84 0%, #ff7a72 100%);
  border-radius: 32px;
  box-shadow: 0 5px 0 #c9342b;
  isolation: isolate;
}

.app-button a::before {
  position: absolute;
  top: -61px;
  left: 0;
  z-index: 1;
  width: calc(605px / 2);
  height: calc(211px / 2);
  pointer-events: none;
  content: "";
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/image-app-decoration_01_sp.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  mix-blend-mode: screen;
}

.app-button a::after {
  position: absolute;
  right: 24px;
  bottom: 50%;
  z-index: 3;
  display: inline-block;
  width: 18px;
  height: 25px;
  font-size: 0;
  content: "";
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/icon-download_01.png");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: translateY(50%);
}

.app-btn-block {
  display: flex;
}

/* ページTOPボタン（ソフィBeと同じ） */
.fc-sofybe-link-pagetop {
  position: fixed;
  bottom: 105px;
  left: min(calc(100vw - 67.5px), 1440px);
  z-index: 5;
  width: 40px;
  transform: translate(0, 0);
  transition: 1s all;
}

.fc-sofybe-link-pagetop.is-hidden {
  opacity: 0 !important;
}

/* 装飾 */
.marker-01,
.marker-02,
.marker-03 {
  --marker-color: #fddddd;
  --marker-height: 0.72em;
  --marker-space: 0.18em;
  --marker-lift: 0em;

  display: inline;
  padding-inline: 0.32em;
  padding-bottom: var(--marker-space);
  background:
    radial-gradient(circle closest-side,
      var(--marker-color) 99%,
      transparent 100%) left calc(100% - var(--marker-lift)) / var(--marker-height) var(--marker-height) no-repeat,

    radial-gradient(circle closest-side,
      var(--marker-color) 99%,
      transparent 100%) right calc(100% - var(--marker-lift)) / var(--marker-height) var(--marker-height) no-repeat,

    linear-gradient(var(--marker-color),
      var(--marker-color)) center calc(100% - var(--marker-lift)) / calc(100% - var(--marker-height)) var(--marker-height) no-repeat;
  box-decoration-break: clone;

}

.marker-01 {
  font-size: calc(21 * var(--rem));
  font-weight: 700;
  line-height: calc(77 / 42);
  letter-spacing: -0.015em;
}

.marker-02 {
  font-size: calc(18 * var(--rem));
  font-weight: 700;
  line-height: calc(80 / 36);
  letter-spacing: 0.06em;
}

.marker-03 {
  font-size: calc(17 * var(--rem));
  font-weight: 700;
  line-height: calc(71 / 34);
  letter-spacing: 0.05em;
}

.app-button a:hover,
.share-button p:has(a:hover),
.share-button p:has(button:hover),
.about-slick .slick-prev:hover,
.about-slick .slick-next:hover,
.about-slick .slick-dots li.slick-active button:hover {
  opacity: 0.7;
}

/* 大枠 */
.contents-block-01 {
  padding-inline: 20px;
}

.contents-block-02 {
  padding-inline: 10px;
}

/* 背景 */
.wave-block-01 {
  position: relative;
  width: 100vw;
  padding-block: 85px 65px;
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_01_sp.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

.wave-block-02 {
  position: relative;
  z-index: 0;
  padding-block: 25px 90px;
  background-color: #ffe9ec;
}

.wave-block-02::before {
  position: absolute;
  top: -36px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: calc((100vw / 750) * 940);
  content: "";
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_02_sp.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  translate: -50%;
}

.wave-block-03 {
  position: relative;
  z-index: 0;
  padding-block: 25px 140px;
  background-color: #e3f5fa;
}

.wave-block-03::before {
  position: absolute;
  top: -57px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: calc((100vw / 750) * 2322);
  content: "";
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_03_sp.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  translate: -50%;
}

.wave-block-04 {
  position: relative;
  z-index: 0;
  padding-block: 30px 65px;
  background-color: #fceff0;
}

.wave-block-04::before {
  position: absolute;
  top: -70px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: calc((100vw / 750) * 3101);
  content: "";
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_04_sp.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100%;
  translate: -50%;
}

.wave-block-05 {
  position: relative;
  z-index: 0;
  padding-block: 4px 43px;
  isolation: isolate;
}

.wave-block-05::before {
  position: absolute;
  inset: -60px 0 0 50%;
  z-index: -1;
  width: 100vw;
  height: auto;
  content: "";
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_05_sp.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  translate: -50% 0;
}

.wave-block-06 {
  --wave06-height: 48.533333vw;
  --wave06-top-offset: 36px;
  --wave06-bottom-offset: 42px;

  /* 疑似要素と背景色の境目に出る1px前後の隙間防止 */
  --wave06-overlap: 4px;

  position: relative;
  z-index: 1;
  padding-block: 20px 95px;
  background-color: transparent;

  /*
    上下の波画像（::before / ::after）の透明部分に背景色が出ないよう、
    background-color ではなく linear-gradient で中央部分だけ #ffe9ec を敷く。

    上側：
    ::before の波画像が .wave-block-06 内に入り込んでいる範囲は transparent。
    その少し手前から #ffe9ec を開始して、375px以下で出る隙間を防ぐ。

    中央：
    波画像だけでは埋まらない範囲を #ffe9ec で塗る。

    下側：
    ::after の波画像が重なる範囲は transparent に戻し、
    波画像の透明部分に背景色が見えないようにする。
  */
  background-image: linear-gradient(to bottom,
      transparent 0,
      transparent max(0px, calc(var(--wave06-height) - var(--wave06-top-offset) - var(--wave06-overlap))),
      #ffe9ec max(0px, calc(var(--wave06-height) - var(--wave06-top-offset) - var(--wave06-overlap))),
      #ffe9ec calc(100% - var(--wave06-height) - var(--wave06-bottom-offset) + var(--wave06-overlap)),
      transparent calc(100% - var(--wave06-height) - var(--wave06-bottom-offset) + var(--wave06-overlap)),
      transparent 100%);
}

.wave-block-06::before {
  position: absolute;
  top: -36px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: var(--wave06-height);
  content: "";
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_06_sp.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% auto;
  translate: -50%;
}

.wave-block-06::after {
  position: absolute;
  bottom: 42px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: var(--wave06-height);
  content: "";
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_07_sp.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% auto;
  translate: -50%;
}

.summary-block {
  position: relative;
  z-index: 0;
  padding-block: 0 105px;
  margin-top: -11px;
  background-color: transparent;
}

.summary-block::before {
  position: absolute;
  inset: -153px 0 0 50%;
  z-index: -1;
  width: 100%;
  height: auto;
  content: "";
  background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/bg_02_sp.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  translate: -50% 0;
}

/* PC */
@media screen and (min-width: 769px) {
  .main-kv.uc-mod-media-01 {
    margin-bottom: 67px;
  }

  .intro-image.uc-mod-media-01 {
    padding-inline: 57px 60px;
    margin-block: 1px 7px;
  }

  /* scene */
  .scene-heading-image {
    margin-bottom: 34px;
  }

  .scene-image.uc-mod-media-01 {
    padding-inline: 0 14px;
  }

  .summary-image.uc-mod-media-01 {
    padding-left: 26px;
    margin-inline: auto;
    margin-bottom: -106px;
  }

  /* share  */
  .share-intro-block {
    align-items: unset;
    justify-content: center;
    margin-bottom: -14px;
  }

  .share-button p::before {
    width: 368px;
    height: 78px;
    border-radius: 13px;
  }

  /* about */
  .about-heading-image {
    margin-bottom: 60px;
  }

  .CMP-CM05-block:has(>.about-slick) {
    position: relative;
    max-width: 850px;
    margin-inline: auto;
    margin-bottom: 25px;
  }

  .about-slick {
    position: static;
    width: 100vw;
    max-width: 1407px;
    margin-right: calc(50% - 50vw);
    margin-left: auto;
  }

  .about-slick.slick-initialized .slick-slide {
    width: 850px;
    padding-right: 40px;
  }

  .about-slick .slick-prev,
  .about-slick .slick-next {
    top: unset;
    bottom: -51px;
    background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/icon-arrow_02.png");
  }

  .about-slick .slick-prev {
    left: 27.5%;
  }

  .about-slick .slick-next {
    right: 27.5%;
  }

  .about-slick .slick-dots {
    gap: 45px;
    height: 17px;
    padding-right: 37px;
    margin-top: 47px;
  }

  .about-slick .slick-dots,
  .about-slick .slick-dots li {
    position: relative;
    max-width: 850px;
  }

  .about-slick .slick-dots li button,
  .about-slick .slick-dots li.slick-active button {
    width: 17px;
    height: 17px;
  }

  .about-slick .slick-dots li.slick-active button::after {
    width: 10px;
    height: 10px;
  }

  .about-block {
    display: flex;
    flex-direction: row;
    column-gap: 42px;
    padding: 56px 55px 53px;
    border-radius: 30px;
    box-shadow: 3px 4px 10px rgb(0 0 0 / 10%);
  }

  .about-slick-image.uc-mod-media-01 {
    padding-inline: 0;
    margin-bottom: 0;
  }

  .about-text-block {
    position: static;
    margin-top: 26px;
  }

  .about-slick-text-01 {
    margin-bottom: 30px;
  }

  .about-slick-text-01>* {
    margin-bottom: 10px;
    font-size: calc(24 * var(--rem));
    line-height: calc(38 / 24);
    text-align: left;
    letter-spacing: 0.035em;
  }

  .about-slick-text-02>* {
    font-size: calc(16 * var(--rem));
    line-height: calc(30 / 16);
    text-align: left;
    letter-spacing: 0.085em;
  }

  /* use */
  .use-heading-image {
    margin-bottom: 28px;
  }

  .use-text-image.uc-mod-media-01 {
    margin-bottom: 104px;
  }

  .use-step-wrap>.CMP-CM06-section:not(:last-child) .use-step-block::after {
    bottom: -60px;
    border-top: 26px solid #fc9a7d;
    border-right: 26px solid transparent;
    border-left: 26px solid transparent;
  }

  .use-step-wrap {
    margin-top: 0;
  }

  .use-step-wrap>.CMP-CM06-section:not(:last-child) {
    margin-bottom: 133px;
  }

  .use-step-wrap>.CMP-CM06-section:nth-child(even) .CMP-CM11-image-and-text:has(>.use-step-image) {
    grid-row: 1;
    grid-column: 2;
  }

  .use-step-wrap>.CMP-CM06-section:nth-child(even) .CMP-CM05-block:has(>.use-step-text-block) {
    grid-row: 1;
    grid-column: 1;
  }

  .CMP-CM05-block:has(>.use-step-text-block) {
    position: relative;
    left: -155px;
  }

  .use-step-wrap>.CMP-CM06-section:nth-of-type(even) .CMP-CM05-block:has(>.use-step-text-block) {
    left: 155px;
  }

  .use-step-block {
    display: grid;
    justify-content: center;
  }

  .CMP-CM06-section:nth-child(odd) .use-step-block {
    grid-template-columns: 250px 620px;
  }

  .CMP-CM06-section:nth-child(even) .use-step-block {
    grid-template-columns: 620px 250px;
  }

  .use-step-image.uc-mod-media-01 {
    top: -31px;
    left: -14px;
    max-width: unset;
  }

  .use-step-wrap>.CMP-CM06-section:nth-of-type(even) .use-step-image.uc-mod-media-01 {
    top: -28px;
    left: 10px;
  }

  .use-step-image-03.uc-mod-media-01 {
    top: -25px;
    left: -8px;
  }

  .CMP-CM11-image-and-text:has(>.use-step-image) {
    z-index: 1;
    width: fit-content;
  }

  .use-step-text-block {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 614px;
    min-height: 267px;
    padding: 45px 21px 45px 151px;
    margin-inline: auto;
    border-radius: 13px;
  }

  .use-step-text-block-02 {
    padding-top: 24px;
  }

  .use-step-text-block-02 .use-step-text-02 {
    margin-top: 6px;
  }

  .use-step-wrap>.CMP-CM06-section:nth-of-type(even) .use-step-text-block {
    padding-inline: 55px 21px;
  }

  .use-step-text-01>* {
    flex-direction: row;
    font-size: calc(24 * var(--rem));
    line-height: calc(38 / 24);
    text-align: left;
    letter-spacing: 0.02em;
  }

  .use-step-heading span:nth-of-type(1) {
    display: inline-block;
    width: fit-content;
    margin-right: 10px;
  }

  .use-step-heading span:nth-of-type(2) {
    display: none;
  }

  .CMP-CM09-heading:has(>.use-step-heading),
  .use-step-text-02 {
    max-width: fit-content;
    margin-inline: 0;
  }

  .use-step-text-02 {
    margin-top: 21px;
    margin-left: 11px;
  }

  .use-step-text-02>* {
    font-size: calc(16 * var(--rem));
    line-height: calc(28 / 16);
    text-align: left;
    letter-spacing: -0.02em;
  }

  /* summary */
  .summary-text>* {
    font-size: calc(22 * var(--rem));
    line-height: calc(52 / 22);
    letter-spacing: 0.05em;
  }

  .share-intro-heading-image {
    margin-bottom: 18px;
  }

  .share-intro-image.uc-mod-media-01 {
    top: -32px;
    left: 19px;
    max-width: unset;
  }

  .share-intro-text {
    font-size: calc(22 * var(--rem));
    line-height: calc(41 / 22);
    letter-spacing: 0.08em;
  }

  .share-grid {
    max-width: 830px;
    margin-inline: auto;
  }

  .share-button a,
  .share-button button {
    max-width: 367px;
    padding: 18px 44px 3px 65px;
    font-size: calc(21 * var(--rem));
    line-height: calc(40 / 21);
    letter-spacing: 0.08em;
    border-radius: 13px;

  }

  .share-button-01 a::before,
  .share-button-02 button::before {
    left: -42px;
    inline-size: 57px;
    block-size: 57px;
  }

  .share-button a::after,
  .share-button button::after {
    right: 26px;
    width: 10px;
    height: 12px;
  }

  /* app */
  .app-block {
    max-width: 900px;
    padding: 45px 98px 58px 77px;
    margin-inline: auto;
    border-radius: 30px;
  }

  .app-download-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: center;
  }

  .app-download-block> :nth-child(2) {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .app-download-block> :nth-child(3) {
    grid-row: 1;
    grid-column: 2;
  }

  .app-text>* {
    font-size: calc(23 * var(--rem));
    letter-spacing: 0.08em;
  }

  .app-button {
    padding-inline: 0;
  }

  .app-button a {
    padding: 12px 87px 18px 54px;
    font-size: calc(22 * var(--rem));
    box-shadow: 0 7px 0 #c9342b;
  }

  .app-button a::after {
    right: 28px;
    width: 22px;
    height: 31px;
  }

  .app-image.uc-mod-media-01 {
    top: 25px;
    width: 100%;
    max-width: 310px;
    padding: 0;
  }

  .app-text-image.uc-mod-media-01 {
    margin-bottom: 5px;
  }

  .app-text-image.uc-mod-media-01 img {
    max-width: unset;
  }

  /* ページTOPボタン（ソフィBeと同じ） */
  .fc-sofybe-link-pagetop {
    bottom: 226.5px;
    left: min(calc(100vw - 120px), 1440px);
    width: 80px;
  }

  /* 装飾 */
  .marker-01 {
    font-size: calc(36 * var(--rem));
    line-height: calc(52 / 36);
    letter-spacing: 0.080em;
  }

  .marker-02 {
    font-size: calc(35 * var(--rem));
    line-height: calc(80 / 35);
    letter-spacing: 0.080em;
  }

  .marker-03 {
    font-size: calc(30 * var(--rem));
    line-height: calc(71 / 30);
    letter-spacing: 0.05em;
  }


  /* 背景 */
  .wave-block-01 {
    padding-block: 187px 165px;
    background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_01_pc.png");
  }

  .wave-block-02 {
    padding-block: 82px 190px;
  }

  .wave-block-02::before {
    top: -97px;
    height: calc((100vw / 2000) * 1103);
    background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_02_pc.png");
  }

  .wave-block-03 {
    padding-block: 156px 243px;
  }

  .wave-block-03::before {
    top: -140px;
    height: calc((100vw / 2000) * 1501);
    background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_03_pc.png");
  }

  .wave-block-04 {
    padding-block: 140px 127px;
  }

  .wave-block-04::before {
    top: -162px;
    height: calc((100vw / 2000) * 2096);
    background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_04_pc.png");
  }

  .wave-block-05 {
    padding-block: 110px 100px;
  }

  .wave-block-05::before {
    top: -147px;
    background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_05_pc.png");
  }

  .wave-block-06 {
    --wave06-scale: calc(100vw / 2000);
    --wave06-height: calc(var(--wave06-scale) * 357);

    /* 疑似要素と背景の隙間防止用のかぶせ量 */
    --wave06-overlap: 4px;

    /* 150pxを基本にしつつ、画像高さより大きくならないようにする */
    --wave06-top-offset: min(150px, calc(var(--wave06-height) - var(--wave06-overlap)));
    --wave06-bottom-offset: 42px;

    position: relative;
    z-index: 1;
    padding-block: 90px 258px;
    background-color: transparent;

    /*
    上下の波画像（::before / ::after）の透明部分に背景色が出ないよう、
    background-color ではなく linear-gradient で中央部分だけ #ffe9ec を敷く。

    上側：
    波画像の表示高さから top のずらし量を引いた位置まで transparent。
    小さい画面幅で計算値がマイナスにならないよう max(0px, ...) を使用。

    中央：
    波画像だけでは埋まらない範囲を #ffe9ec で塗る。

    下側：
    下の波画像が重なる範囲は transparent に戻し、
    ::after の透明部分に背景色が見えないようにする。
    */
    background-image: linear-gradient(to bottom,
        transparent 0,
        transparent max(0px, calc(var(--wave06-height) - var(--wave06-top-offset) - var(--wave06-overlap))),
        #ffe9ec max(0px, calc(var(--wave06-height) - var(--wave06-top-offset) - var(--wave06-overlap))),
        #ffe9ec calc(100% - var(--wave06-height) - var(--wave06-bottom-offset)),
        transparent calc(100% - var(--wave06-height) - var(--wave06-bottom-offset)),
        transparent 100%);
  }

  .wave-block-06::before {
    top: calc(0px - var(--wave06-top-offset));
    height: var(--wave06-height);
    background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_06_pc.png");
  }

  .wave-block-06::after {
    height: calc((100vw / 2000) * 357);
    background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/wave_07_pc.png");
  }

  .summary-block {
    padding-block: 52px 230px;
  }

  .summary-block::before {
    top: -333px;
    background-image: url("/content/dam/sites/www_sofy_jp/app/sofybe/recruit/bg_02_pc.jpg");
  }

}

@media screen and (min-width: 769px) and (max-width: 920px) {
  .app-block {
    padding-inline: 49px;
  }

  .app-image.uc-mod-media-01 {
    max-width: 250px;
  }

  .app-button {
    margin-top: 0;
  }

  .app-button a {
    padding-inline: 45px 57px;
  }

  .use-step-image.uc-mod-media-01 {
    left: 53px;
    width: 180px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1050px) {
  .about-slick.slick-initialized .slick-slide {
    width: 675px;
  }

  .about-block {
    padding: 35px;
  }

  .summary-image.uc-mod-media-01 {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 2001px) {
  .about-slick {
    position: relative;
    width: 1407px;
    margin-inline: auto;
  }

  .about-slick::after {
    position: absolute;
    top: 7px;
    right: 0;
    z-index: 1;
    width: 45px;
    height: 87%;
    pointer-events: none;
    content: "";
    background: linear-gradient(to left,
        rgb(255 255 255 / 80%),
        rgb(255 255 255 / 0%));
  }

  .about-slick:has(.slick-next.slick-disabled)::after {
    opacity: 0;
  }

  .about-slick .slick-prev {
    left: 212px;
  }

  .about-slick .slick-next {
    left: 556px;
  }

  .wave-block-02::before {
    top: calc((100vw / 2000) * -97);
  }

  .wave-block-03::before {
    top: calc((100vw / 2000) * -140);
  }

  .wave-block-04::before {
    top: calc((100vw / 2000) * -162);
  }

  .wave-block-05::before {
    top: calc((100vw / 2000) * -147);
  }

  .wave-block-06::before {
    top: calc((100vw / 2000) * -150);
  }

  .wave-block-06::after {
    bottom: calc((100vw / 2000) * 42);
  }

  .summary-block::before {
    top: calc((100vw / 2000) * -333);
  }
}

/* ------------------------------------
 * 汎用
 * --------------------------------- */

/* フォントの色 */
._sofybe-recruit-black-01,
._sofybe-recruit-black-01>*,
._sofybe-recruit-black-01[class] {
  color: var(--sofybe-recruit-black-01);
}

/* 文字 */
.recruit-text-01>* {
  font-size: calc(14 * var(--rem));
  font-weight: 400;
  line-height: calc(60.5 / 28);
  color: var(--sofybe-recruit-black-01);
  letter-spacing: -0.025em;
}

/* PC テキスト改行アリ */
.pc-break-text::after,
.pc-break-b-text b::after {
  content: none;
}

/* SP テキスト改行ナシ */
.sp-break-text::after,
.sp-break-b-text b::after {
  white-space: pre;
  content: "\A";
}

/* その他 */
.inline-block {
  display: inline-block;
}

._text-decoration-none a,
._text-decoration-none a:hover,
._text-decoration-none a:active,
._text-decoration-none a:visited {
  text-decoration: none;
}

/* SP */
@media screen and (max-width: 768px) {
  ._sp-none {
    display: none;
  }

  ._mb_27_sp {
    margin-bottom: 27px;
  }

}

/* PC */
@media screen and (min-width: 769px) {
  .recruit-text-01>* {
    font-size: calc(24 * var(--rem));
    font-weight: 400;
    line-height: calc(52 / 24);
    color: var(--sofybe-recruit-black-01);
    letter-spacing: 0.012em;
  }

  /* PC テキスト改行ナシ */
  .sp-break-text::after,
  .sp-break-b-text b::after {
    content: none;
  }

  /* PC テキスト改行アリ */
  .pc-break-text::after,
  .pc-break-b-text b::after {
    white-space: pre;
    content: "\A";
  }

  ._pc-none {
    display: none;
  }

  ._mb_19_pc {
    margin-bottom: 19px;
  }

  ._mb_47_pc {
    margin-bottom: 47px;
  }

  ._pb_105_pc {
    padding-bottom: 105px;
  }
}