/* ========================================
   ファーストビュー
======================================== */

.fv {
  position: relative;
  padding: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .fv {
    padding: 0;
  }
}

.fv__container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* メインコンテンツ（100svh対象） */
.fv__main-content {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12.5rem 1.5rem 40px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .fv__main-content {
    padding: 22.5rem 1.5rem 3rem;
    height: initial;
  }
}

@media (min-width: 1281px) {
  .fv__main-content {
    height: initial;
    padding: 22.5rem 1.5rem 40px;
  }
}

/* 背景画像スライダー全体 */
.fv__bg-slider-wrapper {
  position: absolute;
  top: -8%;
  left: 50%;
  width: 2500px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 25px;
  transform: translate(-50%, -50%) rotate(42.479deg);
  transform-origin: center;
}

@media (max-width: 768px) {
  .fv__bg-slider-wrapper {
    height: 454px;
    top: -4%;
    left: 61%;
    bottom: 65%;
    transform: translate(-50%, 0) rotate(36.263deg);
  }
}

/* 上段・下段スライダー */
.fv__bg-slider {
  height: 282px;
  max-height: 282px;
  overflow: hidden;
  display: flex;
  width: max-content;
}

@media (max-width: 768px) {
  .fv__bg-slider {
    height: 162px;
    max-height: 162px;
  }
}

.fv__bg-slider--top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  animation: fv-scroll-left 40s linear infinite;
  animation-play-state: paused;
  will-change: transform;
  backface-visibility: hidden;
}

.fv__bg-slider--bottom {
  animation: fv-scroll-right 40s linear infinite;
  animation-play-state: paused;
  will-change: transform;
  backface-visibility: hidden;
}

/* エンドレスリピートアニメーション（左から右へ） */
@keyframes fv-scroll-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-100% / 3), 0, 0);
  }
}

/* エンドレスリピートアニメーション（右から左へ） */
@keyframes fv-scroll-right {
  0% {
    transform: translate3d(calc(-100% / 3), 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* スライダートラック */
.fv__bg-slider-track {
  display: flex;
  align-items: flex-end;
  gap: 25px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .fv__bg-slider-track {
    gap: 14px;
  }
}

/* 2つのトラック間のギャップを25pxに設定 */
.fv__bg-slider-track + .fv__bg-slider-track {
  margin-left: 25px;
}

@media (max-width: 768px) {
  .fv__bg-slider-track + .fv__bg-slider-track {
    margin-left: 14px;
}
}

.fv__bg-slide {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.fv__bg-slide img {
  max-width: 400px;
  max-height: 282px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .fv__bg-slide {
    max-height: 162px;
  }

  .fv__bg-slide img {
    max-width: 227px;
    max-height: 162px;
  }
}

/* キャッチコピー */
.fv__catch {
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .fv__catch {
    margin-bottom: 1.3125rem;
  }
}

.fv__catch-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: #000;
  margin-bottom: 1.5rem;
  border: 1px solid #000;
}

@media (max-width: 768px) {
  .fv__catch-label {
    padding: 0.6016rem 0.9297rem;
    margin-bottom: 0.875rem;
    border-width: 0.785px;
  }
}

.fv__catch-label-arrow {
  position: absolute;
  left: 1.1875rem;
  bottom: -1rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.5rem 1.34375rem 0 0;
  border-color: #000 transparent transparent transparent;
  transform: rotate(180deg) scaleY(-1);
}

@media (max-width: 768px) {
  .fv__catch-label-arrow {
    left: 0.8706rem;
    border-width: 1.0303rem 0.9231rem 0 0;
  }
}

.fv__catch-icon {
  width: 1.375rem;
  height: auto;
  color: #08ff7f;
}

.fv__catch-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: #08ff7f;
  line-height: 1;
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .fv__catch-text {
    font-size: 1.125rem;
  }
}

.fv__catch-title {
  font-size: 3.66rem;
  font-weight: 700;
  line-height: 1.36;
  color: #000;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (max-width: 768px) {
  .fv__catch-title {
    font-size: 2.3748rem; /* 38px / 14px = 2.714rem */
    line-height: 1.368;
  }
}

.fv__catch-title-line1,
.fv__catch-title-line2,
.fv__catch-title-line3 {
  display: block;
}

/* 「30」の数字スタイル */
.fv__catch-title-price {
  font-family: 'DIN Alternate', 'Arial', sans-serif;
  font-weight: 700;
  font-size: 6.86rem;
  line-height: 1;
  margin: 0 0.25rem;
}

@media (max-width: 768px) {
  .fv__catch-title-price {
    font-size: 4.5001rem; /* 72px / 14px = 5.143rem */
  }
}

/* PC版: line3とsp-onlyを非表示 */
.fv__catch-title-line3,
.fv__catch-title-sp-only {
  display: none;
}

.fv__catch-title-pc-only {
  display: inline;
}

/* SP版: line3とsp-onlyを表示、pc-onlyを非表示 */
@media (max-width: 768px) {
  .fv__catch-title-line3,
  .fv__catch-title-sp-only {
    display: inline;
  }

  .fv__catch-title-pc-only {
    display: none;
  }
}

/* 説明文 */
.fv__description {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #000;
  margin: 0 0 2.5rem;
  max-width: 600px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .fv__description {
    font-size: 0.875rem;
    margin-bottom: 1.3125rem;
  }
}

/* 3つの特徴 */
.fv__features {
  display: flex;
  gap: 1rem;
  max-width: 608px;
  margin-top: 0;
}

@media (max-width: 768px) {
  .fv__features {
    gap: 0.6562rem;
    margin-top: 0;
  }
}

.fv__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  border-bottom: 1px solid #000;
  padding-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .fv__feature {
    gap: 0.3281rem;
    padding-bottom: 0.3281rem;
  }
}

.fv__feature-icon {
  width: 1.625rem;
  height: 1.875rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .fv__feature-icon {
    width: 1.6336rem; /* 最大幅26.135px / 14px = 1.867rem */
    height: 1.75rem; /* 最大高さ28px / 14px = 2rem */
  }
}

.fv__feature-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* SP版: 各アイコンの個別サイズ調整 */
@media (max-width: 768px) {
  .fv__feature--1 .fv__feature-icon {
    width: 1.2862rem; /* 20.588px / 14px = 1.47rem */
    height: 1.75rem; /* 28px / 14px = 2rem */
  }

  .fv__feature--2 .fv__feature-icon {
    width: 1.6336rem; /* 26.135px / 14px = 1.867rem */
    height: 1.75rem; /* 28.022px / 14px ≈ 2rem */
  }

  .fv__feature--3 .fv__feature-icon {
    width: 1.5041rem; /* 24.069px / 14px = 1.719rem */
    height: 1.5575rem; /* 24.924px / 14px = 1.78rem */
  }
}

.fv__feature-content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
  flex: 1;
}

