/* components/recruit-cta.css — 採用「お問い合わせ・エントリー」CTA（Figma 76:30995）
   採用ランディング（template-saiyo.php）と募集要項詳細（single-recruit.php）で共用。
   背景写真は --recruit-cta-bg で渡す。上端にライトイエローの波（前セクションからの境界）、
   中央に白見出し＋角丸16pxのオフホワイト紙テクスチャ・カードボタン2本
   （1本目=LINE／2本目=メール）。右端に茶丸＋白シェブロンの矢印。 */
.c-recruit-cta {
  position: relative;
  /* Figma: pt 240 / pb 64。人物写真を上部に見せるため上を大きく取る。 */
  padding-block: var(--space-240) var(--space-160);
  padding-inline: var(--space-24);
  background-image: var(--recruit-cta-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  isolation: isolate;
}

/* オーバーレイ（teal 20% multiply ＋ 黒 10%） */
.c-recruit-cta__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.c-recruit-cta__overlay::before,
.c-recruit-cta__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
}
.c-recruit-cta__overlay::before {
  background: rgba(153, 195, 188, 0.2);
  mix-blend-mode: multiply;
}
.c-recruit-cta__overlay::after {
  background: rgba(0, 0, 0, 0.1);
}

/* 上端の波（前セクション=ライトイエロー → 当セクション写真 への境界）。
   Figma 76:31021（Rectangle 40・1440×57.7）。素材は上=ライトイエローテクスチャ／下=透過。 */
.c-recruit-cta__wave {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.c-recruit-cta__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 40rem; /* 640px */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.c-recruit-cta__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-base);
  text-align: center;
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 0, 0, 0.25);
}

.c-recruit-cta__actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* 角丸16pxのカードボタン（オフホワイト紙テクスチャ地・影付き）。
   ラベル（＋LINEアイコン）はボタン中央、矢印は右端に固定。 */
.c-recruit-cta__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: var(--space-24);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* オフホワイト紙テクスチャ（Figma imgHeading = tex-offwhite を 346.8×327.8px タイル） */
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
  color: var(--color-brown-text);
  font-weight: var(--font-weight-extrabold);
  text-decoration: none;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}
.c-recruit-cta__btn:hover {
  transform: translateY(-2px);
}

/* ラベル（＋アイコン）をひとまとまりで中央寄せ（Figma: flex-1 ＋ justify-center） */
.c-recruit-cta__btn-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
}
.c-recruit-cta__btn-label {
  text-align: center;
  line-height: var(--line-height-body); /* 1.8 */
}

/* LINEボタン：左に140pxのアイコンボックス（高さを規定）・テキスト 25.6px */
.c-recruit-cta__btn--line .c-recruit-cta__btn-label {
  font-size: var(--font-size-h2-lead); /* 25.6px */
}
.c-recruit-cta__icon {
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-recruit-cta__icon svg {
  display: block;
  width: 64px;
  height: 64px;
}

/* 右端の丸矢印（32px・茶丸＋白シェブロン。共通 .c-morebtn と同じ glyph） */
.c-recruit-cta__arrow {
  flex: 0 0 auto;
  width: var(--space-32);
  height: var(--space-32);
  border-radius: var(--radius-pill);
  background: var(--color-brown-text)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M15 20L19 16L15 12' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / var(--space-32) no-repeat;
}

@media (max-width: 768px) {
  .c-recruit-cta {
    /* SP：左右ガター12px。Figmaのボタン幅351px（375px端末で左右12px）に合わせ、
       ラベルが1行に収まるよう内容幅を確保する。背景写真もSP専用画像に差し替え。 */
    padding-block: var(--space-120) var(--space-48);
    padding-inline: var(--space-12);
    background-image: var(--recruit-cta-bg-sp);
  }
  .c-recruit-cta__inner {
    gap: var(--space-16);
  }
  .c-recruit-cta__title {
    font-size: var(--font-size-body);
  }

  /* SP（Figma 76:32695）：ボタン間隔12px、角丸8px、ラベルは左寄せ flex-1。 */
  .c-recruit-cta__actions {
    gap: var(--space-12);
  }
  .c-recruit-cta__btn {
    border-radius: var(--radius-sm);
    gap: var(--space-16);
    padding-right: var(--space-12);
  }
  /* アイコンとラベルは隣接（gap 0）。アイコンとの間隔は80pxアイコン箱の内側padding（20px）が担う。 */
  .c-recruit-cta__btn-main {
    justify-content: flex-start;
    gap: 0;
  }
  .c-recruit-cta__btn-label {
    flex: 1 1 0;
    text-align: left;
  }

  /* LINE：アイコンボックス80px（中のアイコン40px）・ラベル16px。高さはアイコン基準。 */
  .c-recruit-cta__btn--line .c-recruit-cta__btn-label {
    font-size: var(--font-size-body);
  }
  .c-recruit-cta__icon {
    width: 80px;
    height: 80px;
  }
  .c-recruit-cta__icon svg {
    width: 40px;
    height: 40px;
  }

  /* 矢印：24px。 */
  .c-recruit-cta__arrow {
    width: var(--space-24);
    height: var(--space-24);
    background-size: var(--space-24);
  }
}