@charset "UTF-8";

/* ==============================================
   セールスPit LP（toC / 営業フリーランス向け）
   PC基準幅 1440px / SP基準幅 393px
   ============================================== */

.splf {
  --splf-navy: linear-gradient(90deg, #2b3972 0%, #273066 55%, #23245d 100%);
  --splf-navy-solid: #273066;
  --splf-accent: linear-gradient(90deg, #1a2a69 0%, #6beef6 100%);
  --splf-orange: linear-gradient(90deg, #cb3625 0%, #ee9973 100%);
  --splf-orange-kv: linear-gradient(90deg, #c93020 0%, #ef9b74 100%);
  --splf-gold: linear-gradient(90deg, #ada372 0%, #f1eac8 55%, #ada372 100%);
  --splf-bg: #f6f7fa;
  --splf-ink: #020202;
  --splf-card-shadow: 8px 8px 20px rgb(16 18 44 / 7%);
  --splf-btn-shadow: 8px 8px 20px rgb(16 18 44 / 25%);

  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: var(--splf-bg);
  font-family: var(--font-family-primary);
  color: var(--splf-ink);
}

.splf * {
  box-sizing: border-box;
}

.splf img {
  display: block;
  max-width: 100%;
}

.splf a {
  text-decoration: none;
  color: inherit;
}

.splf-page {
  background-color: #f6f7fa;
}

/* ==============================================
   Utilities
   ============================================== */
.splf-sp-only {
  display: none;
}

/** グラデーション文字 */
.splf-gradient-text {
  background-image: var(--splf-navy);
  background-clip: text;
  color: transparent;
}

/* ==============================================
   Buttons
   ============================================== */
.splf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(8 / 1440 * 100vw), 8px);
  height: min(calc(56 / 1440 * 100vw), 56px);
  padding: 0 min(calc(24 / 1440 * 100vw), 24px);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-family-primary);
  font-size: min(calc(16 / 1440 * 100vw), 16px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
  transition:
    opacity 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease,
    color 0.3s ease,
    background-color 0.3s ease;
}

.splf-btn--sm {
  height: min(calc(48 / 1440 * 100vw), 48px);
}

.splf-btn--lg {
  width: min(calc(400 / 1440 * 100vw), 400px);
  height: min(calc(64 / 1440 * 100vw), 64px);
  box-shadow: var(--splf-btn-shadow);
}

.splf-btn--wide {
  width: min(calc(480 / 1440 * 100vw), 480px);
  height: min(calc(64 / 1440 * 100vw), 64px);
  font-size: min(calc(24 / 1440 * 100vw), 24px);
}

.splf-btn--orange,
a.splf-btn--orange {
  background-image: var(--splf-orange);
  color: #fff;
}

.splf-btn--lg.splf-btn--orange {
  background-image: var(--splf-orange-kv);
}

.splf-btn--navy,
a.splf-btn--navy {
  background-image: var(--splf-navy);
  color: #fff;
}

.splf-btn--white,
a.splf-btn--white {
  background-color: #fff;
  color: #cc3827;
}

.splf-btn--outline,
a.splf-btn--outline {
  position: relative;
  background-color: transparent;
  background-image: var(--splf-navy);
  background-clip: text;
  color: transparent;
}

.splf-btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    var(--splf-navy) border-box;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.splf-btn--orange:hover,
.splf-btn--navy:hover {
  opacity: 0.82;
  box-shadow: var(--splf-btn-shadow);
}

.splf-btn--white:hover {
  background-color: #ffe9e4;
}

.splf-btn--outline:hover,
a.splf-btn--outline:hover {
  background-image: var(--splf-navy);
  background-clip: border-box;
  color: #fff;
}

.splf-btn--outline:hover::before {
  opacity: 0;
}

/** 斜め矢印アイコン（arrow_outward・Figma書き出しの画像） */
.splf-icon-arrow {
  flex-shrink: 0;
  width: min(calc(13 / 1440 * 100vw), 13px);
  height: min(calc(13 / 1440 * 100vw), 13px);
}

.splf-icon-arrow-mask {
  display: none;
}

/** 山括弧アイコン（カルーセル矢印） */
.splf-icon-chevron {
  display: block;
  width: min(calc(8 / 1440 * 100vw), 8px);
  height: min(calc(8 / 1440 * 100vw), 8px);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.splf-icon-chevron--right {
  transform: rotate(45deg) translate(-1px, 1px);
}

.splf-icon-chevron--left {
  transform: rotate(-135deg) translate(-1px, 1px);
}

/** 「＼ テキスト ／」の装飾 */
.splf-slash-note {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: min(calc(24 / 1440 * 100vw), 24px);
  font-size: min(calc(18 / 1440 * 100vw), 18px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #fff;
}

.splf-slash-note::before,
.splf-slash-note::after {
  content: "";
  position: relative;
  display: block;
  flex-shrink: 0;
  width: min(calc(19 / 1440 * 100vw), 19px);
  height: min(calc(24 / 1440 * 100vw), 24px);
  background-image:
    linear-gradient(to bottom, currentcolor, currentcolor),
    linear-gradient(to bottom, currentcolor, currentcolor);
  background-repeat: no-repeat;
  background-size:
    9% 96%,
    11% 63%;
  background-position:
    right 4% top 0,
    left 0 bottom 0;
}

.splf-slash-note::before {
  transform: skewX(25deg);
}

.splf-slash-note::after {
  transform: skewX(-25deg);
}

.splf-slash-note--red {
  color: #cd3c2a;
  text-shadow: 0 0 9px #fff;
}

/* ==============================================
   Section heading（斜めバンド）
   ============================================== */
.splf-heading {
  position: relative;
  width: min(calc(616 / 1440 * 100vw), 616px);
  height: min(calc(71 / 1440 * 100vw), 71px);
  margin-left: min(calc(80 / 1440 * 100vw), 80px);
}

.splf-heading::before,
.splf-heading::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  background-image: var(--splf-navy);
  background-size: min(calc(616 / 1440 * 100vw), 616px) 100%;
  transform: skewX(-31deg);
  transform-origin: left bottom;
}

.splf-heading::before {
  left: 0;
  width: min(calc(524 / 1440 * 100vw), 524px);
}

.splf-heading::after {
  left: min(calc(544 / 1440 * 100vw), 544px);
  width: min(calc(26 / 1440 * 100vw), 26px);
  background-position: min(calc(-544 / 1440 * 100vw), -544px) 0;
}

.splf-heading__text {
  position: absolute;
  top: 50%;
  left: min(calc(48 / 1440 * 100vw), 48px);
  z-index: 1;
  transform: translateY(-50%);
  font-size: min(calc(32 / 1440 * 100vw), 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: #fff;
}

/* ==============================================
   Header
   ============================================== */
.splf-header {
  /* テーマ共通CSS（components/header.css）の pointer-events: none を打ち消す */
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.splf-header__logo {
  display: flex;
  align-items: center;
  padding: min(calc(24 / 1440 * 100vw), 24px);
  border-radius: 0 0 min(calc(32 / 1440 * 100vw), 32px);
  background-color: #fff;
}

.splf-header__logo img {
  width: min(calc(180 / 1440 * 100vw), 180px);
  height: auto;
}

.splf-header__nav {
  display: flex;
  align-items: center;
  gap: min(calc(32 / 1440 * 100vw), 32px);
  margin: min(calc(24 / 1440 * 100vw), 24px) min(calc(40 / 1440 * 100vw), 40px) 0 0;
  padding: min(calc(8 / 1440 * 100vw), 8px) min(calc(32 / 1440 * 100vw), 32px);
  border-radius: min(calc(24 / 1440 * 100vw), 24px);
  background-color: rgb(255 255 255 / 70%);
  backdrop-filter: blur(22px);
}

.splf-header__link {
  display: flex;
  align-items: center;
  height: min(calc(56 / 1440 * 100vw), 56px);
  background-image: var(--splf-navy);
  background-clip: text;
  font-size: min(calc(16 / 1440 * 100vw), 16px);
  font-weight: 600;
  line-height: 2;
  white-space: nowrap;
  color: transparent;
  transition: opacity 0.3s ease;
}

.splf-header__link:hover {
  opacity: 0.6;
}

.splf-header__actions {
  display: flex;
  align-items: center;
  gap: min(calc(16 / 1440 * 100vw), 16px);
}

.splf-header__sp-btn {
  display: none;
}

/* ==============================================
   Section 1: KV
   ============================================== */
.splf-kv {
  position: relative;
  height: min(calc(800 / 1440 * 100vw), 800px);
  overflow: hidden;
  background-color: var(--splf-bg);
}

.splf-kv__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.splf-kv__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* .splf img { display: block } より詳細度を上げるため img 付きで指定 */
img.splf-kv__bg-img--sp {
  display: none;
}

.splf-kv__inner {
  position: relative;
  z-index: 2;
  padding-top: min(calc(181 / 1440 * 100vw), 181px);
  padding-left: min(calc(80 / 1440 * 100vw), 80px);
}

.splf-kv__lead {
  background-image: var(--splf-navy);
  background-clip: text;
  font-size: min(calc(18 / 1440 * 100vw), 18px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: transparent;
  filter: drop-shadow(0 0 9px #fff) drop-shadow(0 0 4px #fff);
}

.splf-kv__lead--sp {
  display: none;
}

.splf-kv__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: min(calc(16 / 1440 * 100vw), 16px);
}

.splf-kv__title-line {
  display: flex;
  align-items: center;
  padding-left: min(calc(25 / 1440 * 100vw), 25px);
  background-image: var(--splf-accent);
  background-repeat: no-repeat;
  background-size: min(calc(615 / 1440 * 100vw), 615px) 100%;
  font-size: min(calc(48 / 1440 * 100vw), 48px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff;
}

.splf-kv__title-line:first-child {
  width: min(calc(615 / 1440 * 100vw), 615px);
  height: min(calc(109 / 1440 * 100vw), 109px);
}

.splf-kv__title-line:last-child {
  width: min(calc(394 / 1440 * 100vw), 394px);
  height: min(calc(87 / 1440 * 100vw), 87px);
  margin-top: min(calc(-11 / 1440 * 100vw), -11px);
}

.splf-kv__badges {
  display: flex;
  align-items: center;
  gap: min(calc(16 / 1440 * 100vw), 16px);
  margin-top: min(calc(24 / 1440 * 100vw), 24px);
  padding: 0;
  list-style: none;
}

.splf-kv__badge {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(calc(120 / 1440 * 100vw), 120px);
  height: min(calc(120 / 1440 * 100vw), 120px);
  border-radius: 50%;
  background-image: var(--splf-gold);
  box-shadow: 8px 8px 28px rgb(12 36 57 / 27%);
  text-align: center;
  color: var(--splf-ink);
}

.splf-kv__badge-cap {
  font-size: min(calc(12 / 1440 * 100vw), 12px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.splf-kv__badge-cap--sm {
  font-size: min(calc(10 / 1440 * 100vw), 10px);
}

.splf-kv__badge-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: min(calc(4 / 1440 * 100vw), 4px);
  font-family: var(--font-family-en);
  font-size: min(calc(40 / 1440 * 100vw), 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

.splf-kv__badge-main small {
  font-family: var(--font-family-primary);
  font-size: min(calc(14 / 1440 * 100vw), 14px);
  font-weight: 600;
}

.splf-kv__badge-main--lg small {
  font-size: min(calc(16 / 1440 * 100vw), 16px);
}

.splf-kv__badge-main--md {
  font-family: var(--font-family-primary);
  font-size: min(calc(18 / 1440 * 100vw), 18px);
  font-weight: 600;
  line-height: 1.2;
}

/* 「50万~」＋「案件/多数」の横並び行（Figma準拠。行レイアウトなので重ならない） */
.splf-kv__badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(2 / 1440 * 100vw), 2px);
  margin-top: min(calc(4 / 1440 * 100vw), 4px);
}

.splf-kv__badge-row .splf-kv__badge-main {
  margin-top: 0;
}

.splf-kv__badge-sub {
  font-size: min(calc(12 / 1440 * 100vw), 12px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: left;
}

.splf-kv__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(calc(16 / 1440 * 100vw), 16px);
  width: min(calc(400 / 1440 * 100vw), 400px);
  margin-top: min(calc(40 / 1440 * 100vw), 40px);
}

.splf-kv__scroll {
  position: absolute;
  bottom: min(calc(16 / 1440 * 100vw), 16px);
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(calc(6 / 1440 * 100vw), 6px);
  transform: translateX(-50%);
}

.splf-kv__scroll span {
  background-image: var(--splf-navy);
  background-clip: text;
  font-family: var(--font-family-en);
  font-size: min(calc(14 / 1440 * 100vw), 14px);
  line-height: 1;
  letter-spacing: 0.2em;
  color: transparent;
}

.splf-kv__scroll i {
  display: block;
  width: min(calc(29 / 1440 * 100vw), 29px);
  height: min(calc(11 / 1440 * 100vw), 11px);
  background-image: var(--splf-navy);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: splf-scroll-hint 1.8s ease-in-out infinite;
}

@keyframes splf-scroll-hint {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4px);
  }
}

/* ==============================================
   Section 2: 好条件の案件を探す（カルーセル）
   ============================================== */
.splf-jobs {
  padding-top: min(calc(77 / 1440 * 100vw), 77px);
  padding-bottom: min(calc(64 / 1440 * 100vw), 64px);
}

.splf-carousel {
  margin-top: min(calc(80 / 1440 * 100vw), 80px);
}

.splf-carousel__viewport {
  overflow: hidden;
  width: 100%;
  padding: min(calc(20 / 1440 * 100vw), 20px) 0;
  cursor: grab;
  touch-action: pan-y;
}

.splf-carousel__viewport.is-dragging {
  cursor: grabbing;
}

.splf-carousel__track {
  display: flex;
  align-items: stretch;
  gap: min(calc(32 / 1440 * 100vw), 32px);
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.splf-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(calc(24 / 1440 * 100vw), 24px);
  margin-top: min(calc(54 / 1440 * 100vw), 54px);
}

.splf-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(calc(24 / 1440 * 100vw), 24px);
  height: min(calc(24 / 1440 * 100vw), 24px);
  padding: 0;
  border: 0;
  border-radius: min(calc(4 / 1440 * 100vw), 4px);
  background-image: var(--splf-navy);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.splf-carousel__arrow:hover {
  opacity: 0.7;
}

.splf-carousel__dots {
  display: flex;
  align-items: center;
  gap: min(calc(12 / 1440 * 100vw), 12px);
}

.splf-carousel__dot {
  width: min(calc(8 / 1440 * 100vw), 8px);
  height: min(calc(8 / 1440 * 100vw), 8px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: rgb(39 48 102 / 10%);
  cursor: pointer;
  transition:
    width 0.3s ease,
    height 0.3s ease,
    background-color 0.3s ease;
}

.splf-carousel__dot.is-active {
  width: min(calc(24 / 1440 * 100vw), 24px);
  height: min(calc(12 / 1440 * 100vw), 12px);
  background-color: var(--splf-navy-solid);
  background-image: var(--splf-navy);
}

.splf-job {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: space-between;
  gap: min(calc(24 / 1440 * 100vw), 24px);
  width: min(calc(320 / 1440 * 100vw), 320px);
  min-height: min(calc(437 / 1440 * 100vw), 437px);
  padding: min(calc(24 / 1440 * 100vw), 24px);
  border-radius: min(calc(24 / 1440 * 100vw), 24px);
  background-color: #fff;
  box-shadow: var(--splf-card-shadow);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.splf-job__body {
  display: flex;
  flex-direction: column;
  gap: min(calc(24 / 1440 * 100vw), 24px);
}

.splf-job__title {
  margin: 0;
  font-size: min(calc(18 / 1440 * 100vw), 18px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--splf-ink);
}

.splf-job__sep {
  display: block;
  height: 1px;
  background-color: #dfdfdf;
}

.splf-job__list {
  display: flex;
  flex-direction: column;
  gap: min(calc(8 / 1440 * 100vw), 8px);
  margin: 0;
}

.splf-job__chip {
  align-self: flex-start;
  padding: min(calc(4 / 1440 * 100vw), 4px) min(calc(16 / 1440 * 100vw), 16px);
  border-radius: 999px;
  background-color: rgb(39 48 102 / 16%);
  background-clip: padding-box;
  font-size: min(calc(12 / 1440 * 100vw), 12px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--splf-navy-solid);
}

.splf-job__value {
  margin: 0;
  font-size: min(calc(14 / 1440 * 100vw), 14px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--splf-ink);
}

.splf-job__note {
  margin: min(calc(-8 / 1440 * 100vw), -8px) 0 0;
  font-size: min(calc(14 / 1440 * 100vw), 14px);
  font-weight: 600;
  line-height: 1.4;
}

.splf-job__btn {
  width: 100%;
  flex-shrink: 0;
}

.splf-job--secret {
  border: 1px solid #fff;
  background-image: linear-gradient(60.67deg, #1a2a69 0%, #6beef6 100%);
  color: #fff;
}

.splf-job--secret .splf-job__title,
.splf-job--secret .splf-job__value,
.splf-job--secret .splf-job__note {
  color: #fff;
}

.splf-job--secret .splf-job__chip {
  background-color: rgb(255 255 255 / 16%);
  color: #fff;
}

.splf-job--secret .splf-job__btn {
  box-shadow: var(--splf-btn-shadow);
}

/* ==============================================
   CTA帯（共通）
   ============================================== */
.splf-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(calc(24 / 1440 * 100vw), 24px);
  padding: min(calc(48 / 1440 * 100vw), 48px) min(calc(80 / 1440 * 100vw), 80px);
  background-image: linear-gradient(65.61deg, #cb3625 0%, #ee9973 100%);
}

.splf-cta .splf-btn {
  margin-top: min(calc(-8 / 1440 * 100vw), -8px);
}

.splf-cta__note {
  margin: min(calc(-8 / 1440 * 100vw), -8px) 0 0;
  font-size: min(calc(14 / 1440 * 100vw), 14px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #fff;
}

/* ==============================================
   Section 4: こんな方にオススメ
   ============================================== */
.splf-recommend {
  padding-top: min(calc(132 / 1440 * 100vw), 132px);
}

.splf-recommend__list {
  display: flex;
  flex-direction: column;
  gap: min(calc(32 / 1440 * 100vw), 32px);
  width: min(calc(846 / 1440 * 100vw), 846px);
  margin: min(calc(64 / 1440 * 100vw), 64px) auto 0;
  padding: 0;
  list-style: none;
}

.splf-recommend__item {
  display: flex;
  align-items: center;
  gap: min(calc(24 / 1440 * 100vw), 24px);
}

.splf-recommend__item--right {
  flex-direction: row-reverse;
}

.splf-recommend__avatar {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  width: min(calc(106 / 1440 * 100vw), 106px);
  height: min(calc(106 / 1440 * 100vw), 106px);
  border-radius: 50%;
  background-color: #fff;
}

.splf-recommend__avatar img {
  position: absolute;
  top: min(calc(13 / 1440 * 100vw), 13px);
  left: min(calc(18 / 1440 * 100vw), 18px);
  width: min(calc(70 / 1440 * 100vw), 70px);
  height: auto;
}

.splf-recommend__bubble {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: min(calc(16 / 1440 * 100vw), 16px);
  padding: min(calc(16 / 1440 * 100vw), 16px) min(calc(24 / 1440 * 100vw), 24px);
  border-radius: min(calc(8 / 1440 * 100vw), 8px);
  background-color: #fff;
}

.splf-recommend__bubble::before {
  content: "";
  position: absolute;
  top: min(calc(16 / 1440 * 100vw), 16px);
  width: min(calc(16 / 1440 * 100vw), 16px);
  height: min(calc(26 / 1440 * 100vw), 26px);
  background-color: #fff;
}

.splf-recommend__item--left .splf-recommend__bubble::before {
  left: min(calc(-16 / 1440 * 100vw), -16px);
  clip-path: polygon(100% 0, 100% 100%, 0 20%);
}

.splf-recommend__item--right .splf-recommend__bubble::before {
  right: min(calc(-16 / 1440 * 100vw), -16px);
  clip-path: polygon(0 0, 0 100%, 100% 20%);
}

.splf-recommend__label {
  display: flex;
  align-items: center;
  gap: min(calc(16 / 1440 * 100vw), 16px);
  margin: 0;
  font-size: min(calc(12 / 1440 * 100vw), 12px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: #595c68;
}

.splf-recommend__label::before,
.splf-recommend__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #dfdfdf;
}

.splf-recommend__text {
  margin: 0;
  font-size: min(calc(16 / 1440 * 100vw), 16px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--splf-ink);
}

.splf-recommend__accent {
  background-image: var(--splf-accent);
  background-clip: text;
  color: transparent;
}

/** 孤立改行防止（末尾フレーズを1つの単位として折り返す） */
.splf-nowrap {
  display: inline-block;
  white-space: nowrap;
}

/* ==============================================
   Section 5: 現状のお考えをどちらかお選びください
   ============================================== */
.splf-choice {
  position: relative;
  z-index: 3;
  margin-bottom: min(calc(-80 / 1440 * 100vw), -80px);
  padding-top: min(calc(120 / 1440 * 100vw), 120px);
}

.splf-choice__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(calc(1064 / 1440 * 100vw), 1064px);
  height: min(calc(160 / 1440 * 100vw), 160px);
  margin: 0 auto;
  border: 2px solid transparent;
  border-radius: min(calc(32 / 1440 * 100vw), 32px);
  background:
    linear-gradient(#f6f7fa, #f6f7fa) padding-box,
    var(--splf-navy) border-box;
}

/**
 * 見出しは枠線の上に載せ、h2側の背景色で枠線を隠す。
 * background-clip: text はグラデ文字（内側の span）にだけ適用する
 * （h2に同居させると背景色まで文字形状にクリップされ、枠線が透けてしまう）。
 */
.splf-choice__title {
  position: absolute;
  top: min(calc(-27 / 1440 * 100vw), -27px);
  left: 50%;
  z-index: 1;
  margin: 0;
  padding: min(calc(8 / 1440 * 100vw), 8px) min(calc(24 / 1440 * 100vw), 24px);
  transform: translateX(-50%);
  background-color: var(--splf-bg);
  font-size: min(calc(32 / 1440 * 100vw), 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.splf-choice__title-text {
  background-image: var(--splf-navy);
  background-clip: text;
  color: transparent;
}

.splf-choice__actions {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: min(calc(32 / 1440 * 100vw), 32px);
  width: min(calc(720 / 1440 * 100vw), 720px);
  margin-top: min(calc(25 / 1440 * 100vw), 25px);
}

.splf-choice__actions > .splf-btn {
  width: min(calc(344 / 1440 * 100vw), 344px);
}

.splf-choice__col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: min(calc(8 / 1440 * 100vw), 8px);
  width: min(calc(344 / 1440 * 100vw), 344px);
}

.splf-choice__col .splf-btn {
  width: 100%;
}

.splf-choice__note {
  margin: 0;
  font-size: min(calc(12 / 1440 * 100vw), 12px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: rgb(2 2 2 / 50%);
}

/* ==============================================
   Section 6: "セールスPit"が選ばれる理由
   ============================================== */
.splf-reasons {
  position: relative;
  padding: min(calc(144 / 1440 * 100vw), 144px) 0 min(calc(97 / 1440 * 100vw), 97px);
  background-image: linear-gradient(51.74deg, #1a2a69 0%, #6beef6 100%);
}

.splf-reasons__title {
  margin: 0;
  font-size: min(calc(56 / 1440 * 100vw), 56px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 12px rgb(16 18 44 / 25%);
}

.splf-reasons__title-tail {
  font-size: min(calc(40 / 1440 * 100vw), 40px);
}

.splf-reasons__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(calc(32 / 1440 * 100vw), 32px);
  width: min(calc(1057 / 1440 * 100vw), 1057px);
  margin: min(calc(48 / 1440 * 100vw), 48px) auto 0;
  padding: 0;
  list-style: none;
}

.splf-reasons__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(calc(24 / 1440 * 100vw), 24px);
  min-height: min(calc(334 / 1440 * 100vw), 334px);
  padding: min(calc(24 / 1440 * 100vw), 24px);
  border-radius: min(calc(24 / 1440 * 100vw), 24px);
  background-color: #fff;
}

.splf-reasons__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(calc(120 / 1440 * 100vw), 120px);
  height: min(calc(120 / 1440 * 100vw), 120px);
}

.splf-reasons__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.splf-reasons__card-title {
  margin: 0;
  background-image: var(--splf-navy);
  background-clip: text;
  font-size: min(calc(24 / 1440 * 100vw), 24px);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: transparent;
}

.splf-reasons__card-text {
  margin: min(calc(-16 / 1440 * 100vw), -16px) 0 0;
  font-size: min(calc(14 / 1440 * 100vw), 14px);
  font-weight: 400;
  line-height: 1.6;
  text-align: justify;
  color: var(--splf-ink);
}

/* ==============================================
   Section 7: セールスPitで働く人の声
   ============================================== */
.splf-voice {
  padding-top: min(calc(128 / 1440 * 100vw), 128px);
  padding-bottom: min(calc(160 / 1440 * 100vw), 160px);
}

.splf-voice__list {
  display: flex;
  flex-direction: column;
  gap: min(calc(24 / 1440 * 100vw), 24px);
  width: min(calc(843 / 1440 * 100vw), 843px);
  margin: min(calc(80 / 1440 * 100vw), 80px) auto 0;
  padding: 0;
  list-style: none;
}

.splf-voice__card {
  display: flex;
  flex-direction: column;
  gap: min(calc(16 / 1440 * 100vw), 16px);
  padding: min(calc(24 / 1440 * 100vw), 24px);
  border-radius: min(calc(24 / 1440 * 100vw), 24px);
  background-color: #fff;
}

.splf-voice__head {
  display: flex;
  align-items: center;
  gap: min(calc(16 / 1440 * 100vw), 16px);
}

.splf-voice__avatar {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  width: min(calc(56 / 1440 * 100vw), 56px);
  height: min(calc(56 / 1440 * 100vw), 56px);
  border-radius: 50%;
  background-color: var(--splf-bg);
}

.splf-voice__avatar img {
  position: absolute;
  top: min(calc(5 / 1440 * 100vw), 5px);
  left: min(calc(4 / 1440 * 100vw), 4px);
  width: min(calc(48 / 1440 * 100vw), 48px);
  height: auto;
}

.splf-voice__card:nth-child(2) .splf-voice__avatar img {
  top: min(calc(6 / 1440 * 100vw), 6px);
  left: min(calc(9 / 1440 * 100vw), 9px);
  width: min(calc(37 / 1440 * 100vw), 37px);
}

.splf-voice__card:nth-child(3) .splf-voice__avatar img {
  top: min(calc(6 / 1440 * 100vw), 6px);
  left: min(calc(3 / 1440 * 100vw), 3px);
  width: min(calc(47 / 1440 * 100vw), 47px);
}

.splf-voice__meta {
  display: flex;
  flex-direction: column;
  gap: min(calc(4 / 1440 * 100vw), 4px);
}

.splf-voice__profile {
  display: flex;
  align-items: center;
  gap: min(calc(8 / 1440 * 100vw), 8px);
  margin: 0;
}

.splf-voice__name {
  font-size: min(calc(12 / 1440 * 100vw), 12px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--splf-ink);
}

.splf-voice__tag {
  padding: min(calc(4 / 1440 * 100vw), 4px) min(calc(8 / 1440 * 100vw), 8px);
  border-radius: 999px;
  background-color: rgb(39 48 102 / 16%);
  font-size: min(calc(10 / 1440 * 100vw), 10px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--splf-navy-solid);
}

.splf-voice__title {
  margin: 0;
  background-image: linear-gradient(68.55deg, #1a2a69 0%, #6beef6 100%);
  background-clip: text;
  font-size: min(calc(24 / 1440 * 100vw), 24px);
  font-weight: 600;
  line-height: 1.4;
  color: transparent;
}

.splf-voice__text {
  margin: 0;
  font-size: min(calc(14 / 1440 * 100vw), 14px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--splf-ink);
}

/* ==============================================
   Section 9: サービスご利用の流れ
   ============================================== */
.splf-flow {
  padding-top: min(calc(172 / 1440 * 100vw), 172px);
  padding-bottom: min(calc(160 / 1440 * 100vw), 160px);
}

.splf-flow__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: min(calc(24 / 1440 * 100vw), 24px);
  width: min(calc(1064 / 1440 * 100vw), 1064px);
  margin: min(calc(77 / 1440 * 100vw), 77px) auto 0;
  padding: 0;
  list-style: none;
}

.splf-flow__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(calc(8 / 1440 * 100vw), 8px);
  width: calc((100% - 2 * min(calc(24 / 1440 * 100vw), 24px)) / 3);
  min-height: min(calc(246 / 1440 * 100vw), 246px);
  padding: min(calc(16 / 1440 * 100vw), 16px) min(calc(24 / 1440 * 100vw), 24px);
  border-radius: min(calc(24 / 1440 * 100vw), 24px);
  background-color: #fff;
}

.splf-flow__num {
  position: absolute;
  top: min(calc(-13 / 1440 * 100vw), -13px);
  left: min(calc(-4 / 1440 * 100vw), -4px);
  background-image: var(--splf-accent);
  background-clip: text;
  font-family: var(--font-family-en);
  font-size: min(calc(48 / 1440 * 100vw), 48px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: transparent;
}

.splf-flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(calc(80 / 1440 * 100vw), 80px);
  height: min(calc(80 / 1440 * 100vw), 80px);
}

.splf-flow__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.splf-flow__card-title {
  margin: 0;
  background-image: var(--splf-navy);
  background-clip: text;
  font-size: min(calc(24 / 1440 * 100vw), 24px);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: transparent;
}

.splf-flow__card-text {
  margin: 0;
  font-size: min(calc(14 / 1440 * 100vw), 14px);
  font-weight: 400;
  line-height: 1.6;
  text-align: justify;
  color: var(--splf-ink);
}

/* ==============================================
   Section 10: よくあるご質問
   ============================================== */
.splf-faq {
  padding-top: min(calc(160 / 1440 * 100vw), 160px);
  padding-bottom: min(calc(196 / 1440 * 100vw), 196px);
}

.splf-faq__list {
  display: flex;
  flex-direction: column;
  gap: min(calc(24 / 1440 * 100vw), 24px);
  width: min(calc(846 / 1440 * 100vw), 846px);
  margin: min(calc(80 / 1440 * 100vw), 80px) auto 0;
  padding: 0;
  list-style: none;
}

.splf-faq__item {
  overflow: hidden;
  border-radius: min(calc(8 / 1440 * 100vw), 8px);
  background-color: #fff;
}

.splf-faq__q {
  display: flex;
  align-items: center;
  gap: min(calc(16 / 1440 * 100vw), 16px);
  width: 100%;
  padding: min(calc(16 / 1440 * 100vw), 16px) min(calc(24 / 1440 * 100vw), 24px);
  border: 0;
  background-color: transparent;
  font-family: var(--font-family-primary);
  text-align: left;
  cursor: pointer;
}

.splf-faq__mark {
  flex-shrink: 0;
  background-image: var(--splf-navy);
  background-clip: text;
  font-size: min(calc(24 / 1440 * 100vw), 24px);
  font-weight: 600;
  line-height: 1.2;
  color: transparent;
}

.splf-faq__bar {
  flex-shrink: 0;
  width: 2px;
  height: min(calc(20 / 1440 * 100vw), 20px);
  background-image: var(--splf-navy);
}

.splf-faq__text {
  flex: 1;
  background-image: var(--splf-navy);
  background-clip: text;
  font-size: min(calc(16 / 1440 * 100vw), 16px);
  font-weight: 600;
  line-height: 1.4;
  color: transparent;
}

.splf-faq__toggle {
  position: relative;
  flex-shrink: 0;
  width: min(calc(24 / 1440 * 100vw), 24px);
  height: min(calc(24 / 1440 * 100vw), 24px);
  border-radius: min(calc(4 / 1440 * 100vw), 4px);
  background-image: var(--splf-navy);
}

.splf-faq__toggle::before,
.splf-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  transition: transform 0.3s ease;
}

.splf-faq__toggle::before {
  width: min(calc(12 / 1440 * 100vw), 12px);
  height: 2px;
  transform: translate(-50%, -50%);
}

.splf-faq__toggle::after {
  width: 2px;
  height: min(calc(12 / 1440 * 100vw), 12px);
  transform: translate(-50%, -50%);
}

.splf-faq__item.is-open .splf-faq__toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.splf-faq__q:hover .splf-faq__toggle {
  opacity: 0.75;
}

.splf-faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.splf-faq__a p {
  margin: 0;
  padding: 0 min(calc(24 / 1440 * 100vw), 24px) min(calc(20 / 1440 * 100vw), 20px) min(calc(64 / 1440 * 100vw), 64px);
  font-size: min(calc(14 / 1440 * 100vw), 14px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--splf-ink);
}

/* ==============================================
   Section 11: セールスPitが創りたい世界
   ============================================== */
.splf-world {
  position: relative;
  padding-bottom: min(calc(138 / 1440 * 100vw), 138px);
}

.splf-world::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(1280 / 1440 * 100vw), 1280px);
  height: 1px;
  transform: translateX(-50%);
  background-image: var(--splf-navy);
}

.splf-world__inner {
  position: relative;
  z-index: 2;
  width: min(calc(672 / 1440 * 100vw), 672px);
  margin: 0 auto;
  padding-top: min(calc(165 / 1440 * 100vw), 165px);
}

.splf-world__title {
  margin: 0;
  background-image: var(--splf-navy);
  background-clip: text;
  font-size: min(calc(40 / 1440 * 100vw), 40px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: transparent;
}

.splf-world__text {
  margin: min(calc(40 / 1440 * 100vw), 40px) 0 0;
  background-image: var(--splf-navy);
  background-clip: text;
  font-size: min(calc(16 / 1440 * 100vw), 16px);
  font-weight: 400;
  line-height: 2;
  text-align: center;
  color: transparent;
}

.splf-world__photos {
  position: absolute;
  top: min(calc(80 / 1440 * 100vw), 80px);
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* 写真はFigmaのグループ(Frame 192/193)をそのまま1枚のPNGとして書き出したもの */
img.splf-world__photo-group {
  width: min(calc(292 / 1440 * 100vw), 292px);
  height: auto;
}

/* ==============================================
   Section 13: 運営会社情報（フッター）
   ============================================== */
.splf-footer {
  padding: min(calc(40 / 1440 * 100vw), 40px);
  background-image: linear-gradient(49.45deg, #1a2a69 0%, #6beef6 100%);
  color: #fff;
}

.splf-footer__title {
  margin: 0;
  font-size: min(calc(18 / 1440 * 100vw), 18px);
  font-weight: 600;
  line-height: 2;
}

.splf-footer__text {
  margin: min(calc(8 / 1440 * 100vw), 8px) 0 0;
  font-size: min(calc(12 / 1440 * 100vw), 12px);
  font-weight: 400;
  line-height: 2;
}

a.splf-footer__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.splf-footer__link:hover {
  opacity: 0.7;
}

.splf-footer__privacy {
  margin: min(calc(16 / 1440 * 100vw), 16px) 0 0;
  font-size: min(calc(12 / 1440 * 100vw), 12px);
  font-weight: 400;
  line-height: 2;
}

.splf-footer__copy {
  margin: min(calc(16 / 1440 * 100vw), 16px) 0 0;
  font-size: min(calc(12 / 1440 * 100vw), 12px);
  font-weight: 400;
  line-height: 2;
}

/* ==============================================
   Section 14: SP固定CTA
   ============================================== */
.splf-fixed-cta {
  display: none;
}

/* ==============================================
   SP（<= 750px）
   ============================================== */
@media screen and (width <= 750px) {
  .splf-sp-only {
    display: inline;
  }

  /* --- Utilities ------------------------------------ */
  .splf-btn {
    height: calc(56 / 393 * 100vw);
    gap: calc(8 / 393 * 100vw);
    padding: 0 calc(16 / 393 * 100vw);
    font-size: calc(16 / 393 * 100vw);
  }

  .splf-btn--sm {
    height: calc(40 / 393 * 100vw);
    font-size: calc(14 / 393 * 100vw);
  }

  .splf-btn--wide {
    width: calc(361 / 393 * 100vw);
    height: calc(56 / 393 * 100vw);
    font-size: calc(16 / 393 * 100vw);
  }

  /* SPでは矢印が大きく見えすぎるため、PC比でさらに縮小する */
  img.splf-icon-arrow {
    width: calc(24 / 393 * 50vw);
    height: calc(24 / 393 * 50vw);
  }

  .splf-icon-chevron {
    width: calc(8 / 393 * 100vw);
    height: calc(8 / 393 * 100vw);
  }

  .splf-slash-note {
    gap: calc(14 / 393 * 100vw);
    font-size: calc(14 / 393 * 100vw);
  }

  .splf-slash-note::before,
  .splf-slash-note::after {
    width: calc(14 / 393 * 100vw);
    height: calc(18 / 393 * 100vw);
  }

  /* --- Heading -------------------------------------- */
  .splf-heading {
    width: calc(337 / 393 * 100vw);
    height: calc(56 / 393 * 100vw);
    margin-left: 0;
  }

  .splf-heading::before,
  .splf-heading::after {
    background-size: calc(337 / 393 * 100vw) 100%;
  }

  .splf-heading::before {
    width: calc(308 / 393 * 100vw);
    clip-path: polygon(0 0, 100% 0, calc(100% - (24 / 393 * 100vw)) 100%, 0 100%);
    transform: none;
  }

  .splf-heading::after {
    left: calc(296 / 393 * 100vw);
    width: calc(16 / 393 * 100vw);
    background-position: calc(-296 / 393 * 100vw) 0;
    transform: skewX(-23.4deg);
  }

  .splf-heading__text {
    left: calc(15 / 393 * 100vw);
    font-size: calc(18 / 393 * 100vw);
  }

  /* --- Header --------------------------------------- */
  .splf-header {
    align-items: center;
    padding-right: calc(16 / 393 * 100vw);
  }

  .splf-header__logo {
    padding: calc(8 / 393 * 100vw);
    border-radius: 0 0 calc(32 / 393 * 100vw);
  }

  .splf-header__logo img {
    width: calc(140 / 393 * 100vw);
  }

  .splf-header__nav {
    display: none;
  }

  .splf-header__sp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 / 393 * 100vw);
    height: calc(40 / 393 * 100vw);
    padding: 0 calc(12 / 393 * 100vw);
    border-radius: 999px;

    /* 背景の白は a 側に残し、グラデ文字のクリップは span 側で行う（clipを同居させると白背景が消える） */
    background-color: #fff;
    font-size: calc(12 / 393 * 100vw);
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: transparent;
  }

  .splf-header__sp-btn span {
    background-image: var(--splf-navy);
    background-clip: text;
    color: transparent;
  }

  .splf-header__sp-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--splf-navy) border-box;
    mask:
      linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  .splf-header__sp-btn .splf-icon-arrow {
    color: #23245d;
  }

  /* --- KV ------------------------------------------- */
  .splf-kv {
    height: calc(800 / 393 * 100vw);
  }

  img.splf-kv__bg-img--pc {
    display: none;
  }

  img.splf-kv__bg-img--sp {
    display: block;
    height: auto;
  }

  .splf-kv__inner {
    padding-top: calc(270 / 393 * 100vw);
    padding-left: calc(16 / 393 * 100vw);
  }

  .splf-kv__lead {
    display: none;
  }

  .splf-kv__lead--sp {
    display: block;
    margin-top: calc(16 / 393 * 100vw);
    font-size: calc(18 / 393 * 100vw);
  }

  .splf-kv__title {
    margin-top: 0;
  }

  .splf-kv__title-line {
    padding-left: calc(12 / 393 * 100vw);
    background-size: calc(361 / 393 * 100vw) 100%;
    font-size: calc(30 / 393 * 100vw);
  }

  .splf-kv__title-line:first-child {
    width: calc(361 / 393 * 100vw);
    height: calc(59 / 393 * 100vw);
  }

  .splf-kv__title-line:last-child {
    width: calc(241 / 393 * 100vw);
    height: calc(62 / 393 * 100vw);
    margin-top: calc(-8 / 393 * 100vw);
  }

  .splf-kv__badges {
    gap: calc(15 / 393 * 100vw);
    margin-top: calc(25 / 393 * 100vw);
  }

  .splf-kv__badge {
    width: calc(109 / 393 * 100vw);
    height: calc(109 / 393 * 100vw);
    box-shadow: 7px 7px 25px rgb(12 36 57 / 27%);
  }

  .splf-kv__badge-cap {
    font-size: calc(11 / 393 * 100vw);
  }

  .splf-kv__badge-cap--sm {
    font-size: calc(9 / 393 * 100vw);
  }

  .splf-kv__badge-main {
    font-size: calc(36 / 393 * 100vw);
  }

  .splf-kv__badge-main small {
    font-size: calc(13 / 393 * 100vw);
  }

  .splf-kv__badge-main--lg small {
    font-size: calc(15 / 393 * 100vw);
  }

  .splf-kv__badge-main--md {
    font-size: calc(16 / 393 * 100vw);
  }

  .splf-kv__badge-sub {
    font-size: calc(9 / 393 * 100vw);
  }

  .splf-kv__cta {
    display: none;
  }

  .splf-kv__scroll {
    display: none;
  }

  /* --- Jobs ----------------------------------------- */
  .splf-jobs {
    padding-top: 0;
    padding-bottom: calc(120 / 393 * 100vw);
  }

  .splf-carousel {
    margin-top: calc(56 / 393 * 100vw);
  }

  .splf-carousel__viewport {
    padding: calc(12 / 393 * 100vw) 0;
  }

  .splf-carousel__track {
    gap: calc(16 / 393 * 100vw);
  }

  .splf-carousel__nav {
    gap: calc(24 / 393 * 100vw);
    margin-top: calc(48 / 393 * 100vw);
  }

  .splf-carousel__arrow {
    width: calc(32 / 393 * 100vw);
    height: calc(32 / 393 * 100vw);
    border-radius: calc(4 / 393 * 100vw);
  }

  .splf-carousel__dots {
    gap: calc(12 / 393 * 100vw);
  }

  .splf-carousel__dot {
    width: calc(8 / 393 * 100vw);
    height: calc(8 / 393 * 100vw);
  }

  .splf-carousel__dot.is-active {
    width: calc(24 / 393 * 100vw);
    height: calc(12 / 393 * 100vw);
  }

  .splf-job {
    gap: calc(16 / 393 * 100vw);
    width: calc(240 / 393 * 100vw);
    min-height: calc(378 / 393 * 100vw);
    padding: calc(16 / 393 * 100vw);
    border-radius: calc(24 / 393 * 100vw);
  }

  .splf-job__body {
    gap: calc(16 / 393 * 100vw);
  }

  .splf-job__title {
    font-size: calc(16 / 393 * 100vw);
  }

  .splf-job__chip {
    padding: calc(4 / 393 * 100vw) calc(16 / 393 * 100vw);
    font-size: calc(8 / 393 * 100vw);
  }

  .splf-job__value {
    font-size: calc(12 / 393 * 100vw);
  }

  .splf-job__note {
    margin-top: 0;
    font-size: calc(12 / 393 * 100vw);
  }

  .splf-job__btn {
    height: calc(48 / 393 * 100vw);
    font-size: calc(14 / 393 * 100vw);
  }

  .splf-job--secret {
    border-radius: calc(16 / 393 * 100vw);
  }

  /* --- CTA ------------------------------------------ */
  .splf-cta {
    gap: calc(16 / 393 * 100vw);
    padding: calc(32 / 393 * 100vw) calc(16 / 393 * 100vw);
  }

  .splf-cta .splf-btn {
    margin-top: 0;
  }

  .splf-cta__note {
    margin-top: 0;
    font-size: calc(14 / 393 * 100vw);
  }

  /* --- Recommend ------------------------------------ */
  .splf-recommend {
    padding-top: calc(120 / 393 * 100vw);
  }

  .splf-recommend__list {
    gap: calc(40 / 393 * 100vw);
    width: calc(361 / 393 * 100vw);
    margin-top: calc(56 / 393 * 100vw);
  }

  /* アイコンは吹き出しの左横に並べ、発言者と内容の関係を分かりやすくする */
  .splf-recommend__item,
  .splf-recommend__item--right {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(10 / 393 * 100vw);
  }

  .splf-recommend__avatar {
    order: 0;
    width: calc(56 / 393 * 100vw);
    height: calc(56 / 393 * 100vw);
  }

  .splf-recommend__avatar img {
    top: calc(7 / 393 * 100vw);
    left: calc(10 / 393 * 100vw);
    width: calc(37 / 393 * 100vw);
  }

  .splf-recommend__bubble {
    order: 1;
    flex: 1;
    gap: calc(8 / 393 * 100vw);
    width: auto;
    padding: calc(8 / 393 * 100vw) calc(12 / 393 * 100vw);
    border-radius: calc(8 / 393 * 100vw);
  }

  .splf-recommend__item--left .splf-recommend__bubble::before,
  .splf-recommend__item--right .splf-recommend__bubble::before {
    inset: calc(16 / 393 * 100vw) auto auto calc(-10 / 393 * 100vw);
    clip-path: polygon(100% 0, 100% 100%, 0 20%);
  }

  .splf-recommend__label {
    gap: calc(8 / 393 * 100vw);
    font-size: calc(10 / 393 * 100vw);
  }

  /* SPでは発言者ラベルの左右の棒線を非表示にする */
  .splf-recommend__label::before,
  .splf-recommend__label::after {
    display: none;
  }

  .splf-recommend__text {
    font-size: calc(14 / 393 * 100vw);
    text-align: left;
  }

  /* --- Choice --------------------------------------- */
  .splf-choice {
    margin-bottom: calc(-85 / 393 * 100vw);
    padding-top: calc(64 / 393 * 100vw);
  }

  .splf-choice__box {
    width: calc(362 / 393 * 100vw);
    height: calc(182 / 393 * 100vw);
    border-radius: calc(16 / 393 * 100vw);
  }

  .splf-choice__title {
    top: calc(-16 / 393 * 100vw);
    padding: calc(8 / 393 * 100vw) calc(24 / 393 * 100vw);
    font-size: calc(14 / 393 * 100vw);
  }

  .splf-choice__actions {
    flex-direction: column;
    gap: calc(16 / 393 * 100vw);
    width: calc(330 / 393 * 100vw);
    margin-top: calc(16 / 393 * 100vw);
  }

  .splf-choice__actions > .splf-btn,
  .splf-choice__col {
    width: 100%;
  }

  .splf-choice__note {
    font-size: calc(12 / 393 * 100vw);
  }

  /* --- Reasons -------------------------------------- */
  .splf-reasons {
    padding: calc(125 / 393 * 100vw) 0 calc(80 / 393 * 100vw);
  }

  .splf-reasons__title {
    font-size: calc(26 / 393 * 100vw);
    line-height: 1.4;
    white-space: nowrap;
  }

  .splf-reasons__title-tail {
    display: inline;
    font-size: calc(19 / 393 * 100vw);
  }

  .splf-reasons__list {
    grid-template-columns: 1fr;
    gap: calc(16 / 393 * 100vw);
    width: calc(360 / 393 * 100vw);
    margin-top: calc(48 / 393 * 100vw);
  }

  .splf-reasons__card {
    gap: calc(16 / 393 * 100vw);
    min-height: calc(261 / 393 * 100vw);
    padding: calc(24 / 393 * 100vw) calc(16 / 393 * 100vw);
    border-radius: calc(24 / 393 * 100vw);
  }

  .splf-reasons__icon {
    width: calc(120 / 393 * 100vw);
    height: calc(120 / 393 * 100vw);
  }

  .splf-reasons__card-title {
    font-size: calc(18 / 393 * 100vw);
  }

  /* SPでは見出し内の br を無効化し、不要な改行を防ぐ */
  .splf-reasons__card-title br {
    display: none;
  }

  .splf-reasons__card-text {
    margin-top: calc(-8 / 393 * 100vw);
    font-size: calc(14 / 393 * 100vw);
  }

  /* --- Voice ---------------------------------------- */
  .splf-voice {
    padding-top: calc(120 / 393 * 100vw);
    padding-bottom: calc(120 / 393 * 100vw);
  }

  .splf-voice__list {
    gap: calc(24 / 393 * 100vw);
    width: calc(361 / 393 * 100vw);
    margin-top: calc(56 / 393 * 100vw);
  }

  .splf-voice__card {
    gap: calc(16 / 393 * 100vw);
    padding: calc(24 / 393 * 100vw) calc(16 / 393 * 100vw);
    border-radius: calc(24 / 393 * 100vw);
  }

  .splf-voice__head {
    gap: calc(16 / 393 * 100vw);
  }

  .splf-voice__avatar {
    width: calc(56 / 393 * 100vw);
    height: calc(56 / 393 * 100vw);
  }

  .splf-voice__avatar img {
    top: calc(5 / 393 * 100vw);
    left: calc(4 / 393 * 100vw);
    width: calc(48 / 393 * 100vw);
  }

  .splf-voice__card:nth-child(2) .splf-voice__avatar img {
    top: calc(6 / 393 * 100vw);
    left: calc(9 / 393 * 100vw);
    width: calc(37 / 393 * 100vw);
  }

  .splf-voice__card:nth-child(3) .splf-voice__avatar img {
    top: calc(6 / 393 * 100vw);
    left: calc(3 / 393 * 100vw);
    width: calc(47 / 393 * 100vw);
  }

  .splf-voice__name {
    font-size: calc(12 / 393 * 100vw);
  }

  .splf-voice__tag {
    padding: calc(4 / 393 * 100vw) calc(8 / 393 * 100vw);
    font-size: calc(10 / 393 * 100vw);
  }

  .splf-voice__title {
    font-size: calc(18 / 393 * 100vw);
  }

  .splf-voice__text {
    font-size: calc(14 / 393 * 100vw);
  }

  /* --- Flow ----------------------------------------- */
  .splf-flow {
    padding-top: calc(120 / 393 * 100vw);
    padding-bottom: calc(120 / 393 * 100vw);
  }

  .splf-flow__list {
    flex-flow: column nowrap;
    gap: calc(16 / 393 * 100vw);
    width: calc(362 / 393 * 100vw);
    margin-top: calc(56 / 393 * 100vw);
  }

  .splf-flow__card {
    gap: calc(8 / 393 * 100vw);
    width: 100%;
    min-height: calc(237 / 393 * 100vw);
    padding: calc(16 / 393 * 100vw) calc(24 / 393 * 100vw);
    border-radius: calc(24 / 393 * 100vw);
  }

  .splf-flow__num {
    top: calc(-13 / 393 * 100vw);
    left: calc(-4 / 393 * 100vw);
    font-size: calc(48 / 393 * 100vw);
  }

  .splf-flow__icon {
    width: calc(80 / 393 * 100vw);
    height: calc(80 / 393 * 100vw);
  }

  .splf-flow__card-title {
    font-size: calc(18 / 393 * 100vw);
  }

  .splf-flow__card-text {
    font-size: calc(14 / 393 * 100vw);
  }

  /* --- FAQ ------------------------------------------ */
  .splf-faq {
    padding-top: calc(120 / 393 * 100vw);
    padding-bottom: calc(71 / 393 * 100vw);
  }

  .splf-faq__list {
    gap: calc(16 / 393 * 100vw);
    width: calc(364 / 393 * 100vw);
    margin-top: calc(56 / 393 * 100vw);
  }

  .splf-faq__q {
    gap: calc(16 / 393 * 100vw);
    padding: calc(16 / 393 * 100vw) calc(24 / 393 * 100vw);
  }

  .splf-faq__mark {
    font-size: calc(24 / 393 * 100vw);
  }

  .splf-faq__bar {
    height: calc(20 / 393 * 100vw);
  }

  .splf-faq__text {
    font-size: calc(14 / 393 * 100vw);
  }

  .splf-faq__toggle {
    width: calc(24 / 393 * 100vw);
    height: calc(24 / 393 * 100vw);
    border-radius: calc(4 / 393 * 100vw);
  }

  .splf-faq__toggle::before {
    width: calc(12 / 393 * 100vw);
  }

  .splf-faq__toggle::after {
    height: calc(12 / 393 * 100vw);
  }

  .splf-faq__a p {
    padding: 0 calc(24 / 393 * 100vw) calc(16 / 393 * 100vw) calc(56 / 393 * 100vw);
    font-size: calc(13 / 393 * 100vw);
  }

  /* --- World ---------------------------------------- */
  .splf-world {
    padding-bottom: 0;
  }

  .splf-world::before {
    width: calc(360 / 393 * 100vw);
  }

  .splf-world__inner {
    width: calc(360 / 393 * 100vw);
    padding-top: calc(56 / 393 * 100vw);
  }

  .splf-world__title {
    font-size: calc(24 / 393 * 100vw);
    text-align: left;
  }

  .splf-world__text {
    margin-top: calc(16 / 393 * 100vw);
    font-size: calc(14 / 393 * 100vw);
    text-align: left;
  }

  .splf-world__photos {
    position: relative;
    top: auto;
    left: auto;
    justify-content: center;
    gap: calc(29 / 393 * 100vw);
    margin-top: calc(32 / 393 * 100vw);
  }

  img.splf-world__photo-group {
    width: calc(160 / 393 * 100vw);
  }

  /* --- Footer --------------------------------------- */
  .splf-footer {
    padding: calc(32 / 393 * 100vw) calc(16 / 393 * 100vw) calc(160 / 393 * 100vw);
  }

  .splf-footer__title {
    font-size: calc(18 / 393 * 100vw);
  }

  .splf-footer__text,
  .splf-footer__privacy,
  .splf-footer__copy {
    font-size: calc(12 / 393 * 100vw);
  }

  /* --- SP固定CTA ------------------------------------ */
  .splf-fixed-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 / 393 * 100vw);
    width: 100%;
    padding: calc(12 / 393 * 100vw) calc(16 / 393 * 100vw) calc(16 / 393 * 100vw);
    background-color: rgb(246 247 250 / 92%);
    backdrop-filter: blur(8px);
  }

  .splf-fixed-cta .splf-btn {
    width: calc(361 / 393 * 100vw);
    box-shadow: var(--splf-btn-shadow);
  }
}