/* ============================================================
   精密審美会 採用サイト — エントリーフォーム
   Figma: エントリーフォーム-PC (106:307) 1440×3160
          エントリーフォーム-SP (106:395) 430×3399

   CF7フォーム管理画面で使用するHTML構造の例:
   ────────────────────────────────────────────
   <div class="entry-field">
     <div class="entry-field__header">
       <span class="entry-field__label">お名前</span>
       <span class="entry-field__required">必須</span>
     </div>
     <div class="entry-field__control">
       [text* your-name placeholder "例）田中 太郎"]
     </div>
   </div>

   幅広フィールド（テキストエリア等）:
   <div class="entry-field entry-field--wide">
     ...
   </div>

   送信確認エリア:
   <div class="entry-field entry-field--wide entry-field--confirm">
     ...
   </div>

   送信ボタン:
   <div class="entry-submit">
     [submit class:entry-submit__btn "送信する"]
   </div>
   ============================================================ */


/* --- MVオーバーライド ---
   Figma: 135:885 Contact-us logo (511×78)
   contact.css と同一のMVデザイン
   ======================================= */
.secondary-mv--entry .secondary-mv__title-logo {
  max-width: 511px;
  margin-bottom: -41px;
}


/* --- イントロテキスト ---
   Figma: 108:523 fs=16 ls=1.28 lh=25 #333 (1000×49)
   ======================================= */
.entry-intro {
  padding: 60px 0 0;
}

.entry-intro__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.entry-intro__text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 25px;
  color: #333;
  margin: 0 0 40px;
}


/* --- フォームセクション ---
   ======================================= */
.entry-form-section {
  padding: 0 0 80px;
}

.entry-form-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}


/* --- CF7 フォームリセット ---
   CF7 デフォルトスタイルのオーバーライド
   ======================================= */
.entry-form-content .wpcf7-form {
  margin: 0;
  padding: 0;
}

.entry-form-content .wpcf7-form p {
  margin: 0;
}

.entry-form-content .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  border-color: #E1329B !important;
  color: #E1329B;
}

.entry-form-content {
  max-width: 750px;
  margin: 0 auto;
}


/* --- フォームフィールド ---
   Figma: 115:323 etc. (500×140 per field)
   ======================================= */
.entry-field {
  margin-bottom: 28px;
  max-width: 500px;
}

.entry-field--wide {
  max-width: 750px;
}

/* ラベル行 */
.entry-field__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

/* Figma: ラベル fs=20 fw=400 ls=1.6 lh=52 #1556A6 */
.entry-field__label {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1.6px;
  line-height: 1;
  color: #1556A6;
}

/* Figma: 必須バッジ 113:254 bg=#E1329B r=30 57×23
   テキスト: fs=12 fw=700 ls=0.96 #fff */
.entry-field__required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 57px;
  height: 23px;
  padding: 0 10px;
  background: #E1329B;
  border-radius: 30px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.96px;
  line-height: 1;
  white-space: nowrap;
}


/* --- 入力欄共通 ---
   Figma: 118:404 stroke=1px #B0B0B0, h=52
          テキスト: fs=16 fw=400 ls=1.28 lh=52
   ======================================= */
.entry-field__control input[type="text"],
.entry-field__control input[type="email"],
.entry-field__control input[type="tel"],
.entry-field__control input[type="date"],
.entry-field__control input[type="number"],
.entry-field__control .wpcf7-form-control.wpcf7-text,
.entry-field__control .wpcf7-form-control.wpcf7-email,
.entry-field__control .wpcf7-form-control.wpcf7-tel {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #B0B0B0;
  border-radius: 0;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 52px;
  color: #333;
  outline: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.entry-field__control input:focus,
.entry-field__control select:focus,
.entry-field__control textarea:focus {
  border-color: #1556A6;
}

/* Figma: placeholder fs=16 #B0B0B0 */
.entry-field__control input::placeholder,
.entry-field__control textarea::placeholder {
  color: #B0B0B0;
  font-size: 16px;
  letter-spacing: 1.28px;
}


/* --- セレクトボックス ---
   Figma: 118:467 stroke=1px #B0B0B0 h=52
          "▼ 選択してください" fs=16 #B0B0B0
   ======================================= */
.entry-field__control select,
.entry-field__control .wpcf7-form-control.wpcf7-select {
  width: 100%;
  height: 52px;
  padding: 0 40px 0 16px;
  border: 1px solid #B0B0B0;
  border-radius: 0;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;
  background-size: 12px 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 52px;
  color: #333;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

/* 未選択状態（value=""）のplaceholder色 */
.entry-field__control select:invalid,
.entry-field__control select option[value=""] {
  color: #B0B0B0;
}


/* --- テキストエリア ---
   Figma: 119:516 stroke=1px #B0B0B0 750×250
   ======================================= */
.entry-field__control textarea,
.entry-field__control .wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  min-height: 250px;
  padding: 16px;
  border: 1px solid #B0B0B0;
  border-radius: 0;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 25px;
  color: #333;
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}


/* --- ラジオボタン ---
   Figma: 125:425 Radio buttons (20×20)
          テキスト: fs=16 fw=400 ls=1.28 #333
   ======================================= */
.entry-field__control .wpcf7-radio,
.entry-field__control .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.entry-field__control .wpcf7-list-item {
  margin: 0;
}

.entry-field__control .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 1.2;
  color: #333;
  cursor: pointer;
}

