@charset "utf-8";

/* ======= Layout (local only) ======= */
.survey-wrap{ padding:40px 0 80px; background:#fff; }
.survey-container{ max-width:960px; margin:0 auto; padding:0 16px; }
.survey-article{
  margin: 0 100px;
 }

/* ======= Header ======= */
.survey-header{ margin-bottom:24px; }
.survey-title{ font-size:28px; line-height:1.4; margin:0 0 8px; font-weight:800; color:#222; }
.survey-lead{ color:#444; }

/* ======= Badges ======= */
.survey-badge-req,
.survey-badge-opt{
  display:inline-block; font-size:12px; font-weight:700;
  padding:2px 8px; border-radius:999px; line-height:1.6;
}
.survey-badge-req{ background:#00339E; color:#fff; }
.survey-badge-opt{ background:#eef2ff; color:#374151; border:1px solid #c7d2fe; }

/* ======= Form ======= */
.survey-form{ display:grid; gap:20px; }
.survey-row{ display:grid; gap:8px; }
.survey-row--agree{ margin-top:4px; }

.survey-q2{
 font-weight:700;
 color:#111;
 background-color: #eef2ff;
 padding: 10px;
}

.survey-label{
 font-weight:500;
 color:#111; 
 padding: 0 20px;

}

.survey-input,
.survey-select,
.survey-textarea{
  width:95%; border:1px solid #D3D7D8; border-radius:6px;
  padding:10px 12px; font-size:16px; background:#fff;
  margin: 0 10px;
}
.survey-input:focus,
.survey-select:focus,
.survey-textarea:focus{
  outline:none; border-color:#00339E; box-shadow:0 0 0 3px rgba(0,51,158,.15);
}

.survey-check{ display:flex; align-items:center; gap:8px; line-height:1.8; }
.survey-checkbox-group, .survey-radio-group{ display:grid; gap:6px; }

.survey-note{ font-size:13px; color:#6b7280; }

.survey-error{ min-height:1em; color:#b91c1c; font-size:13px; margin:0; }

/* ======= Actions ======= */
.survey-actions{ margin-top:8px; }
.survey-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#00339E; color:#fff; text-decoration:none;
  border:0; border-radius:8px; font-weight:800; font-size:16px;
  padding:10px 20px; cursor:pointer;
}
.survey-btn:hover{ opacity:.92; }

/* ======= a11y helper ======= */
.survey-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ======= Responsive ======= */
@media screen and (max-width:768px){
  .survey-wrap{ padding:24px 0 64px; }
  .survey-title{ font-size:22px; }
}

/* ======= Inputs polish: 視認性＆タップ領域アップ ======= */

/* 共通：行間・余白を少しゆったりに */
.survey-row { gap: 10px; }

/* ラベルとコントロールをブロック化（クリック領域を広げる） */
.survey-check {
  position: relative;
  padding: 10px 12px;
  border: 1px solid #D3D7D8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.survey-check + .survey-check { margin-top: 8px; }

/* 入力自体は少し大きめに（44pxターゲット指標） */
.survey-check input[type="checkbox"],
.survey-check input[type="radio"] {
  width: 18px; height: 18px;
}

/* hover / focus-visible でアウトライン（アクセシビリティ重視） */
.survey-check:hover { border-color: #9AA3A7; }
.survey-check:has(input:focus-visible) {
  outline: 3px solid rgba(0,51,158,.18);
  outline-offset: 2px;
}

/* 選択時は枠色をブランドカラーに */
.survey-check:has(input:checked) {
  border-color: #00339E;
  box-shadow: 0 0 0 3px rgba(0,51,158,.12);
}

/* セレクト（プルダウン）を読みやすく */
.survey-select {
  height: 44px;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, #00339E 50%),
    linear-gradient(135deg, #00339E 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* 必須バッジとラベルの揃え微調整 */
.survey-label .survey-badge-req,
.survey-label .survey-badge-opt {
  transform: translateY(-1px);
}

/* エラー表示を少し強調して見逃しにくく */
.survey-error {
  color: #b42318;
  font-weight: 600;
}
.survey-input[aria-invalid="true"],
.survey-textarea[aria-invalid="true"],
.survey-select[aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: 0 0 0 3px rgba(180,35,24,.12);
}

/* モバイル：選択肢カードのタップしやすさ確保 */
@media (max-width:768px){
  .survey-check { padding: 12px; }
  .survey-article{ margin: 0px; }
}

/* 既存の下線問題を念のためブロック（親aの装飾があっても無効化） */
a .survey-btn, a .survey-btn:hover { text-decoration: none !important; }