/* custom-form.css */

/* ベースコンテナ */
#mc_embed_signup {
  background: #fff !important;
  clear: left !important;
  font: 14px 'Helvetica Neue', Arial, sans-serif !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 30px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
  width: auto !important;
}

#mc_embed_signup h2 {
 /* color: #2c3e50 !important;*/
  border-bottom: 2px solid #3498db !important;
  padding-bottom: 15px !important;
  margin-bottom: 25px !important;
  font-size: 24px !important;
  font-weight: bold !important;
}

/* より強い詳細度で見出し色を確実に適用 */
div#mc_embed_signup h2,
#mc_embed_shell #mc_embed_signup h2 {
 /* color: #2c3e50 !important;*/
}

/* 必須マーク表示 */
.indicates-required {
  margin-bottom: 20px !important;
  font-size: 13px !important;
  color: #666 !important;
}

.asterisk {
  color: #e74c3c !important;
  font-weight: bold !important;
}

/* フォームフィールド基本設定 */
.custom-field-group {
  margin-bottom: 25px !important;
  clear: both !important;
  width: 100% !important;
}

.custom-field-group label {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: bold !important;
  color: #333 !important;
  font-size: 14px !important;
}

/* 入力フィールド共通スタイル */
.custom-text,
.custom-email,
.custom-select {
  width: 100% !important;
  padding: 12px !important;
  border: 2px solid #ddd !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
  font-family: inherit !important;
}

.custom-text:focus,
.custom-email:focus,
.custom-select:focus {
  outline: none !important;
  border-color: #3498db !important;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.3) !important;
}

/* セレクトボックス */
.custom-select {
  background: #fff !important;
  cursor: pointer !important;
}

/* チェックボックスコンテナ */
.checkbox-container {
  margin-top: 10px !important;
}

.checkbox-item {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 15px !important;
  padding: 8px 0 !important;
}

.checkbox-item input[type="checkbox"] {
  margin-right: 12px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

.checkbox-label {
  font-weight: normal !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  color: #333 !important;
  flex: 1 !important;
  font-size: 14px !important;
  margin-bottom: 0 !important;
}

.checkbox-label:hover {
  color: #3498db !important;
}

/* プライバシーポリシーセクション */
.privacy-section {
  background: #f8f9fa !important;
  padding: 20px !important;
  border-radius: 6px !important;
  border-left: 4px solid #e74c3c !important;
  margin-top: 30px !important;
}

.privacy-section .checkbox-label a {
  color: #3498db !important;
  text-decoration: none !important;
}

.privacy-section .checkbox-label a:hover {
  text-decoration: underline !important;
}

/* エラーメッセージ */
.error-msg {
  color: #e74c3c !important;
  font-size: 12px !important;
  margin-top: 5px !important;
  font-weight: normal !important;
}

/* 送信エリア */
.submit-area {
  text-align: center !important;
  margin-top: 35px !important;
}

.custom-button {
  background: #3498db !important;
  color: white !important;
  padding: 15px 40px !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  min-width: 180px !important;
}

.custom-button:hover:not(:disabled) {
  background: #2980b9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3) !important;
}

.custom-button:disabled {
  background: #bdc3c7 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

#submit-loading {
  color: #7f8c8d !important;
  font-style: italic !important;
  margin-top: 10px !important;
  font-size: 14px !important;
}

/* Mailchimp元々のレスポンスメッセージ */
#mce-responses .response {
  margin: 15px 0 !important;
  padding: 10px !important;
  border-radius: 4px !important;
}

#mce-error-response {
  background: #ffeaea !important;
  color: #d63031 !important;
  border: 1px solid #d63031 !important;
}

#mce-success-response {
  background: #eafaf1 !important;
  color: #27ae60 !important;
  border: 1px solid #27ae60 !important;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  #mc_embed_signup {
    padding: 20px !important;
    margin: 10px !important;
  }
  
  #mc_embed_signup h2 {
    font-size: 20px !important;
  }
  
  .custom-text,
  .custom-email,
  .custom-select {
    font-size: 16px !important; /* iOSズーム防止 */
  }
  
  .checkbox-label {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  #mc_embed_signup {
    padding: 15px !important;
    margin: 5px !important;
  }
  
  .custom-button {
    padding: 12px 30px !important;
    font-size: 15px !important;
    min-width: 150px !important;
  }
  
  .checkbox-label {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  
  .privacy-section {
    padding: 15px !important;
  }
}