/* カスタムラジオ外観 */
.entry-field__control .wpcf7-list-item input[type="radio"],
.entry-field__control .wpcf7-list-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #1556A6;
  cursor: pointer;
}

/* テキストラベルもクリッカブルに（CF7のlabelラップ有無を問わず） */
.entry-field__control .wpcf7-list-item .wpcf7-list-item-label {
  cursor: pointer;
}


/* --- 学歴フィールド（横並び: 学校名 + 卒業年 + テキスト） ---
   Figma: 118:493 Frame 88 (750×140)
          学校名入力(300px) + 卒業年入力(176px) + "年3月卒業"テキスト
   ======================================= */
.entry-field__control--inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.entry-field__control--inline input {
  flex: 0 0 auto;
}

.entry-field__control--inline input:first-child {
  width: 300px;
}

.entry-field__control--inline input:nth-child(2),
.entry-field__control--inline .wpcf7-form-control-wrap:nth-child(2) input {
  width: 176px;
}

.entry-field__control--inline .entry-field__suffix {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  color: #000;
  white-space: nowrap;
}


/* --- 生年月日ドロップダウン ---
   年・月・日セレクトの横並び配置
   ======================================= */
.entry-field__control--birthday {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.entry-field__control--birthday select,
.entry-field__control--birthday .wpcf7-form-control.wpcf7-select {
  width: auto;
  min-width: 100px;
}

.entry-field__control--birthday .entry-field__suffix {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  color: #000;
  white-space: nowrap;
  margin-right: 8px;
}


/* --- 送信確認エリア ---
   Figma: 119:557 Frame 93 (750×176) bg=#EEF7FF
          チェックボックス + プライバシーポリシーテキスト
   ======================================= */
.entry-field--confirm {
  background: #EEF7FF;
  padding: 24px 30px;
  max-width: 750px;
}

.entry-field--confirm .entry-field__control {
  margin-top: 16px;
}

.entry-field--confirm .entry-field__control label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 1;
  color: #333;
  cursor: pointer;
}

.entry-field--confirm .entry-privacy {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 1;
  color: #333;
}

.entry-field--confirm .entry-privacy a {
  color: #E1329B;
  text-decoration: underline;
}


/* --- 送信ボタン ---
   Figma: Component 4 (119:567) 300×50 bg=#1556A6 r=25
          テキスト: fs=16 fw=700 #fff
          トリプルシェブロン: stroke=1px #fff
   ======================================= */
.entry-submit {
  margin-top: 40px;
  text-align: center;
}

.entry-submit__btn,
.entry-form-content .wpcf7-submit {
  display: inline-block;
  width: 300px;
  height: 50px;
  padding: 0 44px 0 32px;
  text-align: left;
  background: #1556A6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6' fill='none'%3E%3Cpath d='M0.25 0.433105L4.58008 2.93311L0.25 5.43308' stroke='white'/%3E%3Cpath d='M5.25 0.433105L9.58008 2.93311L5.25 5.43308' stroke='white'/%3E%3Cpath d='M10.25 0.433105L14.5801 2.93311L10.25 5.43308' stroke='white'/%3E%3C/svg%3E") no-repeat right 20px center;
  border: none;
  border-radius: 25px;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}


.entry-submit__btn:hover,
.entry-form-content .wpcf7-submit:hover {
  background-color: #333;
}

/* CF7 送信中スピナー */
.entry-form-content .wpcf7-spinner {
  margin-left: 8px;
}


