@charset "utf-8";
/* =============================================================
   Contact Form 7 - 求人フォーム スタイルシート
   対象フォーム: 応募フォーム（名前 / メール / 電話 / 自己PR / 写真 / 希望職種）
   メインカラー: #009FDE
   ============================================================= */

/* -------------------------------------------------------------
   カスタムプロパティ（変数）
   - ここを変更するだけでサイト全体のカラーを調整できます
   ------------------------------------------------------------- */
:root {
  --cf7-brand:        #009FDE; /* メインカラー */
  --cf7-brand-dark:   #007CB8; /* ホバー・フォーカス時の濃い色 */
  --cf7-brand-light:  #E6F7FD; /* チェック済みなどの薄い背景色 */
  --cf7-required:     #D94040; /* 「必須」バッジの赤 */
  --cf7-radius:       6px;     /* 角丸の基本値 */
  --cf7-gap:          20px;    /* 各フィールド間の縦余白 */
  --cf7-label-size:   13px;    /* ラベルのフォントサイズ */
  --cf7-input-size:   15px;    /* 入力欄のフォントサイズ */
}

h1 {text-align: center;}

footer.non {
	min-width: 100%;font-size: 1rem;
	background: none;padding: 0;
	color: #000;text-align: center;
}
footer.non .foot {text-align: center;margin: 0 0 15px;}
a.foot-link {
	background: var(--color-text-black);display: block;
	padding: 25px 0;
	text-align: center;font-size: 1.8rem;color: var(--color-background-white);
	opacity: 1;transition: opacity .3s;
}
a.foot-link:hover {opacity: .9}
a.foot-link span {
	position: relative;
}
a.foot-link span::after {
	content: "";width: 30px;height: 30px;
	position: absolute;top: calc(50% - 14px);right: -45px;transform: rotate(-90deg);
	background: url(../../img/icon/arrow04.svg) no-repeat center / contain
}
/* -------------------------------------------------------------
   フォーム全体のラッパー (.wpcf7 は CF7 が自動付与するクラス)
   ------------------------------------------------------------- */
.wpcf7 {
  max-width: 640px;
  margin: 0 auto;
}
 
/* fieldset のリセット */
.wpcf7 fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cf7-gap);
}
 
/* -------------------------------------------------------------
   入力ボックス共通（.input-box）
   ------------------------------------------------------------- */
.wpcf7 .input-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
 
/* -------------------------------------------------------------
   ラベル
   - .middle クラスはフォームエディターから付与されます
   ------------------------------------------------------------- */
.wpcf7 .input-box label,
.wpcf7 .input-box .middle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--cf7-label-size);
  font-weight: 500;
  color: #555; /* ダークテーマ環境では inherit や CSS変数に変更してください */
}
 
/* 「必須」バッジ
   .required クラスを持つ .input-box 内のラベルの前に疑似要素で表示します
   ----------------------------------------------------------- */
.wpcf7 .input-box.required > label::before,
.wpcf7 .input-box.required > .middle::before {
  content: "必須";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  background: var(--cf7-required);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.4;
  flex-shrink: 0;
}
 
/* -------------------------------------------------------------
   テキスト / メール / 電話 / 日付 入力欄
   CF7 は <input> に .wpcf7-text / .wpcf7-email / .wpcf7-tel / .wpcf7-date を付与します
   ------------------------------------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: var(--cf7-input-size);
  line-height: 1.5;
  border: 1px solid #ccc;
  border-radius: var(--cf7-radius);
  background: #fff;
  color: #222;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  appearance: none;
}
 
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="date"]:focus {
  border-color: var(--cf7-brand);
  box-shadow: 0 0 0 3px rgba(0, 159, 222, 0.18);
}
 
/* -------------------------------------------------------------
   日付入力欄 個別調整
   ------------------------------------------------------------- */
 
/* カレンダーアイコンの色をブランドカラーに統一（Chrome / Edge） */
.wpcf7 input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  border-radius: 3px;
  padding: 2px;
  /* SVG アイコンをブランドカラーで上書き */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23009FDE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px;
  opacity: 1;
}
 
