/* ===== 共通設定 ===== */

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #fff;
}

main {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* ===== 画像とボタンを重ねるためのラッパー ===== */

.image-container {
  position: relative;
  width: 100%;
}

/* 画像をレスポンシブ＆中央寄せ */
.image-container img:first-child {
  display: block;
  width: 100%;
  height: auto;
}

/* ボタン共通：画像の上に中央揃えで浮かせる */
.btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* 必要に応じて調整可 */
  height: auto;
  z-index: 2;
  cursor: pointer;
}

.btn3{
  width: 90%;
}

.btn5{
  width: 90%;
}


/* 各ボタンの個別位置調整 */
.btn0 { top: 10.7%; }    /* lp01：上寄せ */
.btn1 { bottom: 1%; }     /* lp02：中央付近 */
.btn2 { bottom: 1%; }     /* lp05：やや下 */
.btn3 { bottom: 2.3%; }     /* lp06：中央 */
.btn4 { top: 40%; }     /* lp07：少し上 */
.btn5 { top: 18.8%; }     /* lp07：少し上 */
.btn6 { top: 48.6%; }     /* lp07：少し上 */

/* ===== 動画配置（lp01のみ） ===== */

.lp01 {
  position: relative;
}

/* 動画ラッパー（画像上に浮かせて中央表示） */
.video-wrapper {
  position: absolute;
  bottom: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  max-width: 490px;
  aspect-ratio: 16 / 9;
  z-index: 3;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

/* 動画本体（iframe）をサイズ調整 */
.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* ============アンケート================ */
.survey-section {
  font-family: sans-serif;
  margin: 2em auto; /* ← ここで中央寄せ */
  max-width: 880px;  /* 幅を指定して中央に */
  text-align: center; /* テキストも中央に寄せたい場合 */
}


/* 質問テキスト */
.question {
  font-weight: bold;
  margin-bottom: 1em;
}

/* 共通：縦並びのボタン風デザイン */
.single-options,
.multi-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ボタン風ラベルの共通スタイル */
.single-options label,
.multi-options label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  background-color: white;
  color: #333;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

/* ホバー時の浮き上がり */
.single-options label:hover,
.multi-options label:hover {
  background-color: #f5f5f5;
  transform: translateY(-2px);
}

/* ラジオボタンのスタイル（単一選択） */
.single-options input[type="radio"] {
  display: none;
}
.single-options input[type="radio"]:checked + label {
  background-color: #007BFF;
  color: white;
  border-color: #0056b3;
}

/* チェックボックスのスタイル（複数選択） */
.multi-options input[type="checkbox"] {
  display: none;
}
.multi-options input[type="checkbox"]:checked + label {
  background-color: #28a745;
  color: white;
  border-color: #1e7e34;
}