/*------------------------------------------------------------

  掲載依頼フォームの見た目の改善
  （styles.css の後に読み込まれます）

  ① 選択肢をボタン型に（.choice-chips）
  ② 画像アップロード欄（.file-drop）
  ③ 注意書き（.notes / .hint-box）
  ④ 入力中の手助け（フォーカス・エラー・文字数カウンター）

------------------------------------------------------------*/

/*============================================================
  ① 選択肢をボタン型に
============================================================*/
.contact_form .choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.contact_form .choice-chips .wpcf7-list-item {
  margin: 0 !important;
}

.contact_form .choice-chips label {
  position: relative;
  display: block;
  cursor: pointer;
}

/* 本体は見えなくするが、キーボード操作はできるように残す */
.contact_form .choice-chips input[type=radio],
.contact_form .choice-chips input[type=checkbox] {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.contact_form .choice-chips .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color .15s, background .15s, color .15s;
}

/* サイト共通の丸ポチはここでは使わない */
.contact_form .choice-chips .wpcf7-list-item-label:before {
  content: none;
  display: none;
}

.contact_form .choice-chips .wpcf7-list-item-label:after {
  content: none;
  display: none;
}

.contact_form .choice-chips label:hover .wpcf7-list-item-label {
  border-color: var(--gray-500);
}

/* 選択中 */
.contact_form .choice-chips input:checked + .wpcf7-list-item-label {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

/* 複数選択（チェックボックス）は、選ぶと ✓ が付く */
.contact_form .wpcf7-checkbox.choice-chips .wpcf7-list-item-label:before {
  content: "";
  display: block;
  position: static;
  transform: none;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 1;
}

.contact_form .wpcf7-checkbox.choice-chips input:checked + .wpcf7-list-item-label:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}

.contact_form .choice-chips input:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/*============================================================
  ② 画像アップロード欄
============================================================*/
.contact_form .file-drop {
  position: relative;
  margin-bottom: 5px;
  border: 2px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--gray-100);
  transition: border-color .15s, background .15s;
}

.contact_form .file-drop:hover,
.contact_form .file-drop.is-dragover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

/* ファイル選択の本体を枠いっぱいに広げて透明に（クリックもドロップもこれが受け取る） */
.contact_form .file-drop .wpcf7-form-control-wrap {
  position: static;
}

.contact_form .file-drop input.file-drop-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.contact_form .file-drop-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 16px;
  text-align: center;
}

.contact_form .file-drop-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contact_form .file-drop-text {
  color: var(--color-text);
  font-size: 14px;
}

.contact_form .file-drop-text b {
  color: var(--blue);
}

/* スマホ（ドラッグできない端末）では「ドラッグ＆ドロップ」の文言を出さない */
@media (hover: none) {
  .contact_form .file-drop-dd {
    display: none;
  }
}

.contact_form .file-drop-sub {
  color: var(--color-muted);
  font-size: 12px;
}

/* 選択後のプレビュー */
.contact_form .file-drop-preview {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}

.contact_form .file-drop.has-file {
  border-style: solid;
  border-color: var(--border-base);
  background: #fff;
}

.contact_form .file-drop.has-file .file-drop-body {
  display: none;
}

.contact_form .file-drop.has-file .file-drop-preview {
  display: flex;
}

.contact_form .file-drop-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: var(--gray-200) center / cover no-repeat;
}

.contact_form .file-drop-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.contact_form .file-drop-name {
  overflow: hidden;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact_form .file-drop-size {
  color: var(--color-muted);
  font-size: 12px;
}

/* 削除ボタンは透明なファイル選択より前に出す */
.contact_form .file-drop-remove {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  font-size: 13px;
  cursor: pointer;
}

.contact_form .file-drop-remove:hover {
  border-color: var(--red);
  color: var(--red);
}

.contact_form .file-drop-error {
  display: block;
  margin-top: 4px;
  color: var(--red);
  font-size: 13px;
}

/*============================================================
  ③ 注意書き
============================================================*/
.contact_form .notes {
  display: block;
  margin-top: 6px;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.7;
}

.contact_form .hint-box {
  margin: 8px 0 5px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.7;
}

.contact_form .hint-box p {
  margin: 0;
  font-size: 13px;
}

#page .contact_form .hint-examples {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

#page .contact_form .hint-examples li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  line-height: 1.6;
  list-style: none;
}