.wpcf7 input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background-color: var(--cf7-brand-light);
}
 
/* 日付が未入力のときのプレースホルダー色調整（Firefox） */
.wpcf7 input[type="date"]:not([value]):not(:focus) {
  color: #aaa;
}
 
/* 幅を画面いっぱいにせず適切な幅に抑える
   日付欄は長い文字列が入らないため、最大幅を設定 */
.wpcf7 input[type="date"] {
  max-width: 220px;
}
 
/* エラー時のボーダー（CF7 が .wpcf7-not-valid クラスを付与） */
.wpcf7 input.wpcf7-not-valid {
  border-color: var(--cf7-required);
  box-shadow: 0 0 0 3px rgba(217, 64, 64, 0.15);
}
 
/* -------------------------------------------------------------
   テキストエリア（自己PR）
   ------------------------------------------------------------- */
.wpcf7 textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: var(--cf7-input-size);
  line-height: 1.7;
  border: 1px solid #ccc;
  border-radius: var(--cf7-radius);
  background: #fff;
  color: #222;
  resize: vertical;
  min-height: 130px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
 
.wpcf7 textarea:focus {
  border-color: var(--cf7-brand);
  box-shadow: 0 0 0 3px rgba(0, 159, 222, 0.18);
}
 
.wpcf7 textarea.wpcf7-not-valid {
  border-color: var(--cf7-required);
  box-shadow: 0 0 0 3px rgba(217, 64, 64, 0.15);
}
 
/* -------------------------------------------------------------
   ファイルアップロード（写真）
   CF7 の [file*] は <input type="file"> を出力します
   ドラッグ&ドロップ的な見た目にするため、ラベルで囲むか
   JavaScript で装飾するのが一般的ですが、ここでは
   input そのものをシンプルにスタイリングします
   ------------------------------------------------------------- */
.wpcf7 input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 13px;
  border: 1.5px dashed #ccc;
  border-radius: var(--cf7-radius);
  background: #fafafa;
  color: #555;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
 
.wpcf7 input[type="file"]:hover {
  border-color: var(--cf7-brand);
  background: var(--cf7-brand-light);
}
 
.wpcf7 input[type="file"]:focus {
  outline: none;
  border-color: var(--cf7-brand);
  box-shadow: 0 0 0 3px rgba(0, 159, 222, 0.18);
}
 
/* ファイル種別の補足テキスト（フォーム直下に <p class="file-note"> を追加した場合） */
.wpcf7 .file-note {
  font-size: 12px;
  color: #888;
  margin: 4px 0 0;
  line-height: 1.5;
}
 
/* -------------------------------------------------------------
   チェックボックス（希望職種）
   CF7 の use_label_element オプションで <label> が自動生成されます
   .wpcf7-checkbox > span.wpcf7-list-item > label の構造になります
   ------------------------------------------------------------- */
 
/* チェックボックスグループ全体の横並び */
.wpcf7 .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0;
}
 
/* 各選択肢（span.wpcf7-list-item）をピル形状に */
.wpcf7 .wpcf7-checkbox .wpcf7-list-item {
  margin: 0; /* CF7 デフォルトのマージンをリセット */
}
 
.wpcf7 .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 30px; /* ピル形状 */
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: normal; /* ラベルのデフォルト太字をリセット */
  color: #333;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  line-height: 1.4;
}
 
/* チェックボックス本体のサイズ調整 */
.wpcf7 .wpcf7-checkbox input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--cf7-brand); /* チェックマークの色 */
  cursor: pointer;
  flex-shrink: 0;
}
 
/* チェック済み状態のスタイル */
.wpcf7 .wpcf7-checkbox .wpcf7-list-item label:has(input:checked) {
  border-color: var(--cf7-brand);
  background: var(--cf7-brand-light);
  color: var(--cf7-brand-dark);
  font-weight: 500;
}
 
