@charset "UTF-8";
/* ========================================
   JOIN Hero — Figma: 700:386, 700:382
   白波画像が写真の上にオーバーラップ + border-radius 付き写真
======================================== */
.join-hero {
  position: relative;
  text-align: center;
  background-color: #fff;
  margin-bottom: -66px;
}

/* 白波オーバーレイ: 写真の上に被さる独立レイヤー */
.join-hero__overlay {
  position: relative;
  z-index: 2;
  pointer-events: none;
  margin-bottom: -100px;
}

.join-hero__overlay img {
  width: 100%;
  height: auto;
  display: block;
}

/* ヒーロー写真: border-radius 付きコンテナ */
.join-hero__image {
  width: 100%;
  height: 415px;
  border-radius: 120px 120px 0 0;
  overflow: hidden;
}
@media (max-width: 960px) {
  .join-hero__image {
    border-radius: 90px 90px 0 0;
  }
}

.join-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px);
}

/* テキスト: 写真の上に中央配置 */
.join-hero__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
}

.join-hero__title {
  color: #fff;
  text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
}

.join-hero__subtitle {
  color: #fff;
  text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
  padding-bottom: 93px;
}

/* ========================================
   SP (max-width: 960px) — Figma: 1030:531
======================================== */
@media (max-width: 960px) {
  .join-hero-margin {
    margin-top: 140px;
  }
  .join-hero {
    margin-bottom: -48px;
  }
  .join-hero__overlay {
    display: none;
  }
  .join-hero__content {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .join-hero__image {
    height: 200px;
    top: 0;
  }
  .join-hero__subtitle {
    padding-bottom: 0;
  }
}