/*
 * フォトジョブ（公開画面・マイページ）：ボタンの位置とスマートフォンの使いやすさの共通ルール。
 *  - フォームの最後のボタン（.pj-actions）は、PC では右寄せ、スマートフォンでは幅いっぱい
 *  - 長いフォームの保存ボタン（.pj-actions.pj-sticky）は、スマートフォンで画面の下に固定
 *  - マイページのメニュー（.pj-mnav）は、スマートフォンでは「メニュー」ボタンで開閉
 *  - 表（.pj-stack）は、スマートフォンではカード型に並べ替える
 *  - チェック欄・小さなリンクは、指で押しやすい大きさに
 */

/* ---- フォームの最後のボタン ---- */
.pj-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; text-align: right; }
.pj-actions > .pj-note { flex: 1 1 100%; order: -1; margin: 0; text-align: right; }

/* ---- マイページのメニュー ---- */
.pj-mnav-toggle { display: none; }

@media (max-width: 767px) {
  .pj-mnav-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
    border: 0; background: #fff; padding: 14px 16px; font-size: 15px; font-weight: 700; color: #1F2A24; cursor: pointer; text-align: left;
  }
  .pj-mnav-toggle .pj-mnav-arrow { transition: transform .15s; }
  .pj-mnav.is-open .pj-mnav-toggle .pj-mnav-arrow { transform: rotate(180deg); }
  .pj-mnav .pj-mnav-list { display: none !important; border-top: 1px solid #E3E9E5; }
  .pj-mnav.is-open .pj-mnav-list { display: block !important; }
  .pj-mnav .pj-mnav-list > li { flex: none !important; }
  .pj-mnav .pj-mnav-list a, .pj-mnav .pj-mnav-list button { min-height: 48px; }
}

@media (max-width: 640px) {
  /* ボタン：幅いっぱい・押しやすい高さ */
  main .btn-cta:not(.pj-keep), main .btn-outline:not(.pj-keep) {
    width: 100%; min-width: 0 !important; min-height: 48px; justify-content: center; box-sizing: border-box;
  }
  .pj-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .pj-actions > * { width: 100%; }
  .pj-actions > .pj-note { text-align: center; }
  .pj-actions > button, .pj-actions > a { min-height: 48px; }

  /* 長いフォームの保存ボタンは、画面の下に固定 */
  .pj-actions.pj-sticky {
    position: sticky; bottom: 0; z-index: 25; margin: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid #DDE5E0; box-shadow: 0 -4px 12px rgba(22, 64, 36, .06);
  }

  /* 表をカード型に */
  table.pj-stack, table.pj-stack tbody, table.pj-stack tr, table.pj-stack td { display: block; width: 100%; }
  table.pj-stack thead { display: none; }
  table.pj-stack tr { box-sizing: border-box; border: 1px solid #E3E9E5 !important; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
  table.pj-stack td { padding: 2px 0 !important; white-space: normal !important; }
  table.pj-stack td[data-label]::before { content: attr(data-label) "："; color: #6B756F; font-size: 12px; }

  /* チェック欄・小さなボタンを押しやすく */
  main input[type=checkbox]:not([style*="opacity:0"]), main input[type=radio]:not([style*="opacity:0"]) { min-width: 20px; min-height: 20px; }
  main form button.underline, main form button.text-muted { padding: 10px 6px; }
  main .field { font-size: 16px; } /* iPhone で入力時に画面が拡大されないように */
}