/* :has() 非対応ブラウザ向けフォールバック（JavaScript で .is-checked を付与する場合） */
.wpcf7 .wpcf7-checkbox .wpcf7-list-item label.is-checked {
  border-color: var(--cf7-brand);
  background: var(--cf7-brand-light);
  color: var(--cf7-brand-dark);
  font-weight: 500;
}
 
/* -------------------------------------------------------------
   バリデーションエラーメッセージ
   CF7 が .wpcf7-not-valid-tip として出力します
   ------------------------------------------------------------- */
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--cf7-required);
  line-height: 1.5;
}
 
/* -------------------------------------------------------------
   フォーム全体のエラー・成功メッセージ
   ------------------------------------------------------------- */
.wpcf7 .wpcf7-response-output {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--cf7-radius);
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid transparent;
}
 
/* 送信成功 */
.wpcf7.sent .wpcf7-response-output {
  background: #EAF7EF;
  border-color: #5CB87A;
  color: #2D6A3F;
}
 
/* バリデーションエラー / 送信失敗 */
.wpcf7.invalid .wpcf7-response-output,
.wpcf7.failed .wpcf7-response-output,
.wpcf7.spam .wpcf7-response-output {
  background: #FDF0F0;
  border-color: var(--cf7-required);
  color: #A02020;
}
 
/* -------------------------------------------------------------
   送信ボタン（#submit ラッパーと [submit] タグ）
   ------------------------------------------------------------- */
#submit {
  margin-top: 28px;
}
 
/* CF7 は <input type="submit"> を出力します */
#submit input[type="submit"],
.wpcf7 input[type="submit"] {
  display: block;
  width: 100%;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--cf7-brand);
  border: none;
  border-radius: var(--cf7-radius);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  appearance: none;
}
 
#submit input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover {
  background: var(--cf7-brand-dark);
}
 
#submit input[type="submit"]:active,
.wpcf7 input[type="submit"]:active {
  transform: scale(0.99);
}
 
/* 送信中（CF7 がスピナーを表示するとき） */
.wpcf7-spinner {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}
 
/* -------------------------------------------------------------
   職種別経歴入力欄（#career-box）
   チェックボックスの選択に応じて JS で表示切り替えします
   ------------------------------------------------------------- */
 
/* 初期状態は非表示。JS が .is-visible を付与したら表示 */
#career-box {
  display: none;
  flex-direction: column;
  gap: 6px;
}
 
#career-box.is-visible {
  display: flex;
}
 
/* アニメーション：フェードインで自然に出現 */
#career-box.is-visible {
  animation: career-fadein 0.25s ease forwards;
}
 
@keyframes career-fadein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
/* ラベル */
#career-box .career-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--cf7-label-size);
  font-weight: 500;
  color: #555;
}
 
/* 補足テキスト（入力ガイド） */
#career-box .career-hint {
  font-size: 12px;
  color: #888;
  line-height: 1.7;
  margin: 0;
  padding: 8px 12px;
  background: #fff;
  border-left: 3px solid var(--cf7-brand-light);
  border-radius: 0 var(--cf7-radius) var(--cf7-radius) 0;
}
 
/* テキストエリアは既存スタイルを継承するため追加CSSは最小限 */
#career-box textarea {
  min-height: 110px;
}
 
/* -------------------------------------------------------------
   レスポンシブ対応（スマートフォン）
   ------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --cf7-gap: 16px;
  }
 
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="date"],
  .wpcf7 textarea {
    font-size: 16px; /* iOS のズームを防ぐため 16px 以上に */
    padding: 10px;
  }
 
  /* SP では日付欄もフル幅に */
  .wpcf7 input[type="date"] {
    max-width: 100%;
  }
 
  .wpcf7 .wpcf7-checkbox {
    gap: 8px;
  }
 
  .wpcf7 .wpcf7-checkbox .wpcf7-list-item label {
    padding: 7px 14px;
    font-size: 13px;
  }
}