.contact_form .hint-badge {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 38px;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
}

.contact_form .hint-examples .is-ok .hint-badge {
  background: #1f9d6b;
}

.contact_form .hint-examples .is-ng .hint-badge {
  background: var(--red);
}

.contact_form .hint-examples .is-ng {
  color: var(--color-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(217, 75, 75, .5);
}

.contact_form .hint-sub {
  color: var(--color-muted);
}

/*============================================================
  ④ 入力中の手助け
============================================================*/
/* 角を少し丸く・ホバーとフォーカスを分かりやすく */
.contact_form input[type=text],
.contact_form input[type=email],
.contact_form input[type=url],
.contact_form input[type=tel],
.contact_form textarea,
.contact_form .period-date-input {
  border-radius: 6px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.contact_form input[type=text]:hover,
.contact_form input[type=email]:hover,
.contact_form input[type=url]:hover,
.contact_form input[type=tel]:hover,
.contact_form textarea:hover {
  border-color: var(--border-strong);
}

.contact_form input[type=text]:focus,
.contact_form input[type=email]:focus,
.contact_form input[type=url]:focus,
.contact_form input[type=tel]:focus,
.contact_form textarea:focus,
.contact_form .period-date-input:focus,
.contact_form .period-date-input.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
  outline: none;
}

/* エラーのある欄 */
.contact_form input.wpcf7-not-valid,
.contact_form textarea.wpcf7-not-valid,
.contact_form .period-date-input.is-invalid {
  border-color: var(--red);
  background: var(--red-soft);
}

.contact_form input.wpcf7-not-valid:focus,
.contact_form textarea.wpcf7-not-valid:focus {
  box-shadow: 0 0 0 3px rgba(217, 75, 75, .15);
}

.contact_form .choice-chips.wpcf7-not-valid .wpcf7-list-item-label {
  border-color: rgba(217, 75, 75, .55);
}

.contact_form .file-drop:has(.wpcf7-not-valid) {
  border-color: var(--red);
  background: var(--red-soft);
}

.contact_form .wpcf7-not-valid-tip {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 13px !important;
}

.contact_form .wpcf7-not-valid-tip:before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d94b4b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 文字数カウンター */
.contact_form .char-counter {
  display: block;
  margin: -1px 0 2px;
  color: var(--color-muted);
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.contact_form .char-counter.is-near {
  color: #c27803;
}

.contact_form .char-counter.is-max {
  color: var(--red);
  font-weight: 700;
}


/*============================================================
  ⑤ ブロック（セクション）に分ける
============================================================*/
.contact_form .form-lead {
  margin: 0 0 20px;
  color: var(--color-muted);
  font-size: 14px;
}

.contact_form .form-section {
  margin: 0 0 24px;
  padding: 28px 28px 8px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: #fff;
}

#page article .contact_form h2.form-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--border-base);
  color: var(--color-text);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.contact_form .form-section-num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.contact_form .form-section-title + .form-section-desc {
  margin: -8px 0 20px;
  color: var(--color-muted);
  font-size: 13px;
}

/*------------------------------------------------------------
  大枠：「ご担当者情報（非公開）」と「掲載情報（公開）」
------------------------------------------------------------*/
#page article .contact_form h2.form-section-title {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* 掲載される／されないのバッジ */
.contact_form .visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.contact_form .visibility-badge:before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: center / contain no-repeat;
}

/* 非公開：グレー＋鍵 */
.contact_form .visibility-badge.is-private {
  background: var(--gray-200);
  color: var(--color-muted);
}

.contact_form .visibility-badge.is-private:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

/* 公開：青＋地球 */
.contact_form .visibility-badge.is-public {
  background: var(--blue-soft);
  color: var(--blue);
}

.contact_form .visibility-badge.is-public:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}

/* 掲載情報の中の小見出し（カードは重ねず、線と見出しで区切る） */
.contact_form .form-subsection + .form-subsection {
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px dashed var(--border-base);
}