.fv__feature-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  line-height: 1.75rem;
}

@media (max-width: 768px) {
  .fv__feature-number {
    font-size: 1.1253rem; /* 18px / 14px = 1.286rem */
    line-height: 1.5312rem;
  }
}

.fv__feature-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #000;
  line-height: 1.75rem;
}

@media (max-width: 768px) {
  .fv__feature-text {
    font-size: 0.6562rem;
    line-height: 1.2031rem;
  }
}

/* 特徴1: 週1 からアサイン可能 */
/* PC版: 「週1 からアサイン可能」を横並び */
.fv__feature--1 .fv__feature-text--line1,
.fv__feature--1 .fv__feature-text--line2 {
  display: inline;
}

/* SP版: 1行目「週1 から」、2行目「アサイン可能」 */
@media (max-width: 768px) {
  .fv__feature--1 .fv__feature-content {
    gap: 0;
  }

  .fv__feature--1 .fv__feature-text--line2 {
    width: 100%;
  }
}

/* 特徴2: 契約後の継続率 90% */
/* PC版: 「契約後の継続率」を1行で表示 */
.fv__feature--2 .fv__feature-text--line2 {
  display: none;
}

.fv__feature--2 .fv__feature-text--line1::after {
  content: '継続率';
}

/* SP版: 1行目「契約後の」、2行目「継続率 90%」 */
@media (max-width: 768px) {
  .fv__feature--2 .fv__feature-content {
    display: block;
  }

  .fv__feature--2 .fv__feature-text--line1 {
    display: block;
    line-height: 1.2031rem;
  }

  .fv__feature--2 .fv__feature-text--line1::after {
    content: '';
  }

  .fv__feature--2 .fv__feature-text--line2 {
    display: inline-block;
    line-height: 1.2031rem;
  }

  .fv__feature--2 .fv__feature-number {
    display: inline-block;
    line-height: 1.5312rem;
    vertical-align: bottom;
  }
}

/* 特徴3: 最短 5日 で稼働開始 */
/* SP版: 「最短 5日」を1行目、「で稼働開始」を2行目 */
@media (max-width: 768px) {
  .fv__feature--3 .fv__feature-content {
    gap: 0;
  }

  .fv__feature--3 .fv__feature-text--after {
    width: 100%;
  }
}

/* 新着JOINカード - 背景 */
.fv__join-card {
  background: rgba(255, 255, 255, 0.6);
  padding: 2rem 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

@media (max-width: 768px) {
  .fv__join-card {
    margin-top: 1.3125rem;
    padding: 1.3125rem 0;
  }
}

/* 新着JOINカード - インナー（コンテンツ幅制限） */
.fv__join-card-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

@media (max-width: 768px) {
  .fv__join-card-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
    padding: 0 0.875rem;
  }
}

/* 新着JOINバッジ（枠外） */
.fv__join-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.fv__join-badge-dot {
  display: block;
  width: 12px;
  height: 12px;
  background: #08FF7F;
  border-radius: 50%;
}

.fv__join-badge-text {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .fv__join-badge-text {
    font-size: 0.875rem;
  }
}

/* 枠内のコンテンツ */
.fv__join-box {
  flex: 1;
  background: #fff;
  border: 1px solid #b5b5b5;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

@media (max-width: 768px) {
  .fv__join-box {
    padding: 1.0938rem 0.875rem;
    gap: 0.6562rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
}

.fv__join-tag {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0;
  padding-right: 1rem;
  position: relative;
  flex-shrink: 0;
}

/* PC版: 右側に縦線 */
@media (min-width: 769px) {
  .fv__join-tag::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background: #e5e5e5;
  }
}

@media (max-width: 768px) {
  .fv__join-tag {
    font-size: 0.875rem;
    padding-right: 0;
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 0.4375rem;
    border-bottom: 1px solid #e5e5e5;
  }
}

.fv__join-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  margin: 0;
  line-height: 1.75;
  flex: 1;
}

@media (max-width: 768px) {
  .fv__join-title {
    font-size: 0.875rem; /* 14px / 14px = 1rem */
    line-height: 1.6;
    grid-column: 1;
    grid-row: 2;
    padding-top: 0.4375rem;
  }
}

/* 矢印アクション */
.fv__join-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  align-self: stretch;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .fv__join-actions {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

.fv__join-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.fv__join-arrow:hover {
  opacity: 0.6;
}

/* 擬似要素で矢印を描画 */
.fv__join-arrow::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #000;
  border-right: 1.5px solid #000;
  background: transparent;
  left: 50%;
  top: 50%;
}

/* 上向き矢印（prev） */
.fv__join-arrow--prev::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 下向き矢印（next） */
.fv__join-arrow--next::after {
  transform: translate(-50%, -50%) rotate(135deg);
}

/* CTAボタン */
.fv__join-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.125rem 2.3rem;
  background: #e2ff29;
  color: #000;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 100px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.fv__join-cta:hover {
  background: #d0ed1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(226, 255, 41, 0.3);
}

.fv__join-cta-icon {
  width: 1.125rem;
  height: auto;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .fv__join-cta {
    font-size: 0.7499rem; /* 12px / 14px = 0.857rem */
    padding: 0.875rem 1.75rem;
    white-space: normal;
  }

  .fv__join-cta-icon {
    width: 0.7499rem;
  }
}

