/* =====================================================
   求人詳細 応募ボタン（parts-single-oubo.php 専用）
   PC：LINE → WEB → 電話（均等幅、高さ100px）
   SP：LINE → WEB → 電話（縦並び、高さ80px目安）
   LINE未設定：WEB・電話の均等2列
   電話番号なし：グレーアウト
   ※他の設置場所には影響させない
===================================================== */

.kyjob-entry-apply,
.kyjob-entry-apply * {
  box-sizing: border-box;
}

.kyjob-entry-apply {
  width: 100%;
  margin: -20px auto 20px;
}

/* ボタン数に応じて2列／3列を自動で均等割り */
.kyjob-entry-apply .kyjob-entry-apply__buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.kyjob-entry-apply .kyjob-entry-apply__buttons > .kyjob-entry-apply__line,
.kyjob-entry-apply .kyjob-entry-apply__buttons > .kyjob-entry-apply__web,
.kyjob-entry-apply .kyjob-entry-apply__buttons > .kyjob-entry-apply__tel {
  width: 100%;
  min-width: 0;
  margin: 0;
}

/* WEB・電話：サイズと内側の余白を統一 */
.kyjob-entry-apply .kyjob-entry-apply__web,
.kyjob-entry-apply .kyjob-entry-apply__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 100px;
  padding: 10px 9px;
  border: 0;
  border-radius: 8px;
  color: #fff !important;
  text-align: center;
  text-decoration: none !important;
}

/* WEB応募 */
.kyjob-entry-apply .kyjob-entry-apply__web {
  background: var(--site-cta);
}
.kyjob-entry-apply .kyjob-entry-apply__web:hover,
.kyjob-entry-apply .kyjob-entry-apply__web:focus-visible {
  background: var(--site-cta-hover);
  color: #fff !important;
}

/* 電話応募 */
.kyjob-entry-apply .kyjob-entry-apply__tel {
  background: var(--site-primary);
}

/* 見出し */
.kyjob-entry-apply .kyjob-entry-apply__title {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
}
.kyjob-entry-apply .kyjob-entry-apply__title i {
  margin-right: 4px;
}

