@charset "UTF-8";
/* ==========================================================
   photo-form.html 固有CSS（2026-09-03 D-1 グループC 再批評の反映 r4）
   掲載イメージ（ダミー写真）→ FLOW／応募条件／使用について → フォーム の順。

   ▼ 再批評の反映
   ・C-24: 確定コンテンツ FLOW「応募の流れ」3ステップを復帰（装飾帯は使わず .cx-list の3行）。
   ・C-20/C-11: アップロード枠の1px破線＋アイコン（汎用ドロップゾーン）をやめ、
     フォーム入力と同じ 1px solid 青・角丸6px にし、中身は「ファイルを選ぶ」＋注記に。
     label が2つ紐づいていた問題は、ドロップ領域を div にして解消。
   ・C-4: 日付入力のネイティブ・カレンダーグリフを .cx-select と同じ青シェブロンへ／
     写真タイトルにもプレースホルダを追加（HTML側）。
   ・C-3: 箇条書きを素の「・」から .cx-dot の青●へ統一。
   ・C-9/C-10: 同意リンクを label の外へ出し、チェックボックスの実効タップ領域を44pxに。
   ・C-13: 必須／任意バッジを 11px → 12px（SP 10.31 → 12px）。
   ========================================================== */

.pf-catch { text-align: center; }
.pf-lead { margin-top: 20px; text-align: center; }

/* ---- 掲載イメージ（ダミー写真・400/281） ---- */
.pf-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.pf-sample { aspect-ratio: 400 / 281; overflow: hidden; }
.pf-sample img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-samplenote { margin-top: 14px; }

/* ---- 応募の流れ＋応募条件＋使用について（1枚に内包） ---- */
.pf-info { padding: 34px 30px 36px; }
.pf-info__head { margin-top: 34px; }
.pf-info__tbd { margin-top: 14px; }

/* ---- アップロード枠（破線とアイコンを廃し、フォーム入力と同じ境界に） ---- */
.pf-upload {
  border: 1px solid var(--cx-blue);
  border-style: solid;
  gap: 16px;
  padding: 26px 20px;
}
.pf-upload__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 205.5px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid var(--cx-blue);
  border-radius: 6px;
  background: #fff;
  color: var(--cx-blue);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.11em;
}
.pf-upload__note, .pf-upload__tbd { display: block; }

/* ---- 日付入力: UA 標準グリフを .cx-select と同じ青シェブロンに差し替える ---- */
.cx-input[type="date"]::-webkit-calendar-picker-indicator {
  width: 18px;
  height: 18px;
  opacity: 1;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23165ce2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

.pf-outro { text-align: center; }

/* ---- 同意（リンクは label の外・タップ領域44px） ---- */
.pf-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 40px;
}
.pf-terms {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cx-blue);
  text-decoration: underline;
  font-size: 17px;
  letter-spacing: 0.07em;
}
.pf-consent .cx-consent { margin-top: 0; gap: 0; }
.pf-consent .cx-consent input[type="checkbox"],
.pf-consent .cx-consent input[type="checkbox"]:checked {
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.pf-consent .cx-consent input[type="checkbox"]::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 11px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--cx-blue);
  border-radius: 4px;
  background: #fff;
}
.pf-consent .cx-consent input[type="checkbox"]:checked::before { background: var(--cx-blue); }
.pf-consent .cx-consent input[type="checkbox"]:checked::after { left: 18px; top: 14px; }

/* ---- 必須／任意バッジを注記下限（12px）へ ---- */
.cx-req, .cx-opt { font-size: 12px; font-weight: 700; }

@media (max-width: 768px) {
  .pf-catch { text-align: left; }
  .pf-lead { margin-top: 14px; text-align: left; }
  .pf-samples { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pf-info { padding: 22px 20px 24px; }
  .pf-info__head { margin-top: 26px; }
  .pf-outro { text-align: left; }
  .pf-upload { padding: 20px 16px; gap: 12px; }
  .pf-upload__btn { width: 178.8px; min-height: 44px; font-size: 14.79px; }
  .pf-consent { justify-content: flex-start; margin-top: 30px; }
  .pf-terms { font-size: 14px; }
  .cx-req, .cx-opt { font-size: 12px; height: 22px; }
}

/* ---- SP 本文下限14px（design-language §2・メイン判断5）:
   components.css の .cx-form__label は SP 12.53px。新規ページの本文なので 14px に戻す
   （必須／任意バッジは注記下限の12px のまま） ---- */
@media (max-width: 768px) {
  .cx-form__label { font-size: 14px; }
}

/* ---- 同意行の読み順: 規約リンクとチェックボックスの間を空け、
   チェックボックスが後続の「に同意する」と一組に見えるようにする ---- */
.pf-terms { margin-right: 8px; }

/* ==========================================================
   D-1 r5（グループC 再批評 crit3）
   ・C-9: 全幅の色帯・写真帯が1つも無く 4768px を白カードだけで下っていた。
     FLOW / CONDITIONS / USAGE を .cx-bluesec に載せ、
     「白い情報カード × 全幅の青帯」（hour_pc の LIFT TICKET 型）で明暗のリズムを作る。
   ・C-14: 同意チェックのアクセシブル名を aria-label で完全な文にした（HTML側）。
   ・C-15: 掲載イメージ枠が「入選作を並べる約束」に読まれないよう注記を要確認表記に変更（HTML側）。
   ========================================================== */
.pf-band { margin-top: var(--cx-gap-sec); }
/* 白い情報カードの中の見出しは墨／青のまま（.cx-bluesec の白抜き規定を打ち消す） */
.pf-band .cx-infocard .cx-head__en { color: var(--cx-blue); }
.pf-band .cx-infocard .cx-head__label { color: var(--cx-ink); }

@media (max-width: 768px) {
  .pf-band { margin-top: var(--cx-gap-sec-sp); }
}