/**
 * Yane Life フォーム専用CSS（元デザイン完全保持版・優先度強化）
 * プレフィックス: yane-life-
 */

/*------------------------------一括問い合わせフォーム（改修版）----------------*/
/* ✅ フォーム全体 */
#yane-life-custom-inquiry-form-wrap {
  width: 100% !important;
  background: #fff !important;
}

#yane-life-custom-inquiry-form {
  width: 100% !important;
}

/* ✅ 質問ブロック全体（テーブルレイアウト） */
.yane-life-form-question-row {
  display: table !important;
  width: 100% !important;
  margin-bottom: 8px !important; /* 超タイトに詰める */
}

/* ✅ 左側：質問タイトル */
.yane-life-form-label {
  display: table-cell !important;
  width: 260px !important;
  background-color: #F4F4F4 !important;
  color: #000 !important;
  padding: 12px !important;
  font-weight: bold !important;
  vertical-align: middle !important;
  text-align: left !important;
}

/* ✅ 質問タイトル内の必須マーク */
.yane-life-form-label .yane-life-required {
  display: inline-block !important;
  margin-top: 4px !important;
  background: red !important;
  color: #fff !important;
  font-size: 11px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}

/* ✅ 質問タイトル内の任意マーク */
.yane-life-form-label .yane-life-optional {
  display: inline-block !important;
  margin-top: 4px !important;
  background: #999 !important;
  color: #fff !important;
  font-size: 11px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
}

/* ✅ 右側：回答部分 */
.yane-life-form-input {
  display: table-cell !important;
  padding: 12px !important;
  vertical-align: middle !important;
}

/* ✅ 回答内のボックスグリッド（2列固定） */
.yane-life-radio-box-grid {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(2, 1fr) !important; /* 常に2列固定 */
  width: 100% !important; /* 幅を100%に */
}

/* ✅ ラジオボックス（選択肢1個分） - 最重要 */
.yane-life-radio-box {
  display: flex !important;
  border: 2px solid #ccc !important;
  border-radius: 8px !important;
  padding: 10px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
  min-height: 50px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important; /* 幅を100%に */
  box-sizing: border-box !important; /* paddingとborderを幅に含める */
}

.yane-life-radio-box:hover {
  border-color: #0073aa !important;
}

/* ✅ ラジオボタンを非表示にする - 最重要 */
.yane-life-radio-box input[type="radio"] {
  display: none !important;
  opacity: 0 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
}

.yane-life-radio-box-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-align: center !important;
  width: 100% !important;
}

/* ★選択されたら背景色＋枠線色を変える */
@supports(selector(:has(*))) {
  .yane-life-radio-box:has(input[type="radio"]:checked) {
    border-color: #0073AA !important;
    background: #EAF4FC !important;
  }
  .yane-life-radio-box:has(input[type="radio"]:checked) .yane-life-radio-box-content {
    color: #597CB8 !important;
    font-weight: bold !important;
  }
}

/* 古いブラウザ対応 */
.yane-life-radio-box input[type="radio"]:checked + .yane-life-radio-box-content {
  background: #EAF4FC !important;
  border-radius: 6px !important;
  color: #597CB8 !important;
  font-weight: bold !important;
}

/* ✅ テキスト入力欄・テキストエリア - 最強優先度 */
#yane-life-custom-inquiry-form input[type="text"],
#yane-life-custom-inquiry-form input[type="email"],
#yane-life-custom-inquiry-form input[type="tel"],
#yane-life-custom-inquiry-form textarea {
  width: 100% !important;
  max-width: 100% !important; /* 最大幅も100%に制限 */
  padding: 10px !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  box-sizing: border-box !important; /* paddingとborderを幅に含める */
  background: #fff !important;
  color: #333 !important;
  display: block !important;
  margin: 0 !important;
}

#yane-life-custom-inquiry-form textarea {
  min-height: 130px !important;
  resize: vertical !important;
}

/* ✅ プライバシーポリシーと送信ボタンの独立レイアウト */
.yane-life-center-align {
  text-align: center !important;
  margin: 24px 0 16px !important;
  width: 100% !important;
  display: block !important;
}

.yane-life-privacy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
}

.yane-life-privacy input[type="checkbox"] {
  margin: 0 5px 0 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
}