/* ========================================
   Problemセクション
======================================== */

.problem {
  position: relative;
  padding: 9.375rem 1.5rem 14.5rem;
  overflow: hidden;
}

@media (max-width: 768px) {
  .problem {
    padding: 5rem 1.3125rem 10.5rem;
  }
}

/* 背景オーバーレイ */
.problem::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: 0;
}

.problem__container {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* 見出し */
.problem__title {
  text-align: center;
  font-weight: 700;
  margin: 0 0 4rem;
  color: #fff;
  line-height: 1;
}

@media (max-width: 768px) {
  .problem__title {
    margin: 0 0 2.1875rem;
  }
}

.problem__title-line1,
.problem__title-line2 {
  display: block;
}

.problem__title-line1 {
  font-size: 2.5rem;
  line-height: 1.75;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .problem__title-line1 {
    font-size: 1.3746rem; /* 22px / 14px = 1.571rem */
    line-height: 1.6;
  }
}

.problem__title-line2 {
  font-size: 2.5rem;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .problem__title-line2 {
    font-size: 1.3746rem; /* 22px / 14px = 1.571rem */
    line-height: 1.6;
  }
}

.problem__title-highlight {
  font-size: 3.75rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .problem__title-highlight {
    font-size: 2.2496rem; /* 36px / 14px = 2.571rem */
  }
}

/* カードグリッド */
.problem__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.1875rem 1.875rem;
  max-width: 1120px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .problem__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4.0625rem 2rem;
  }
}

@media (max-width: 768px) {
  .problem__cards {
    gap: 2.1875rem 0.4375rem;
    padding: 0;
  }
}

/* 個別カード */
.problem__card {
  position: relative;
  min-width: 0;
}

/* PC版：個別カードの幅指定 */
@media (min-width: 769px) {
  .problem__card:nth-child(1) {
    flex: 0 0 336px;
  }

  .problem__card:nth-child(2) {
    flex: 0 0 304px;
  }

  .problem__card:nth-child(3) {
    flex: 0 0 352px;
  }

  .problem__card:nth-child(4) {
    flex: 0 0 336px;
  }

  .problem__card:nth-child(5) {
    flex: 0 0 352px;
  }

  .problem__card:nth-child(6) {
    flex: 0 0 328px;
  }
}

.problem__card-content {
  background: #000;
  padding: 2rem 1rem;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* ドット装飾 - 大きな背景色の円 */
.problem__card-content::after {
  content: '';
  position: absolute;
  bottom: -0.8125rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.625rem;
  height: 1.625rem;
  background: #000000;
  border-radius: 50%;
  pointer-events: none;
}

/* ドット装飾 - 小さな緑色の円 */
.problem__card-content::before {
  content: '';
  position: absolute;
  bottom: -1.6rem;
  right: calc(50% - 1.1rem);
  width: 0.625rem;
  height: 0.625rem;
  background: #000000;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .problem__card-content {
    padding: 1rem;
    min-height: 118px;
  }
}

.problem__card-text {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.625;
}

@media (max-width: 768px) {
  .problem__card-text {
    font-size: 0.875rem;
    line-height: 1.714;
  }
}

.problem__card-text--highlight {
  color: #08ff7f;
  font-size: 1.5rem;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .problem__card-text--highlight {
    font-size: 1.125rem;
    line-height: 1.444;
  }
}

/* ========================================
   Why-usセクション
======================================== */

.why-us {
  position: relative;
  background: #fff;
  padding: 5rem 1.5rem 8.75rem;
  margin-top: -5rem;
  border-radius: 80px;
}

/* 左上の背景画像 */
.why-us::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background-image: url('../assets/images/why-us-background-left.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 0;
}

/* 右上の背景画像 */
.why-us::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background-image: url('../assets/images/why-us-background-right.png');
  background-repeat: no-repeat;
  z-index: 0;
}

@media (max-width: 768px) {
  .why-us {
    padding: 3.0625rem 0.875rem 5rem;
    border-radius: 60px;
  }

  .why-us::before,
  .why-us::after {
    width: 200px;
    height: 200px;
  }
}

.why-us__container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 768px) {
  .why-us__container {
    overflow: visible;
  }
}

/* タイトル */
.why-us__header {
  text-align: center;
  margin-bottom: 3.75rem;
}

@media (max-width: 768px) {
  .why-us__header {
    margin-bottom: 2.5rem;
  }
}

.why-us__title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.8;
  margin: 0 0 0.5rem;
  color: #000;
}

@media (max-width: 768px) {
  .why-us__title {
    font-size: 1.2031rem;
  }
}

.why-us__title-logo {
  margin-right: 0.2rem;
  width: 250px;
  height: 61px;
}

@media (max-width: 768px) {
  .why-us__title-logo {
    font-size: 1.2031rem;
    width: 200px;
    height: 49px;
  }
}

.why-us__title-logo img {
    width: 100%;
    height: auto;
}

.why-us__title-suffix {
  font-size: 1.75rem;
}

@media (max-width: 768px) {
  .why-us__title-suffix {
    font-size: 1.25rem;
  }
}

.why-us__title-underline {
  width: 60px;
  height: 4px;
  background: #13a92f;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .why-us__title-underline {
    height: 3px;
  }
}

/* 説明文 */
.why-us__description {
  text-align: center;
  margin-bottom: 7.25rem;
  padding: 0 1.5rem;
}

@media (max-width: 768px) {
  .why-us__description {
    margin-bottom: 6.0625rem;
    padding: 0 0.875rem;
  }
}

.why-us__description-text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  margin: 0;
}

@media (max-width: 768px) {
  .why-us__description-text {
    font-size: 1.25rem;
    line-height: 1.6;
  }
}

/* STEPカード */
.why-us__steps {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  max-width: 1120px;
  margin: 0 auto 6.6875rem;
  padding: 0 1.5rem;
}