#page article .contact_form h3.form-subsection-title {
  position: relative;
  margin: 0 0 16px;
  padding: 0 0 0 12px;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

#page article .contact_form h3.form-subsection-title:before {
  content: "";
  position: absolute;
  top: .2em;
  bottom: .2em;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--navy);
}

#page article .contact_form h3.form-subsection-title:after {
  content: none;
}

@media only screen and (max-width: 767px) {
  .contact_form .visibility-badge {
    font-size: 11px;
  }

  .contact_form .form-subsection + .form-subsection {
    padding-top: 20px;
  }

  #page article .contact_form h3.form-subsection-title {
    margin-bottom: 12px;
    font-size: 15px;
  }
}

/*============================================================
  ⑥ 「必須」の代わりに「任意」を表示
============================================================*/
.contact_form .optional {
  display: inline-block;
  margin-top: -4px;
  margin-left: 4px;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--gray-200);
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  vertical-align: middle;
}

@media only screen and (max-width: 767px) {
  .contact_form .form-section {
    margin-bottom: 16px;
    padding: 20px 16px 4px;
    border-radius: 12px;
  }

  #page article .contact_form h2.form-section-title {
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    font-size: 16px;
  }

  .contact_form .form-section-num {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}

/*============================================================
  送信ボタンとメッセージ（「入力内容に問題があります」など）
============================================================*/
#page #form-btn {
  padding-bottom: 0;
}

#page #form-btn p {
  margin-bottom: 0;
}

#page #form-btn input#btn-submit {
  margin-bottom: 0;
}

#page .wpcf7 form .wpcf7-response-output {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-width: 1px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
}

#page .wpcf7 form.invalid .wpcf7-response-output,
#page .wpcf7 form.unaccepted .wpcf7-response-output,
#page .wpcf7 form.payment-required .wpcf7-response-output,
#page .wpcf7 form.failed .wpcf7-response-output,
#page .wpcf7 form.aborted .wpcf7-response-output,
#page .wpcf7 form.spam .wpcf7-response-output {
  background: var(--red-soft);
}

#page .wpcf7 form.sent .wpcf7-response-output {
  background: #f0faf3;
}

/*============================================================
  CF7 が自動で入れる <p> で並びが崩れないようにする
============================================================*/
.contact_form .hint-examples li > p,
.contact_form .file-drop-body > p,
.contact_form .file-drop-preview > p,
.contact_form .file-drop > p {
  display: contents;
}

.contact_form .file-drop-body br,
.contact_form .file-drop-preview br,
.contact_form .hint-examples li br {
  display: none;
}

/*============================================================
  応募締切：「締切日を指定する」と「随時募集」で高さをそろえる
============================================================*/
#page .contact_form .period-field .period-date,
#page .contact_form .period-field .period-date p {
  margin: 0;
}

#page .contact_form .period-field .period-date-input {
  margin: 0;
}

#page .contact_form .period-field .period-anytime-msg {
  box-sizing: border-box;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
}

#page .contact_form .period-field:has(input[value="随時募集"]:checked) .period-anytime-msg {
  display: flex;
  align-items: center;
}

/*============================================================
  お問い合わせページ
============================================================*/
/* 注意事項：赤文字をやめて、控えめな案内に */
#page article .contact-guide__notes {
  padding: 14px 18px;
  border: 1px solid var(--border-base);
  background: var(--gray-100);
  color: var(--color-text);
  font-size: 14px;
  list-style: none;
}

#page article .contact-guide__notes li {
  position: relative;
  padding-left: 24px;
  list-style: none;
}

#page article .contact-guide__notes li::before {
  content: "";
  position: absolute;
  top: .3em;
  left: 0;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* フォームのカード：見出しなしなので上の余白を詰める */
.contact_form .form-section--contact {
  padding-top: 24px;
}

/* 「その他」を選んだときは、対象ページのURL欄を隠す */
.contact_form table:has(input[name="contact-type"][value="その他"]:checked) .contact-url-row {
  display: none;
}

@media only screen and (max-width: 767px) {
  .contact_form .form-section--contact {
    padding-top: 18px;
  }
}