/* ✅ 送信ボタン（幅80%＋影付き） */
.yane-life-submit-button {
  background-color: #00B894 !important;
  color: #fff !important;
  width: 80% !important;
  max-width: 400px !important;
  padding: 14px 0 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
  transition: background-color 0.3s, box-shadow 0.3s !important;
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.yane-life-submit-button:hover {
  background-color: #00997A !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
}

/* 質問タイトル */
.yane-life-label-title {
  font-size: 16px !important;
  font-weight: bold !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* --- スマホサイズ対応（画面幅768px以下） --- */
@media screen and (max-width: 768px) {

  /* フォーム全体もスマホで画面いっぱいに */
  #yane-life-custom-inquiry-form-wrap {
    width: 100% !important;
    max-width: none !important; /* max-width制限を削除 */
    margin: 0 !important;
    padding: 0 !important;
  }

  #yane-life-custom-inquiry-form {
    width: 100% !important;
    max-width: none !important; /* max-width制限を削除 */
    padding: 20px 0 !important; /* 左右paddingを0に */
  }

  /* 質問ブロック全体：縦並びに */
  .yane-life-form-question-row {
    display: block !important;
    margin-bottom: 16px !important;
    width: 100% !important; /* 横幅を100%に */
  }

  /* ラベルと回答欄：縦並びに */
  .yane-life-form-label,
  .yane-life-form-input {
    display: block !important;
    width: 100% !important;
    max-width: none !important; /* max-width制限を削除 */
    padding: 8px 0 !important; /* 左右paddingを0に調整 */
  }

  /* 質問タイトル（背景色＋黒文字） */
  .yane-life-form-label {
    background-color: #F4F4F4 !important;
    color: #000 !important;
    text-align: left !important;
    font-size: 15px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important; /* 内側に適切な余白 */
    margin-bottom: 8px !important; /* 下にマージン追加 */
  }

  .yane-life-form-input {
    padding: 0 12px 8px !important; /* 左右と下にpadding */
  }

  /* 設問タイトル */
  .yane-life-label-title {
    font-size: 15px !important;
    font-weight: bold !important;
  }

  /* 必須マーク（左側に配置） */
  #yane-life-custom-inquiry-form .yane-life-form-label .yane-life-required {
    display: inline-block !important;
    background: #e74c3c !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    order: -1 !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }

  /* 任意マーク（左側に配置） */
  #yane-life-custom-inquiry-form .yane-life-form-label .yane-life-optional {
    display: inline-block !important;
    background: #999 !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    order: -1 !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }

  /* ラジオボックスグリッド：スマホでは2列を維持 */
  .yane-life-radio-box-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* スマホでは2列固定 */
    gap: 12px !important;
    width: 100% !important; /* 幅を100%に */
    max-width: none !important; /* max-width制限を削除 */
  }

  /* ラジオボックス自体（枠） */
  .yane-life-radio-box {
    margin-bottom: 0 !important;
    padding: 12px 8px !important;
    border: 2px solid #ccc !important;
    border-radius: 8px !important;
    background: #fff !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important; /* 幅を100%に */
    box-sizing: border-box !important; /* paddingとborderを幅に含める */
  }

  .yane-life-radio-box:hover {
    border-color: #0073aa !important;
  }

  .yane-life-radio-box input[type="radio"] {
    display: none !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* ラジオボックスの中身（テキストを中央寄せ） */
  .yane-life-radio-box-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  /* 選択状態の表示 */
  @supports(selector(:has(*))) {
    .yane-life-radio-box:has(input[type="radio"]:checked) {
      border-color: #0073AA !important;
      background: #EAF4FC !important;
    }
    .yane-life-radio-box:has(input[type="radio"]:checked) .yane-life-radio-box-content {
      color: #597CB8 !important;
      font-weight: bold !important;
    }
  }

  .yane-life-radio-box input[type="radio"]:checked + .yane-life-radio-box-content {
    background: #eaf4fc !important;
    border-radius: 6px !important;
    color: #597CB8 !important;
    font-weight: bold !important;
  }

  /* テキスト入力欄・テキストエリア */
  #yane-life-custom-inquiry-form input[type="text"],
  #yane-life-custom-inquiry-form input[type="email"],
  #yane-life-custom-inquiry-form input[type="tel"],
  #yane-life-custom-inquiry-form textarea {
    width: 100% !important;
    max-width: 100% !important; /* 最大幅も100%に制限 */
    padding: 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    box-sizing: border-box !important; /* paddingとborderを幅に含める */
  }

  #yane-life-custom-inquiry-form textarea {
    min-height: 130px !important;
  }

  /* プライバシーポリシーと送信ボタン中央寄せ */
  .yane-life-center-align {
    text-align: center !important;
    margin: 24px 0 16px !important;
    width: 100% !important; /* 幅を100%に */
  }

  .yane-life-privacy {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
  }

  /* 送信ボタンもスマホサイズ調整 */
  .yane-life-submit-button {
    background-color: #00B894 !important;
    color: #fff !important;
    width: 90% !important;
    max-width: 360px !important;
    padding: 14px 0 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.3s, box-shadow 0.3s !important;
    display: block !important;
    margin: 16px auto 0 !important;
    text-align: center !important;
    box-sizing: border-box !important; /* paddingとborderを幅に含める */
  }

  .yane-life-submit-button:hover {
    background-color: #00997A !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  }
}

/* ===== ヘッダーデザイン部分（元のまま保持） ===== */
.roof-form-header-container {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: white;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.roof-form-header-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0)"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>');
  opacity: 0.5;
}

.roof-form-header-main-title {
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 16px 0;
  position: relative;
  z-index: 1;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.roof-form-header-highlight {
  color: #f39c12;
  font-size: 36px;
}

.roof-form-header-sub-title {
  font-size: 18px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
  opacity: 0.9;
}

.roof-form-header-content-section {
  background: white;
  padding: 30px 20px;
  color: #333;
  text-align: center;
}

.roof-form-header-description {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
  color: #555;
}

.roof-form-header-features {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.roof-form-header-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
}

.roof-form-header-feature-icon {
  background: #27ae60;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.roof-form-header-cta-text {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 20px;
}

.roof-form-header-cta-icon {
  margin: 0 8px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.roof-form-header-form-container {
  background: #f8f9fa;
  padding: 40px 20px;
}

@media screen and (max-width: 768px) {
  .roof-form-header-main-title {
    font-size: 24px;
  }
  
  .roof-form-header-highlight {
    font-size: 28px;
  }
  
  .roof-form-header-features {
    flex-direction: column;
    gap: 16px;
  }
  
  .roof-form-header-content-section {
    padding: 20px 15px;
  }
  
  .roof-form-header-form-container {
    padding: 20px 10px;
  }
}