@media (max-width: 768px) {
  .why-us__steps {
    flex-direction: column;
    gap: 4.8125rem;
    margin-top: 6.0375rem;
    margin-bottom: 4rem;
    padding: 0 0.875rem;
    align-items: center;
  }
}

.why-us__step {
  flex: 1;
  max-width: 330px;
  position: relative;
}

@media (max-width: 768px) {
  .why-us__step {
    max-width: 327px;
    width: 100%;
  }
}

.why-us__step-badge {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background: #13a92f;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.why-us__step-label {
  font-family: 'DIN Alternate', 'Arial', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.why-us__step-number {
  font-family: 'DIN Alternate', 'Arial', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
  .why-us__step-number {
    font-size: 2rem;
  }
}


.why-us__step-card {
  background: #13a92f;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 359px;
}

.why-us__step-content {
  padding: 3rem 1rem 2rem;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-us__step-text {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  margin: 0;
}

@media (max-width: 768px) {
  .why-us__step-text {
    font-size: 1.125rem;
  }
}

.why-us__step-image {
  margin: 0 1rem 1rem;
  height: 211px;
}

@media (max-width: 768px) {
  .why-us__step-image {
    margin: 0 1rem 1rem;
  }
}

.why-us__step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-us__step-decoration {
  position: absolute;
  bottom: -40px;
  right: -20px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.why-us__step-decoration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .why-us__step-decoration {
    bottom: -30px;
    right: 15px;
    width: 116px;
    height: 134px;
  }
}

/* 月額制の説明 */
.why-us__monthly {
  text-align: center;
  margin-bottom: 4rem;
  padding: 0 1.5rem;
  position: relative;
}

@media (max-width: 768px) {
  .why-us__monthly {
    margin-bottom: 2.625rem;
    padding: 0 0.875rem;
  }
}

.why-us__monthly-arrow {
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .why-us__monthly-arrow {
    margin-bottom: 2.875rem;
  }
}

.why-us__monthly-arrow picture {
  display: block;
  width: 100%;
  max-width: 1023px;
}

.why-us__monthly-arrow img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 480px) {
  .why-us__monthly-arrow picture {
    max-width: 100%;
  }
}

.why-us__monthly-content {
  position: relative;
  z-index: 1;
}

.why-us__monthly-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  margin: 0 0 1rem;
}

.why-us__monthly-title--sp {
  display: none;
}

@media (max-width: 768px) {
  .why-us__monthly-title {
    font-size: 0.9844rem;
    margin: 0 0 0.4375rem;
  }

  .why-us__monthly-title--sp {
    display: block;
  }
}

.why-us__monthly-title-main {
  font-size: 2rem;
  background: #08ff7f;
  padding: 0.05rem 0.3rem;
  display: inline-block;
}

@media (max-width: 768px) {
  .why-us__monthly-title-main {
    font-size: 1.5rem;
  }
}

.why-us__monthly-title-sub {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .why-us__monthly-title-sub {
    font-size: 1.2425rem;
  }
}

.why-us__monthly-text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  margin: 0;
}

.why-us__monthly-text--sp {
  display: none;
}

@media (max-width: 768px) {
  .why-us__monthly-text {
    font-size: 1.2425rem;
    margin: 0 0 0.4375rem;
  }

  .why-us__monthly-text--sp {
    display: block;
    margin: 0;
  }
}

/* 支援の仕組み */

.why-us__support {
  max-width: 1024.5px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .why-us__support {
    padding: 0 1.3125rem;
    background-image: none;
  }
}

.why-us__support-header {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.why-us__support-header-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.7;
  color: #000;
  background: #D4FFE8;
  padding: 1rem 1.65625rem;
  margin: initial;
}

@media (max-width: 768px) {
  .why-us__support-header-title {
    font-size: 1.125rem;
    background: #d4ffe8;
    display: inline-block;
    padding: 0.4375rem 0.6562rem;
  }
}

.why-us__support-header-subtitle {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
}

@media (max-width: 768px) {
  .why-us__support-header-subtitle.sp-only {
    font-size: 0.875rem;
    margin: 0 0 1rem;
    display: block;
  }
}

.why-us__support-diagram {
  padding: 3rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
  background: #d4ffe8;
}

@media (max-width: 768px) {
  .why-us__support-diagram {
    padding: 1.5rem 1rem 2.5rem;
  }
}

.why-us__support-diagram picture {
  width: 100%;
  display: block;
  max-width: 944px;
  margin: 0 auto;
}

.why-us__support-diagram img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   支援実績セクション
======================================== */

.records {
  position: relative;
  padding: 5rem 1.5rem;
  overflow: visible;
}

@media (max-width: 768px) {
  .records {
    padding: 3.0625rem 0 6.5rem 1.5rem;
  }
}

.records__container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

/* ヘッダー（タイトル・説明文・ボタンのコンテナ） */
.records__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

@media (max-width: 768px) {
  .records__header {
    flex-direction: column;
    align-items: initial;
    gap: 1.3125rem;
    margin-bottom: 1.75rem;
    padding-right: 1.5rem;
  }
}

.records__header-content {
  flex: 1;
}

/* タイトル */
.records__title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
  margin: 0 0 1.75rem;
}

@media (max-width: 768px) {
  .records__title {
    font-size: 1.5rem;
    line-height: 1.75;
    margin: 0 0 0.875rem;
  }
}

.records__title-highlight {
  font-size: 3.125rem;
}

@media (max-width: 768px) {
  .records__title-highlight {
    font-size: 2rem;
  }
}

/* 説明文 */
.records__description {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
  margin: 0;
}

@media (max-width: 768px) {
  .records__description {
    line-height: 1.7142857143;
  }
}

