@charset "utf-8";

/* =============================================
   JOBKEN WORK toB LP - Contact Form Component
   FLOCSS: p- (Project) / c- (Component)

   Figma仕様: 320 × 537px
   各行: ラベル(~80px) + 入力欄(残り幅) 左余白23px 右余白26px
   行間: 10px（Figma y座標差分: 110-68-32=10px）
   ============================================= */

/* -----------------------------------------
   Layout（別担当が後で差し替える想定）
   ----------------------------------------- */
.l-wrapper {
  min-height: 100vh;
}

.p-fv__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 40px 20px;
}

.p-fv__left {
  flex: 1;
}

/* -----------------------------------------
   p-contact : フォーム全体
   ----------------------------------------- */
.p-contact {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* width: 320px; */
  /* height: 537px; */
  background-color: #005773;
  flex-shrink: 0;
}


/* --- 見出し --- */
.p-contact__heading {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  padding: 14px 40px 0;
  margin: 0 0 20px;
}

/* --- フォーム本体 --- */
.p-contact__form {
  padding: 0;
}

/* -----------------------------------------
   各行共通: ラベル左 + 入力欄右
   ----------------------------------------- */
.p-contact__row {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 26px 0 23px;
  margin-bottom: 10px;
}

/* --- ラベル共通 --- */
.p-contact__label {
  color: #FFFFFF;
  /* font-size: 14px; */
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 32px;
  height: 32px;
  white-space: nowrap;
  flex-shrink: 0;
  width: 80px;
}

.p-contact__required {
  color: #FF0000;
}

/* --- 入力欄共通: ラベルの残り幅を全て使う --- */
.p-contact__field {
  flex: 1;
  min-width: 0;
  height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* select用: ▼アイコンを疑似要素で表示 */
.p-contact__field--select {
  position: relative;
}

.p-contact__field--select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #D5D5D5;
  pointer-events: none;
}

/* -----------------------------------------
   姓名行: Figma 姓(x:23, w:145) + 名(x:194, w:100)
   gap = 194 - (23+145) = 26px
   ----------------------------------------- */
.p-contact__row--name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 26px 0 23px;
  margin-bottom: 10px;
}

.p-contact__name-item {
  display: flex;
  align-items: center;
  height: 32px;
}

.p-contact__name-item .p-contact__label {
  width: auto;
  margin-right: 6px;
}

.p-contact__name-item--sei .p-contact__label {
  width: 80px;
  margin-right: 0;
}

.p-contact__name-item .p-contact__field {
  flex: none;
  width: 65px;
}

/* -----------------------------------------
   採用したい職種行
   Figma: y:318, h:60px, 前行からの距離8px
   ラベルは2行（「採用したい」+「職種*」）
   ----------------------------------------- */
.p-contact__row--jobtype {
  height: auto;
  min-height: 60px;
  margin-top: -2px; /* 10px(既存margin-bottom) - 2px = 8px間隔 */
  margin-bottom: 0;
  align-items: flex-start;
}

.p-contact__row--jobtype .p-contact__label {
  white-space: normal;
  line-height: 1.3;
  height: auto;
  padding-top: 2px;
}

.p-contact__checkbox-list {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px;
  align-content: flex-start;
}

/* -----------------------------------------
   同意文
   Figma: y:398, 10px bold center
   checkbox(h:60)からの距離: 20px
   ----------------------------------------- */
.p-contact__agreement {
  color: #FFFFFF;
  /* font-size: 10px; */
  font-size: clamp(0.625rem, 1.5vw, 0.75rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  padding: 0 25px;
  margin: 20px 0 0;
}
.p-contact__agreement > a {
  color: #fff;
}


/* -----------------------------------------
   送信ボタン
   ----------------------------------------- */
.p-contact__submit {
  padding: 14px 38px 24px;
}

/* =============================================
   Component: c-input
   Figma: #FFF, 1px #D5D5D5, 4px角丸, h:32
   ============================================= */
.c-input {
  width: 100%;
  height: 32px;
  background-color: #FFFFFF;
  border: 1px solid #D5D5D5;
  border-radius: 4px;
  font-size: 0.875rem;
  /* font-size: 13px; */
  font-weight: 400;
  color: #333333;
  padding: 0 8px;
  outline: none;
  box-sizing: border-box;
}

.c-input:focus {
  border-color: #005773;
}

.c-input::placeholder {
  color: #AAAAAA;
}

/* =============================================
   Component: c-select-wrap / c-select
   Figma: #FFF, 1px #D5D5D5, 4px角丸, ▼ #D5D5D5
   ============================================= */
.c-select-wrap {
  position: relative;
  width: 100%;
  flex: 1;
}

.c-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #D5D5D5;
  pointer-events: none;
}

.c-select {
  width: 100%;
  height: 32px;
  background-color: #FFFFFF;
  border: 1px solid #D5D5D5;
  border-radius: 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #333333;
  padding: 0 28px 0 8px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
}

.c-select:focus {
  border-color: #005773;
}

/* =============================================
   Component: c-checkbox
   Figma: #FFF, 1px #D5D5D5, 2px角丸, 12px bold
   ============================================= */
.c-checkbox {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  padding: 2px 6px;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.c-checkbox input[type="checkbox"] {
  width: 12px;
  height: 12px;
  margin: 0 4px 0 0;
  accent-color: #005773;
  cursor: pointer;
  flex-shrink: 0;
}

.c-checkbox__text {
  font-size: 0.75rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  white-space: nowrap;
}


/* =============================================
   Component: c-btn-submit
   Figma: #FFF131, 6px角丸, shadow
   ============================================= */
.c-btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  /* height: 44px; */
  padding: 1rem;
  background-color: #FFF131;
  border: none;
  border-radius: 6px;
  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

.c-btn-submit:hover {
  opacity: 0.85;
}

.c-btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.c-btn-submit__badge {
  display: inline-block;
  background-color: #005773;
  color: #FFFFFF;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 2px 10px;
  border-radius: 8.5px;
  line-height: 1.4;
}

.c-btn-submit__text {
  color: #005773;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* =============================================
   Component: c-error（初期非表示）
   ============================================= */
.c-error {
  display: none;
  color: #FF6666;
  font-size: 11px;
  font-weight: 500;
  margin: 0 0 2px;
  padding: 0 26px 0 23px;
  line-height: 1.3;
}

.c-error.is-show {
  display: block;
}

/*-------------------------------- 
スマホ対応
-------------------------------- */
@media (max-width: 830px) {
  .c-input {
    height: auto;
    padding: 1rem 0.5rem;
  }
  .p-contact__field {
    width: 100%;
  }
  .p-contact__name-item .p-contact__field {
    width: 48%;
  }
  .c-btn-submit {
    padding: 1rem;
    height: auto;
  }
  .p-contact__checkbox-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .p-contact__row--jobtype {
    margin-top: auto;
  }
  .c-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
  .c-checkbox__text {
    font-size: 0.875rem;
  }




}/*media_query_end*/

/* =============================================
   Component: c-loading（送信中オーバーレイ）
   ============================================= */
.c-loading {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-loading__inner {
  text-align: center;
}

.c-loading__spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 4px solid #DDDDDD;
  border-top-color: #005773;
  border-radius: 50%;
  animation: c-loading-spin 0.8s linear infinite;
}

.c-loading__text {
  font-size: 14px;
  font-weight: 700;
  color: #333333;
}

@keyframes c-loading-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}