/* --- バリデーションエラー ---
   CF7 のエラー表示カスタマイズ
   ======================================= */
.entry-form-content .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #E1329B;
}

.entry-form-content .wpcf7-not-valid {
  border-color: #E1329B !important;
}


/* --- 募集医院の注意書き ---
   「※表示している医院のみ現在募集をおこなっております」
   ======================================= */
.entry-field__notice {
  font-size: 14px;
  font-weight: 400;
  color: #E1329B;
  margin-bottom: 12px;
}

/* --- インフォボックス ---
   面接案内等の補足情報ボックス
   現行サイト踏襲: 薄い背景 + ボーダー
   ======================================= */
.entry-field__info {
  margin-top: 12px;
  padding: 14px 18px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.12px;
  line-height: 1.8;
  color: #555;
}


/* ============================================================
   jQuery UI Datepicker — カスタムスタイル
   サイトのカラースキーム (#1556A6, #E1329B) に合わせる
   ============================================================ */

/* Datepicker入力欄: readonly + カーソルpointer */
.entry-date-visit,
.entry-date-interview {
  cursor: pointer !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 0v2H3v2h10V2h-2V0h-2v2H7V0H5zM1 6v9h14V6H1zm2 2h2v2H3V8zm4 0h2v2H7V8zm4 0h2v2h-2V8zM3 12h2v2H3v-2zm4 0h2v2H7v-2z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 36px !important;
}

/* コンテナ */
.ui-datepicker {
  width: auto;
  max-width: 320px;
  padding: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  font-family: inherit;
  font-size: 14px;
  z-index: 1000 !important;
  overflow: hidden;
}

/* 複数月表示時 */
.ui-datepicker-multi {
  width: auto !important;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
  width: 50%;
}

.ui-datepicker-multi .ui-datepicker-group-last {
  border-left: 1px solid #eee;
}

/* ヘッダー（月/年 + ナビ） */
.ui-datepicker-header {
  background: #1556A6;
  color: #fff;
  padding: 12px 16px;
  position: relative;
  border: none;
  border-radius: 0;
}

.ui-datepicker-title {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.ui-datepicker-title .ui-datepicker-year,
.ui-datepicker-title .ui-datepicker-month {
  color: #fff;
}

/* 前月/次月 矢印 */
.ui-datepicker-prev,
.ui-datepicker-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  text-indent: -9999px;
  overflow: hidden;
}

.ui-datepicker-prev {
  left: 8px;
}

.ui-datepicker-next {
  right: 8px;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 矢印アイコン（疑似要素） */
.ui-datepicker-prev::after,
.ui-datepicker-next::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  text-indent: 0;
}

.ui-datepicker-prev::after {
  transform: rotate(135deg);
  margin-left: 3px;
}

.ui-datepicker-next::after {
  transform: rotate(-45deg);
  margin-right: 3px;
}

/* カレンダーテーブル */
.ui-datepicker-calendar {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
}

.ui-datepicker-calendar th {
  padding: 8px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  border-bottom: 1px solid #eee;
}

/* 日曜: 赤 / 土曜: 青 */
.ui-datepicker-calendar th:first-child {
  color: #E1329B;
}

.ui-datepicker-calendar th:last-child {
  color: #1556A6;
}

.ui-datepicker-calendar td {
  padding: 2px;
  text-align: center;
}

/* セル共通 */
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 選択可能日 */
.ui-datepicker-calendar td a.ui-state-default {
  color: #333;
  background: transparent;
  border: none;
}

.ui-datepicker-calendar td a.ui-state-default:hover {
  background: #e8f0fa;
  color: #1556A6;
}

/* 選択済み */
.ui-datepicker-calendar td a.ui-state-active {
  background: #1556A6;
  color: #fff;
  font-weight: 700;
}

/* 今日 */
.ui-datepicker-calendar td.ui-datepicker-today a {
  border: 1px solid #1556A6;
}

/* 無効日（祝日・曜日除外） */
.ui-datepicker-calendar td.ui-datepicker-unselectable span,
.ui-datepicker-calendar td.ui-state-disabled span {
  color: #ccc;
  cursor: default;
}

/* 祝日カスタムクラス */
.ui-datepicker-calendar td.is-holiday span {
  color: #E1329B;
  opacity: 0.5;
}

/* 休日カスタムクラス */
.ui-datepicker-calendar td.is-weekend span {
  color: #999;
  opacity: 0.5;
}