/* カード一覧 */
.records__cards {
  display: flex;
  gap: 1rem;
  margin-bottom: 5rem;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .records__cards {
    overflow-x: auto;
    margin-bottom: 1.3125rem;
    gap: 1.625rem;
    padding: 0 0 0.875rem 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .records__cards::-webkit-scrollbar {
    display: none;
  }
}

/* 個別カード - front-page固有スタイル
   共通スタイルは css/components/case-card.css を参照
   ここではfront-page特有のレイアウトのみ上書き */
.records__card {
  background: transparent;
  flex: 0 0 calc((100% - 2rem) / 3);
}

@media (max-width: 768px) {
  .records__card {
    flex: 0 0 275px;
    scroll-snap-align: start;
  }
}

/* front-pageでは画像サイズを固定 */
.records__card-image {
  height: 255px;
  background: #fff;
  aspect-ratio: auto;
}

@media (max-width: 768px) {
  .records__card-image {
    height: 188px;
  }
}

/* 一覧ボタン */
.records__button {
  width: 192px;
  height: 56px;
  flex-shrink: 0;
}

/* PC版：ヘッダー内のボタンを表示、カード下のボタンを非表示 */
.records__button--pc {
  display: flex;
}

.records__button--sp {
  display: none;
}

@media (max-width: 768px) {
  .records__button {
    width: 100%;
    height: 50px;
  }

  /* SP版：ヘッダー内のボタンを非表示、カード下のボタンを表示 */
  .records__button--pc {
    display: none;
  }

  .records__button--sp {
    display: flex;
    margin-bottom: 2.625rem;
    margin-right: 1.5rem;
  }
}

/* recordsセクション内のCTAボックスに右padding（SP版のみ） */
@media (max-width: 768px) {
  .records .unique-cta {
    padding-right: 1.5rem;
  }
}

/* ========================================
   汎用CTAボックス
======================================== */

.unique-cta {
  position: relative;
  max-width: 816px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .unique-cta {
    max-width: 327px;
  }
}

.unique-cta__inner {
  position: relative;
  background: #e2ff29;
  border-radius: 100px;
  padding: 2rem 3rem 2rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 192px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  text-decoration: none;
  color: inherit;
}

.unique-cta__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #C5E000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: -1;
}

.unique-cta__inner:hover::before {
  transform: scaleX(1);
}

@media (max-width: 768px) {
  .unique-cta__inner {
    border-radius: 20px;
    padding: 1.5rem 1rem 2.625rem 1.5rem;
    gap: 1.6rem;
    min-height: 202px;
    flex-direction: column;
  }
}

/* CTAバッジ */
.unique-cta__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #000;
  padding: 0.75rem;
  align-self: flex-start;
}
@media (max-width: 768px) {
  .unique-cta__badge {
    padding: 0.75rem 0.5rem;
  }
}

.unique-cta__badge-text {
  font-size: 1rem;
  font-weight: 700;
  color: #08ff7f;
}

@media (max-width: 768px) {
  .unique-cta__badge-text {
    font-size: 0.875rem;
  }
}

.unique-cta__badge-text {
    line-height: 1;
}

@media (max-width: 768px) {
  section.plans .unique-cta__badge-text {
    line-height: 1.5;
  }
}


/* バッジの三角形矢印 */
.unique-cta__badge-arrow {
  position: absolute;
  left: 0.75rem;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.75rem 0.875rem 0 0;
  border-color: #000 transparent transparent transparent;
  transform: rotate(180deg) scaleY(-1);
}

.unique-cta__text__wrapper {
  width: 100%;
  position: relative;
}

/* CTAテキスト */
.unique-cta__text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.333;
  color: #000;
  margin: 0;
}

@media (max-width: 768px) {
  .unique-cta__text {
    font-size: 1.0938rem;
    line-height: 1.5;
    flex: 1;
    padding-right: 7rem;
  }
}

/* CTAアイコン */
.unique-cta__icon {
  position: absolute;
  right: 0;
  top: -4.5rem;
  width: 128px;
  height: 128px;
}

@media (max-width: 768px) {
  .unique-cta__icon {
    width: 112px;
    height: 112px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* 回転する装飾テキスト */
.unique-cta__icon-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: rotate 10s linear infinite;
}

.unique-cta__icon-ring {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 紙飛行機アイコン（中心） */
.unique-cta__icon-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 29px;
}

@media (max-width: 768px) {
  .unique-cta__icon-plane {
    width: 34px;
    height: 29px;
  }
}

.unique-cta__icon-plane img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 回転アニメーション */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   4つの特徴セクション
======================================== */

.features {
  position: relative;
  padding: 5rem 1.5rem;
}

@media (max-width: 768px) {
  .features {
    padding: 0 0 5rem;
  }
}

.features__container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .features__container {
    max-width: none;
    padding: 0;
  }
}

/* タイトル */
.features__title {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  margin: 0 0 4rem;
}

@media (max-width: 768px) {
  .features__title {
    font-size: 1.4997rem; /* 24px / 14px = 1.714rem */
    line-height: 1.167;
    margin: 0 0 1.75rem 1.3125rem;
    flex-wrap: wrap;
  }
}

.features__title-main {
  font-size: 2.5rem;
}

@media (max-width: 768px) {
  .features__title-main {
    font-size: 1.5rem; /* 24px / 14px = 1.714rem */
  }
}

.features__title-number {
  font-family: 'DIN Alternate', 'Arial', sans-serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0.25rem;
}

@media (max-width: 768px) {
  .features__title-number {
    font-size: 3.75rem;
    margin: 0 0.1094rem;
  }
}

.features__title-sub {
  font-size: 2.5rem;
}

@media (max-width: 768px) {
  .features__title-sub {
    font-size: 1.4997rem; /* 24px / 14px = 1.714rem */
  }
}

/* カード縦並び（PC版・SP版共通） */
.features__cards {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .features__cards {
    gap: 4.5rem;
    max-width: none;
    margin: 0;
  }
}

/* 個別カード */
.features__card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* カード画像 */
.features__card-image {
  width: 100%;
  height: 467px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .features__card-image {
    height: 232px;
  }
}

.features__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PC版：01と03の画像は右にマージン */
.features__card--01 .features__card-image,
.features__card--03 .features__card-image {
  width: calc(100% - 128px);
  margin-right: 0;
  margin-left: 24px;
}

