.media-relations-intro{
  margin:0 0 22px;
  padding:20px 22px;
  background:var(--ns-card-bg,#fff);
  border:1px solid var(--ns-border,#d9e1e8);
  border-radius:calc(var(--ns-radius,8px) + 3px);
}
.media-relations-intro h2{margin:0 0 10px;font-size:1.2rem}
.media-relations-intro p{margin:0 0 12px;line-height:1.8}
.media-relations-intro ul{margin:0;padding-left:1.4em;color:#475569;line-height:1.8}
.media-relations-status{margin:0 0 18px}
.media-category-fieldset,.media-region-fieldset{margin:0;padding:0;border:0}
.media-category-fieldset legend,.media-region-fieldset legend{margin-bottom:6px;font-size:.92rem;font-weight:800}

/* 希望地域・希望カテゴリーの一括選択操作 */
.media-region-bulk-actions,
.media-category-bulk-actions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.media-region-toggle-all,
.media-category-toggle-all{
  min-height:40px;
  padding:7px 14px;
  font-size:.86rem;
  line-height:1.4;
  white-space:nowrap;
}

/* 希望地域の終了位置と希望カテゴリー見出しの間に余白を追加 */
.media-category-fieldset{
  margin-top:16px;
}

/*
 * forms.css の `.form-field label` / `.form-field input` より高い詳細度で
 * チェックボックス用UIを明示的に上書きする。
 * PC / Android / iOS Safari でラベルとチェックボックスが横並びになるよう、
 * checkbox 自体はOS標準描画を利用する。
 */
.media-category-options{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px;
}
.form-field label.media-category-option{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:0;
  padding:9px 10px;
  border:1px solid var(--ns-border,#d9e1e8);
  border-radius:var(--ns-radius,8px);
  background:var(--ns-card-bg,#fff);
  font-size:.9rem;
  line-height:1.5;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.media-category-empty{margin:8px 0 0;color:#64748b}

.media-region-groups{
  margin-top:12px;
  display:grid;
  gap:12px;
}
.media-region-group{
  padding:12px 14px;
  border:1px solid var(--ns-border,#d9e1e8);
  border-radius:var(--ns-radius,8px);
  background:var(--ns-card-bg,#fff);
}
.media-region-group h3{margin:0 0 9px;font-size:.9rem}
.media-region-options{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px 10px;
}
.form-field label.media-region-option{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:34px;
  margin:0;
  padding:4px 2px;
  font-size:.88rem;
  line-height:1.45;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* forms.css の input { width:100%; padding:... } を checkbox では無効化 */
.form-field .media-category-option > input[type="checkbox"],
.form-field .media-region-option > input[type="checkbox"]{
  -webkit-appearance:checkbox;
  appearance:auto;
  display:inline-block;
  inline-size:18px;
  block-size:18px;
  width:18px;
  height:18px;
  min-width:18px;
  max-width:18px;
  min-height:18px;
  max-height:18px;
  flex:0 0 18px;
  margin:1px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  accent-color:var(--ns-main,#1f4f7a);
  vertical-align:middle;
}
.form-field .media-region-option > input[type="checkbox"]{margin-top:0}
.form-field .media-category-option:focus-within,
.form-field .media-region-option:focus-within{
  outline:3px solid rgba(31,79,122,.14);
  outline-offset:2px;
}
.media-region-empty{margin:8px 0 0;color:#64748b}
.media-action-card{max-width:720px;margin:0 auto}
.media-action-card h1{margin:0 0 20px;font-size:clamp(1.5rem,4vw,2rem)}
/* 希望カテゴリーとの境界を明確にし、「不正送信防止確認」上部に適切な余白を確保 */
.media-captcha-section{
  margin-top:32px;
}
.media-captcha-section .form-help.is-error{color:#b91c1c;font-weight:700}

@media(max-width:980px){
  .media-region-options{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:780px){
  .media-region-options{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
  .media-captcha-section{margin-top:28px}
  .media-category-fieldset{margin-top:14px}
  .media-region-toggle-all,
  .media-category-toggle-all{min-height:44px}
  .media-category-options{grid-template-columns:1fr}
  .media-region-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media-relations-intro{padding:18px 16px}
  .media-region-group{padding:11px 10px}
  .form-field label.media-region-option{min-height:36px;padding:5px 1px}
}
@media(max-width:340px){
  .media-region-options{grid-template-columns:1fr}
}