/* 日曜日列の色 */
.ui-datepicker-calendar td:first-child a.ui-state-default {
  color: #E1329B;
}

/* 土曜日列の色 */
.ui-datepicker-calendar td:last-child a.ui-state-default {
  color: #1556A6;
}


/* ============================================================
   SP レスポンシブ — 430px基準
   Figma: エントリーフォーム-SP (106:395) 430×3399
   ============================================================ */
@media (max-width: 768px) {

  /* MV ロゴ */
  .secondary-mv--entry .secondary-mv__title-logo {
    max-width: 260px;
  }

  /* イントロ */
  .entry-intro {
    padding: 40px 0 0;
  }

  .entry-intro__inner {
    padding: 0 22px;
  }

  .entry-intro__text {
    font-size: 14px;
    letter-spacing: 1.12px;
    line-height: 25px;
  }

  /* フォームラベル: 20px → clamp(16px〜20px) */
  .entry-field__label {
    font-size: clamp(16px, 4.7vw, 20px);
    /* 360px→16.9px / 430px→20px */
  }

  /* 入力欄・セレクト・テキストエリア: 16px → clamp(14px〜16px) */
  .entry-field__control input[type="text"],
  .entry-field__control input[type="email"],
  .entry-field__control input[type="tel"],
  .entry-field__control input[type="date"],
  .entry-field__control input[type="number"],
  .entry-field__control select,
  .entry-field__control textarea,
  .entry-field__control .wpcf7-form-control {
    font-size: clamp(14px, 3.7vw, 16px);
    /* 360px→13.3px(→14px min) / 430px→15.9px(→16px cap) */
  }

  /* フォームセクション */
  .entry-form-section {
    padding: 0 0 60px;
  }

  .entry-form-section__inner {
    padding: 0 22px;
  }

  /* フィールド幅 */
  .entry-field,
  .entry-field--wide {
    max-width: 100%;
  }

  /* ラジオボタン: SP縦積み */
  .entry-field__control .wpcf7-radio,
  .entry-field__control .wpcf7-checkbox {
    flex-direction: column;
    gap: 16px;
  }

  /* 学歴/日付 横並び → SP: デフォルト縦積み */
  .entry-field__control--inline {
    flex-direction: column;
    align-items: stretch;
  }

  /* PC版 width: 300px/176px をリセット → 全幅 */
  .entry-field__control--inline input,
  .entry-field__control--inline .wpcf7-form-control-wrap input {
    width: 100% !important;
  }

  /* 学歴フィールド（suffix付き）のみ: 学校名は全幅で折り返し、卒業年+サフィックスは横並び */
  .entry-field__control--inline:has(.entry-field__suffix) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .entry-field__control--inline:has(.entry-field__suffix) > .wpcf7-form-control-wrap:first-child,
  .entry-field__control--inline:has(.entry-field__suffix) > input:first-child {
    width: 100%;               /* 学校名を全幅に → 自動折り返し */
  }

  /* 卒業年/修了年: コンパクト幅でサフィックスと同行 */
  .entry-field__control--inline:has(.entry-field__suffix) .wpcf7-form-control-wrap:nth-child(2) input,
  .entry-field__control--inline:has(.entry-field__suffix) input:nth-child(2) {
    width: 120px !important;
  }

  /* 生年月日: セレクトを均等伸縮 */
  .entry-field__control--birthday select,
  .entry-field__control--birthday .wpcf7-form-control.wpcf7-select {
    min-width: 0;
    flex: 1;
  }

  /* 送信確認 */
  .entry-field--confirm {
    padding: 20px;
    max-width: 100%;
  }

  .entry-field--confirm .entry-field__control label {
    line-height: 1.6;             /* 1→1.6: チェックボックステキストの行間確保 */
  }

  .entry-field--confirm .entry-privacy {
    font-size: 14px;
    line-height: 1.6;
  }

  /* 送信ボタン — SP: 388×70 r=35 */
  .entry-submit__btn,
  .entry-form-content .wpcf7-submit {
    width: 100%;
    max-width: 388px;
    height: 70px;
    border-radius: 35px;
  }

  /* Datepicker — 1カラム表示 */
  .ui-datepicker {
    width: calc(100vw - 44px) !important;
    max-width: 350px;
  }

  .ui-datepicker-multi .ui-datepicker-group {
    float: none;
    width: 100%;
  }

  .ui-datepicker-multi .ui-datepicker-group-last {
    border-left: none;
    border-top: 1px solid #eee;
  }
}