@media (max-width: 768px) {
  .features__card--01 .features__card-image,
  .features__card--03 .features__card-image {
    width: 100%;
    margin-left: initial;
  }
}

/* PC版：02と04の画像は左にマージン */
.features__card--02 .features__card-image,
.features__card--04 .features__card-image {
  width: calc(100% - 128px);
  margin-left: auto;
  margin-right: 24px;
}

@media (max-width: 768px) {
  .features__card--02 .features__card-image,
  .features__card--04 .features__card-image {
    width: 100%;
    margin-left: initial;
  }
}

/* カードコンテンツ（白背景部分） */
.features__card-content {
  background: #fff;
  padding: 2.5rem 2.5rem 2.5rem 4rem;
  position: relative;
  margin-top: -136px;
  z-index: 2;
  min-height: 260px;
  box-sizing: border-box;
  max-width: 640px;
}

@media (max-width: 768px) {
  .features__card-content {
    padding: 1.5rem;
    margin-top: -96px;
    min-height: 214px;
  }
}

/* PC版：01と03は左側配置で右上角丸（コンテナ内の左端） */
.features__card--01 .features__card-content,
.features__card--03 .features__card-content {
  width: auto;
  margin-left: 0;
  margin-right: auto;
  border-top-right-radius: 80px;
}

@media (max-width: 768px) {
  .features__card--01 .features__card-content,
  .features__card--03 .features__card-content {
    width: auto;
    margin-left: 0;
    margin-right: 1.3125rem;
    border-top-right-radius: 20px;
    border-top-left-radius: 0;
  }
}

/* PC版：02と04は右側配置で左上角丸（コンテナ内の右端） */
.features__card--02 .features__card-content,
.features__card--04 .features__card-content {
  width: auto;
  margin-right: 0;
  margin-left: auto;
  border-top-left-radius: 80px;
}

@media (max-width: 768px) {
  .features__card--02 .features__card-content,
  .features__card--04 .features__card-content {
    width: auto;
    margin-right: 0;
    margin-left: 1.3125rem;
    border-top-left-radius: 20px;
    border-top-right-radius: 0;
  }
}

/* カードヘッダー（POINTバッジとタイトルの横並び） */
.features__card-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .features__card-header {
    gap: 0.875rem;
    margin-bottom: 1.3125rem;
  }
}

/* POINTバッジ */
.features__card-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.features__card-badge-label {
  font-family: 'Arial', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
  .features__card-badge-label {
    font-size: 0.75rem;
  }
}

.features__card-badge-number {
  font-family: 'DIN Alternate', 'Arial', sans-serif;
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
}

@media (max-width: 768px) {
  .features__card-badge-number {
    font-size: 2.875rem;
  }
}

/* カードタイトル */
.features__card-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.8;
  color: #000;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .features__card-title {
    font-size: 1.375rem;
    line-height: 1.8;
    gap: 0.3281rem;
  }
}

.features__card-title-line {
  position: relative;
  background: #08ff7f;
  padding: 0.05rem 0.05rem;
  line-height: 1.2;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  align-self: flex-start;
  width: fit-content;
}

@media (max-width: 768px) {
  .features__card-title-line {
    padding: 0.175rem 0;
    line-height: 1.2;
  }
}

/* カード説明文 */
.features__card-description {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
  margin: 0;
  text-align: justify;
}

@media (max-width: 768px) {
  .features__card-description {
    font-size: 0.875rem;
    line-height: 1.714;
  }
}

/* ========================================
   3つのプランセクション
======================================== */

.plans {
  position: relative;
  background: #fff;
  padding: 5rem 1.5rem;
  border-radius: 80px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .plans {
    padding: 5rem 1.5rem;
    border-radius: 60px;
  }
}

/* 背景装飾 */
.plans__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.plans__bg-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(90deg, #c2ffe3 0%, #f4ffdc 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 85%, black 86%);
  mask: radial-gradient(farthest-side, transparent 85%, black 86%);
}

.plans__bg-circle--top-left {
  width: 666px;
  height: 666px;
  top: -333px;
  left: -333px;
}

.plans__bg-circle--bottom-right {
  width: 762px;
  height: 762px;
  bottom: -381px;
  right: -381px;
}

@media (max-width: 768px) {
  .plans__bg-circle--top-left {
    width: 326px;
    height: 326px;
    top: -163px;
    left: -163px;
  }

  .plans__bg-circle--bottom-right {
    width: 410px;
    height: 410px;
    bottom: -205px;
    right: -205px;
  }
}

.plans__container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 1;
}

/* タイトル */
.plans__header {
  text-align: center;
  margin-bottom: 5rem;
}

@media (max-width: 768px) {
  .plans__header {
    margin-bottom: 2.5rem;
  }
}

.plans__title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.833;
  margin: 0 0 0.5rem;
  color: #000;
}

@media (max-width: 768px) {
  .plans__title {
    font-size: 1.2504rem;
    line-height: 1.8;
  }
}

.plans__title-text {
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  .plans__title-text {
    font-size: 1.2504rem;
  }
}

.plans__title-number {
  font-family: 'DIN Alternate', 'Arial', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0.25rem;
}

@media (max-width: 768px) {
  .plans__title-number {
    font-size: 2.2496rem;
    margin: 0 0.1094rem;
  }
}

.plans__title-underline {
  width: 60px;
  height: 4px;
  background: #13a92f;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .plans__title-underline {
    width: 50px;
    height: 3px;
  }
}

/* カードグリッド */
.plans__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1152px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .plans__cards {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    max-width: 327px;
    margin: 0 auto;
  }
}

/* 個別カード */
.plans__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #b5b5b5;
}

@media (max-width: 768px) {
  .plans__card {
    min-height: auto;
  }
}
@media (max-width: 768px) {
  .plans__card.plans__card--featured {
    margin-top: 2rem;
  }
}

/* カードバッジ（ご好評いただいているプラン） */
.plans__card-badge {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}