/* WEB・電話の白いラベル */
.kyjob-entry-apply .kyjob-entry-apply__sub,
.kyjob-entry-apply .kyjob-entry-apply__number {
  display: block;
  width: 94%;
  max-width: 260px;
  margin: 0;
  padding: 5px 6px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
}
.kyjob-entry-apply .kyjob-entry-apply__sub {
  color: var(--site-cta) !important;
  font-size: 12px;
}
.kyjob-entry-apply .kyjob-entry-apply__number {
  color: var(--site-primary) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.kyjob-entry-apply .kyjob-entry-apply__number:hover,
.kyjob-entry-apply .kyjob-entry-apply__number:focus-visible {
  background: #effafb;
  color: var(--site-primary) !important;
}
.kyjob-entry-apply .kyjob-entry-apply__or {
  color: #fff;
  font-size: 11px;
  line-height: 1.1;
}

/* 電話番号なし：グレーアウト（非表示にはしない） */
.kyjob-entry-apply .kyjob-entry-apply__tel--disabled,
.kyjob-entry-apply .kyjob-entry-apply__tel--disabled:hover {
  background: #ccc;
  color: #fff !important;
  opacity: .7;
  cursor: not-allowed;
}
.kyjob-entry-apply .kyjob-entry-apply__unavailable {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* =====================================================
   LINE応募：既存 parts-line-oubo.php の表示をこのエリアだけ調整
   ※QRモーダル自体はbody直下に移動するため対象外
===================================================== */
.kyjob-entry-apply .kyjob-entry-apply__line {
  display: flex;
  align-items: stretch;
}
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply {
  display: flex !important;
  flex: 1 1 auto;
  align-items: stretch;
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* PCはQR用、SPはトーク画面用のリンクを表示 */
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp {
  display: none !important;
}
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--pc {
  display: flex !important;
}

/* LINEの緑ボタン本体 */
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--pc,
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  column-gap: 5px;
  row-gap: 7px;
  flex: 1 1 0;
  width: 100% !important;
  min-width: 0;
  max-width: none !important;
  min-height: 100px;
  height: 100% !important;
  margin: 0 !important;
  padding: 10px 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #06C755 !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none !important;
}
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--pc:hover,
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp:hover,
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--pc:focus-visible,
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp:focus-visible {
  background: #05A847 !important;
  color: #fff !important;
}
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--pc > i,
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp > i {
  flex: 0 0 auto;
  margin: 0;
  color: #fff !important;
  font-size: 20px;
}
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--pc > span,
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp > span {
  flex: 0 0 auto;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

/* LINEもWEB・電話と同じ幅の白いラベルに */
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--pc::after,
.kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp::after {
  content: "LINEで簡単応募";
  display: block;
  flex: 0 0 94%;
  width: 94%;
  max-width: 260px;
  margin: 0 auto;
  padding: 5px 6px;
  border-radius: 5px;
  background: #fff;
  color: #059940;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
}

/* =====================================================
   スマホ専用：3つの応募方法を横並び（LINE・WEB・電話）
   LINEがない場合は自動で2列 / 電話なしはグレーアウト
   共通ボタン・PC表示には影響させない
===================================================== */
@media screen and (max-width: 767px) {
  .kyjob-entry-apply .kyjob-entry-apply__buttons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: 7px;
    align-items: stretch;
  }

  .kyjob-entry-apply .kyjob-entry-apply__buttons > .kyjob-entry-apply__line,
  .kyjob-entry-apply .kyjob-entry-apply__buttons > .kyjob-entry-apply__web,
  .kyjob-entry-apply .kyjob-entry-apply__buttons > .kyjob-entry-apply__tel {
    width: 100%;
    min-width: 0;
    min-height: 78px;
    margin: 0;
  }

  /* WEB・電話：小さなアイコン + 一行タイトル */
  .kyjob-entry-apply .kyjob-entry-apply__web,
  .kyjob-entry-apply .kyjob-entry-apply__tel {
    gap: 0;
    min-height: 78px;
    padding: 8px 3px;
    justify-content: center;
  }

  .kyjob-entry-apply .kyjob-entry-apply__title {
    width: 100%;
    font-size: clamp(10px, 3.1vw, 12px);
    white-space: nowrap;
    line-height: 1.4;
    text-align: center;
  }

  /* WEBのアイコンは既存HTMLを変えずにCSSで描画 */
  .kyjob-entry-apply .kyjob-entry-apply__web .kyjob-entry-apply__title::before {
    content: "\f0ac";
    display: block;
    margin: 0 auto 5px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 23px;
    line-height: 1;
  }

  /* WEB：表示文字だけ短くする（リンクの動作は変更しない） */
  .kyjob-entry-apply .kyjob-entry-apply__web .kyjob-entry-apply__title {
    font-size: 0;
  }
  .kyjob-entry-apply .kyjob-entry-apply__web .kyjob-entry-apply__title::after {
    content: "WEBで応募";
    display: block;
    font-size: clamp(10px, 3.1vw, 12px);
    line-height: 1.4;
  }

  /* 電話のアイコンを1段目に表示 */
  .kyjob-entry-apply .kyjob-entry-apply__tel .kyjob-entry-apply__title i {
    display: block;
    margin: 0 auto 5px;
    font-size: 23px;
    line-height: 1;
  }

  /* 白い補足ラベルはスマホ3列では表示しない */
  .kyjob-entry-apply .kyjob-entry-apply__sub,
  .kyjob-entry-apply .kyjob-entry-apply__unavailable,
  .kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp::after {
    display: none !important;
  }

  /* LINE：PC用は隠し、スマホ用だけアイコンを上に */
  .kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--pc {
    display: none !important;
  }
  .kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: 78px;
    height: 100% !important;
    padding: 8px 3px !important;
  }
  .kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp > i {
    font-size: 23px;
    line-height: 1;
  }
  .kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp > span {
    display: block;
    font-size: 0;
    line-height: 1.4;
    white-space: nowrap;
  }
  .kyjob-entry-apply .kyjob-entry-apply__line .line-apply-btn--sp > span::after {
    content: "LINEで応募";
    display: block;
    font-size: clamp(10px, 3.1vw, 12px);
    line-height: 1.4;
  }

  /* 電話番号が1つ：番号のリンクをカード全体に広げる */
  .kyjob-entry-apply .kyjob-entry-apply__tel:not(.kyjob-entry-apply__tel--disabled) {
    position: relative;
  }
  .kyjob-entry-apply .kyjob-entry-apply__tel:not(:has(.kyjob-entry-apply__or)) > .kyjob-entry-apply__number {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
  .kyjob-entry-apply .kyjob-entry-apply__tel:focus-within {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  /* 電話番号が2つあるときはそれぞれ選べるように表示する */
  .kyjob-entry-apply .kyjob-entry-apply__tel:has(.kyjob-entry-apply__or) {
    min-height: 110px;
    gap: 3px;
  }
  .kyjob-entry-apply .kyjob-entry-apply__tel:has(.kyjob-entry-apply__or) .kyjob-entry-apply__number {
    position: static;
    width: 100%;
    max-width: none;
    padding: 3px 2px;
    font-size: 10px;
    line-height: 1.25;
    opacity: 1;
  }
  .kyjob-entry-apply .kyjob-entry-apply__tel:has(.kyjob-entry-apply__or) .kyjob-entry-apply__or {
    font-size: 10px;
  }

  /* 下の注意書き */
  .kyjob-entry-apply .kyjob-entry-apply__note {
    margin-top: 5px;
    font-size: 10px;
    text-align: center;
  }
  .kyjob-entry-apply .kyjob-entry-apply__note br {
    display: none;
  }
}