/* ==========================================================================
   /keisai_register.html(求人掲載を申し込む)・/keisai_register_end.html(完了) 専用CSS
   2026-11-08 新設(澤口さん指示「もっとオシャレに」・見本で合意済み)。
   見た目は /keisai.html(keisai.css)の帯・ボタンと同じ雰囲気にそろえている。

   🔴 このCSSは main.css より **前** に読まれる(AreaChrome の extraStyles)。
      .main_form は会員登録・かんたん応募・代理店募集など**全フォーム共通**のクラスなので、
      main.css 側は触らず、このページだけが持つ `.kr_form` を足したセレクタ(1段強い)で上書きする。
      ヒーロー等の新部品は main.css に存在しない `kr_`(keisai register)接頭辞だけを使う。

   🔴 入力欄の文字は **16px 未満にしない**。iPhone(Safari)は16px未満の欄を触るとページを
      自動で拡大する。小さく見せたいときは高さ・余白で調整する(澤口さん了承 2026-11-08)。

   🔴 PC/SPの境目は 1200px(main.css・keisai.css と同じ)。基本=PC、max-width:1200px でSP。
   ========================================================================== */

/* ---------------------------------------------------------------- ヒーロー(帯) */
.kr_hero {
  --kr-ink: #3a2b33;
  --kr-ink2: #6b5560;
  --kr-pink-d: #c2356a;
  --kr-line: #eddfe5;

  background:
    radial-gradient(110% 90% at 92% 0%, rgba(236, 110, 154, 0.16) 0%, rgba(236, 110, 154, 0) 55%),
    linear-gradient(180deg, #fdeef4 0%, #fdf6f9 100%);
  color: var(--kr-ink);
}

.kr_hero_in {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 24px 64px; /* 下は白カードが -40px で重なるぶん厚め */
  box-sizing: border-box;
}

.kr_eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--kr-pink-d);
}

.kr_h1 {
  margin: 0;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--kr-ink);
}

.kr_hero_row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.kr_lead {
  flex: 1;
  min-width: 0;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--kr-ink2);
}

/* 負のマージンで上へ飛び出させる(見出し行の高さに算入しない・keisai.css の .kp_h2_il と同じ考え方) */
.kr_hero_il {
  flex: none;
  width: auto;
  height: 150px;
  margin: -60px 0 -10px;
}

/* 進み具合(① 入力 ― ② 確認 ― ③ 完了)。枠・ピルは使わず、丸と細い線だけで見せる */
.kr_steps {
  display: flex;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.kr_steps li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #b9a9b1;
}

.kr_steps li i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--kr-line);
  color: #b9a9b1;
  font-size: 12px;
  font-style: normal;
}

.kr_steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 13px);
  right: calc(-50% + 13px);
  height: 1px;
  background: var(--kr-line);
}

.kr_steps li.is_on {
  color: var(--kr-pink-d);
}

.kr_steps li.is_on i {
  background: linear-gradient(180deg, #f0789f, #d9457a);
  box-shadow: 0 4px 10px rgba(217, 69, 122, 0.3);
  color: #fff;
}

/* ------------------------------------------------------------ フォームの白カード */
.main_form.kr_form {
  background: #fdf6f9;
  padding: 0 0 56px;
}

.main_form.kr_form .layout {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.main_form.kr_form .content {
  position: relative;
  margin-top: -40px; /* ヒーローの下端に重ねる */
  padding: 36px 40px 40px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(214, 51, 108, 0.08);
  color: #3a2b33;
}

/* 項目: ラベルを上・入力欄を下に積む(現行のピンクの見出し帯はやめる) */
.main_form.kr_form .content dl {
  display: block;
  margin: 0 0 22px;
}

.main_form.kr_form .content dl dt {
  width: auto !important; /* main.css が !important で 240px/100% を指定しているため */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0;
  border-radius: 0;
  background: none;
}

.main_form.kr_form .content dl dt label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3a2b33;
}

.main_form.kr_form .content dl dt span {
  padding: 1px 7px;
  border-radius: 4px;
  background: #fbe3ec;
  color: #c2356a;
  font-size: 10.5px;
  font-weight: 700;
}

.main_form.kr_form .content dl dt .any {
  background: #f1ecee;
  color: #8a7680;
}

.main_form.kr_form .content dl dd {
  width: auto;
  display: block;
}

.main_form.kr_form .content dl dd div {
  box-sizing: border-box;
  align-items: center;
  border: 1px solid #eddfe5;
  border-radius: 12px;
  background: #fcf8fa;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.main_form.kr_form .content dl dd div:focus-within {
  border-color: #ec6e9a;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(236, 110, 154, 0.14);
}

.main_form.kr_form .content dl dd div input,
.main_form.kr_form .content dl dd div textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0 14px;
  background: transparent;
  color: #3a2b33;
  font-size: 16px; /* 🔴 16px 未満にしない(iPhone の自動拡大) */
}

.main_form.kr_form .content dl dd div input {
  height: 48px;
  border-radius: 12px;
}

.main_form.kr_form .content dl dd div textarea {
  height: 160px;
  padding: 12px 14px;
  border-radius: 12px;
  line-height: 1.7;
}