@media (max-width: 768px) {
  .plans__card-badge {
    line-height: 1.714;
    top: -1.75rem;
  }
}

/* カードヘッダー */
.plans__card-header {
  background: #13a92f;
  padding: 1rem 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 69px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .plans__card-header {
    line-height: 1.714;
    max-height: 66px;
    height: fit-content;
  }
}

.plans__card-header--dark {
  background: #000;
  color: #08ff7f;
}

/* カードボディ */
.plans__card-body {
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 768px) {
  .plans__card-body {
    padding: 1.3125rem 0.875rem;
    gap: 1.3125rem;
  }
}

/* カード情報（タイトル・タイプ） */
.plans__card-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plans__card-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.286;
  color: #13a92f;
  margin: 0;
}

@media (max-width: 768px) {
  .plans__card-title {
    font-size: 1.4997rem;
    line-height: 1.5;
  }
}

.plans__card-type {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.plans__card-icon {
  width: 1.375rem;
  height: 1.125rem;
  flex-shrink: 0;
  display: block;
}

@media (max-width: 768px) {
  .plans__card-icon {
    width: 0.9844rem;
    height: 0.8203rem;
  }
}

.plans__card-type-text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
}

@media (max-width: 768px) {
  .plans__card-type-text {
    line-height: 1.714;
  }
}

/* 区切り線 */
.plans__card-divider {
  width: 100%;
  height: 1px;
  background: #b5b5b5;
}

/* カード詳細（期間・価格） */
.plans__card-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plans__card-period {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
  margin: 0;
}

@media (max-width: 768px) {
  .plans__card-period {
    line-height: 1.714;
  }
}

.plans__card-price {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.375;
  color: #000;
  margin: 0;
}

@media (max-width: 768px) {
  .plans__card-price {
    font-size: 1.5rem;
    line-height: 1.5;
  }
}

.plans__card-price--large {
  font-family: 'Arial', sans-serif;
  font-size: 2.5rem;
  line-height: 1;
}

@media (max-width: 768px) {
  .plans__card-price--large {
    font-size: 2.0002rem;
  }
}

.plans__card-price-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
}

.plans__card-price-unit {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.714;
  color: #000;
  padding-bottom: 0.125rem;
}

@media (max-width: 768px) {
  .plans__card-price-unit {
    font-size: 0.7499rem;
    line-height: 1.833;
  }
}

/* カード説明 */
.plans__card-description {
  background: rgba(8, 255, 127, 0.1);
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .plans__card-description {
    padding: 1.3125rem 0.875rem;
  }
}

.plans__card-description-text {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.714;
  color: #000;
  margin: 0;
  letter-spacing: 0.08rem;
}

@media (max-width: 768px) {
  .plans__card-description-text {
    font-size: 0.7499rem;
    line-height: 1.833;
  }
}

.plans__card-note {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: #888;
  margin: initial;
  margin-top: 1.5rem;
  letter-spacing: 0.06rem;
}

@media (max-width: 768px) {
  .plans__card-note {
    font-size: 0.7499rem;
    line-height: 1.833;
  }
}

/* ========================================
   お客様からの声セクション
======================================== */

.reviews {
  position: relative;
  padding: 9.375rem 1.5rem 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .reviews {
    padding: 6.5rem 0.875rem 0;
  }
}

.reviews__container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

/* ヘッダー（タイトルとナビゲーション） */
.reviews__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.5rem;
  padding-right: 1.5rem;
}

@media (max-width: 768px) {
  .reviews__header {
    margin-bottom: 1.75rem;
    padding-right: 0.875rem;
  }
}

/* タイトル */
.reviews__title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
  margin: 0;
}

@media (max-width: 768px) {
  .reviews__title {
    font-size: 1.3125rem;
    line-height: 1.167;
  }
}

/* ナビゲーションボタン */
.reviews__nav {
  display: flex;
  gap: 0.5rem;
}

.reviews__nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  background: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
}

@media (max-width: 768px) {
  .reviews__nav-button {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.reviews__nav-button:hover {
  opacity: 0.7;
}

/* 疑似要素で矢印を描画 */
.reviews__nav-button::after {
  content: '';
  position: absolute;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 1px solid #13A92F;
  border-right: 1px solid #13A92F;
  background: transparent;
  left: 50%;
  top: 50%;
}

/* 左向き矢印 */
.reviews__nav-button--prev::after {
  border-right: none;
  border-left: 1px solid #13A92F;
  transform: translate(-40%, -50%) rotate(-45deg);
}

/* 右向き矢印 */
.reviews__nav-button--next::after {
  transform: translate(-60%, -50%) rotate(45deg);
}

/* スライダーラッパー */
.reviews__slider-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}
@media (max-width: 768px) {
  .reviews__slider-wrapper {
    left: 0;
    margin-left: initial;
  }
}

/* スライダー */
.reviews__slider {
  display: flex;
  gap: 1rem;
  transition: transform 0.5s ease;
}

@media (max-width: 768px) {
  .reviews__slider {
    padding-right: 0.875rem;
    gap: 1.5rem;
  }
}

/* レビューカード */
.reviews__card {
  flex: 0 0 34.25rem;
  background: #13a92f;
  padding: 2.5rem;
  position: relative;
  display: flex;
  gap: 0.5rem;
  min-height: 16.25rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .reviews__card {
    flex: 0 0 18.4375rem;
    padding: 1.5rem 1rem 1rem;
    max-height: 18.375rem;
    height: fit-content;
    box-sizing: border-box;
    scroll-snap-align: start;
  }
}

/* カードコンテンツ */
.reviews__card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
  max-width: 370px;
}

@media (max-width: 768px) {
  .reviews__card-content {
    gap: 0.875rem;
    max-width: initial;
  }
}

/* 引用符の装飾 */
.reviews__card::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: 1.6rem;
  width: 68px;
  aspect-ratio: 1;
  background-image: url('../assets/images/review-card-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 768px) {
  .reviews__card::before {
    width: 50px;
    top: 0;
    left: 0;
  }
}

/* カードタイトル */
.reviews__card-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}

@media (max-width: 768px) {
  .reviews__card-title {
    font-size: 1.125rem;
    line-height: 1.5;
  }
}

/* カード本文 */
.reviews__card-text {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.714;
  color: #fff;
  margin: 0;
  flex: 1;
}

@media (max-width: 768px) {
  .reviews__card-text {
    font-size: 0.75rem;
    line-height: 1.667;
  }
}

/* カードラベル */
.reviews__card-label {
  background: #fff;
  color: #13a92f;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.714;
  padding: 0.625rem;
  border-radius: 100px;
  align-self: flex-start;
  height: 1.875rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .reviews__card-label {
    height: 1.75rem;
    font-size: 0.75rem;
    line-height: 1.667;
    padding: 0.4375rem;
  }
}

/* カード画像 */
.reviews__card-image {
  position: absolute;
  right: 1rem;
  bottom: 0;
  height: 16.25rem;
  flex-shrink: 0;
  overflow: hidden;
  opacity: 0.3;
}

@media (max-width: 768px) {
  .reviews__card-image {
    right: 0.875rem;
    width: 5.25rem;
    height: 10.5rem;
    opacity: 0.1;
  }
}

.reviews__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* マーケティング×デザインセクション */
.plans__marketing {
  position: relative;
  margin-top: 4rem;
}

@media (max-width: 768px) {
  .plans__marketing {
    margin-top: 3rem;
  }
}

/* 画像とテキストのコンテナ */
.plans__marketing-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .plans__marketing-content {
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
}

/* 画像 */
.plans__marketing-image {
  flex-shrink: 0;
  width: 150px;
  aspect-ratio: 150 / 171;
}

@media (max-width: 768px) {
  .plans__marketing-image {
    width: 86px;
    aspect-ratio: 86 / 99;
  }
}

.plans__marketing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* テキスト */
.plans__marketing-text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
  margin: 0;
  width: 512px;
}

@media (max-width: 768px) {
  .plans__marketing-text {
    font-size: 0.875rem;
    line-height: 1.714;
    width: 224px;
  }
}

/* PC版：画像とテキストをボタンに被せる */
@media (min-width: 769px) {
  .plans__marketing-content {
    margin-bottom: -2.5rem;
  }
}

/* ========================================
   ご紹介までのステップセクション
======================================== */

.steps {
  position: relative;
  padding: 9.375rem 1.5rem 11.25rem;
}

@media (max-width: 768px) {
  .steps {
    padding: 6.5313rem 1.5rem;
  }
}

.steps__container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  gap: 4rem;
}

@media (max-width: 768px) {
  .steps__container {
    flex-direction: column;
    gap: 2.1875rem;
  }
}

/* タイトル */
.steps__header {
  flex-shrink: 0;
  margin-top: 3.5rem;
}

@media (max-width: 768px) {
  .steps__header {
    width: 100%;
    margin-top: initial;
  }
}

.steps__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.833;
  color: #000;
  margin: 0.25rem 0 0.5rem 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .steps__title {
    font-size: 1.25rem;
    line-height: 1.9;
    text-align: center;
    margin: 0 0 0.4375rem 0;
  }
}

.steps__title-underline {
  width: 3.75rem;
  height: 0.25rem;
  background-color: #13a92f;
  margin-left: 5.625rem;
}

@media (max-width: 768px) {
  .steps__title-underline {
    width: 2.7344rem;
    margin: 0 auto;
  }
}

/* ステップリスト */
.steps__list {
  flex: 1;
  min-width: 0;
  border: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: none;
  padding-left: 2.5rem;
}

@media (max-width: 768px) {
  .steps__list {
    border: none;
    border-top: 1px solid #fff;
    padding-left: 0;
  }
}

/* ステップアイテム */
.steps__item {
  padding: 2.5rem 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

@media (max-width: 768px) {
  .steps__item {
    padding: 1.3125rem 0;
    flex-direction: column;
    align-items: initial;
    gap: 0;
  }
}

/* バッジ付きステップアイテム */
.steps__item--has-badge .steps__item-title {
  position: relative;
}

/* ステップヘッダー（番号とタイトル） */
.steps__item-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* ステップ番号 */
.steps__item-number {
  flex-shrink: 0;
}

.steps__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  background-color: #fff;
  color: #13a92f;
  font-family: 'DIN Alternate', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 2.375;
}

@media (max-width: 768px) {
  .steps__number {
    width: 2.1875rem;
    height: 2.1875rem;
  }
}

/* ステップタイトル */
.steps__item-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  margin: 0;
  width: 13.625rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .steps__item-title {
    font-size: 1.25rem;
    line-height: 1.8;
    width: auto;
  }
}

/* ステップ説明文 */
.steps__item-description {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #000;
  margin: 0;
  flex: 1;
  max-width: 464px;
}

@media (max-width: 768px) {
  .steps__item-description {
    line-height: 1.714;
    margin: 0.875rem 0 0 3.0625rem;
    max-width: initial;
    font-size: 0.875rem;
  }
}

/* 区切り線 */
.steps__divider {
  height: 1px;
  background-color: #fff;
}

@media (max-width: 768px) {
  .steps__divider {
    height: 1px;
  }
}

/* デザイナーの稼働開始ラベル */
.steps__start-label {
  position: absolute;
  top: -3.5rem;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: #000;
  max-height: 35px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .steps__start-label {
    padding: 0.5rem;
    top: -1.75rem;
    max-height: 26px;
  }
}

.steps__start-text {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #08ff7f;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .steps__start-text {
    line-height: 1.714;
    font-size: 0.875rem;
  }
}

.steps__start-arrow {
  position: absolute;
  left: 1.1875rem;
  bottom: -0.5rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.75rem 0.671875rem 0 0;
  border-color: #000 transparent transparent transparent;
  transform: rotate(180deg) scaleY(-1);
}

@media (max-width: 768px) {
  .steps__start-arrow {
    left: 0.8706rem;
    border-width: 0.5152rem 0.4616rem 0 0;
  }
}