.main_form.kr_form .content dl dd div input::placeholder,
.main_form.kr_form .content dl dd div textarea::placeholder {
  color: #c2b3ba;
}

/* 郵便番号: 「〒」を欄の中に置き、幅は7桁ぶんだけ。右にボタンを並べる(案A・澤口さん決定 2026-11-08) */
.main_form.kr_form .content dl dd.kr_zip_dd {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main_form.kr_form .content dl dd div.kr_zip {
  flex: none;
  width: 152px; /* 例文「例：5300002」が切れない最小の幅 */
}

/* SPでは文字が2行(「郵便番号から住所を」「自動入力」)になる。PCは横に伸びすぎないよう240pxまで */
.kr_zip_btn {
  flex: 1;
  min-width: 0;
  max-width: 240px;
  height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: #fbe3ec;
  color: #c2356a;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color 0.15s;
}

.kr_zip_btn:hover:not(:disabled) {
  background: #f8d3e1;
}

/* 7桁そろうまでは押せない見た目 */
.kr_zip_btn:disabled {
  background: #f4eff1;
  color: #b9a9b1;
  cursor: default;
}

.main_form.kr_form .content dl dd .kr_zip .kr_zip_mark {
  padding: 0 0 0 14px;
  color: #8a7680;
  font-size: 15px;
}

.main_form.kr_form .content dl dd .kr_zip input {
  padding-left: 6px;
}

/* 欄の下の注意書き・エラー */
.main_form.kr_form .content .descript {
  width: auto;
  margin: -14px 0 22px;
  font-size: 12px;
  line-height: 1.75;
  color: #8a7680;
}

.main_form.kr_form .content .descript.error,
.main_form.kr_form .content .error {
  color: #d6336c;
  font-weight: 700;
}

/* 個人情報の取り扱い(PrivacyNotice・クラスは共通部品のまま) */
.main_form.kr_form .content .form_kiyaku_title {
  margin: 30px 0 8px;
  padding: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
}

.main_form.kr_form .content .form_kiyaku_wrap {
  height: 150px;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: #faf6f8;
  font-size: 12px;
  line-height: 1.8;
  color: #6b5560;
}

.main_form.kr_form .content .form_kiyaku_wrap h3 {
  font-size: 12.5px;
}

.main_form.kr_form .content .form_kiyaku_wrap + .descript {
  margin: 14px 0 0;
}

/* ボタン(keisai.css の .kp_btn と同じグラデーション) */
.main_form.kr_form .content .btn_next {
  width: 100%;
  max-width: 420px;
  margin: 30px auto 0;
  padding: 14px 0 12px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f0789f, #d9457a);
  box-shadow: 0 8px 22px rgba(217, 69, 122, 0.32);
}

.main_form.kr_form .content .btn_next::after {
  right: 6px;
  color: #fff;
}

.main_form.kr_form .content .btn_next p {
  color: #fff;
  font-size: 16.5px;
  line-height: 1.5;
}

.main_form.kr_form .content .btn_next .sub_title {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.88;
}

/* ------------------------------------------------------------------ 確認画面 */
.main_form.kr_form.confirm .content dl {
  margin-bottom: 0;
  padding: 14px 0;
  border-bottom: 1px solid #f3e9ee;
}

.main_form.kr_form.confirm .content dl dt {
  margin-bottom: 4px;
}

/* 入力値は枠なしの文字で見せる(main.css の .main_form.confirm の箱を打ち消す) */
.main_form.kr_form.confirm .content dl dd div {
  display: block;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #3a2b33;
  font-size: 15px;
  line-height: 1.7;
}

/* 「同意して登録する」を上、「戻る」を下の控えめな文字リンクに(PC・SPとも)。
   並びはマークアップの順のまま(column-reverse で見た目だけ入れ替えるとキーボードの順とずれる) */
.main_form.kr_form .content .form_btn_col2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 30px;
}

.main_form.kr_form .content .form_btn_col2 a {
  margin-bottom: 0;
}

.main_form.kr_form .content .form_btn_col2 .btn_next {
  margin: 0 auto;
}

.main_form.kr_form .content .btn_return {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 12px 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.main_form.kr_form .content .btn_return::after {
  display: none;
}

.main_form.kr_form .content .btn_return p {
  color: #8a7680;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ 完了画面 */
.main_form.kr_form .kr_done {
  padding: 8px 0 4px;
  text-align: center;
}

.main_form.kr_form .kr_done_il {
  display: block;
  width: auto;
  height: 150px;
  margin: 0 auto 10px;
}

.main_form.kr_form .kr_done_h {
  margin: 0 0 12px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #3a2b33;
}

.main_form.kr_form .kr_done_t {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #6b5560;
}

/* ======================================================================= SP */
@media screen and (max-width: 1200px) {
  .kr_hero_in {
    padding: 30px 20px 56px;
  }

  .kr_h1 {
    font-size: 22px;
  }

  .kr_lead {
    font-size: 13px;
  }

  .kr_hero_il {
    height: 112px;
    margin: -40px -6px -14px 0;
  }

  .main_form.kr_form .layout {
    padding: 0 12px;
  }

  .main_form.kr_form .content {
    margin-top: -32px;
    padding: 26px 18px 30px;
    border-radius: 20px;
  }
}