/* =========================================================
   共通ユーティリティ
   ========================================================= */
.red-font {
  color: #f74f1f;
}

/* PC/SP 切り替え（必要に応じて使用） */
.pc {
  display: none;
}
.sp {
  display: none;
}

/* お問い合わせページではグローバルのフローティングバナーを非表示 */
.floating-banner {
  display: none !important;
}

/* =========================================================
   レイアウト：共通ラッパー
   ========================================================= */
.single-contact-mainwrapper {
  margin: 0 auto;
  padding: 190px 26px 50px;
}

.single-contact-mainwrapper .link-tree {
  width: 100%;
  margin: 40px auto;
}

.single-contact-mainwrapper .link-tree .link-tree-a {
  font-weight: bold;
  font-size: 14px;
}

.single-contact-mainwrapper .single-contact-content {
  width: 100%;
  margin: 0 auto;
}

.single-contact-mainwrapper .single-contact-content .single-contact-tag-list {
  display: flex;
}

.single-contact-mainwrapper .single-contact-content .single-contact-tag-list .single-contact-tag {
  padding: 4px 10px;
  margin: 0 4px 8px 4px;
  background: #ffd5c1;
  font-weight: 700;
}

/* 見出し・本文 */
.single-contact-mainwrapper .single-contact-content .single-contact-article .contact-title,
.single-contact-mainwrapper .single-contact-content .single-contact-article .contactTitle {
  text-align: center;
}

.single-contact-mainwrapper .single-contact-content .single-contact-article p {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5em;
  padding-top: 18px;
}

.single-contact-mainwrapper .single-contact-content .single-contact-article h1 {
  color: #063026;
  font-size: 26px;
  font-weight: 800;
  margin: 0.67em 0;
}

.single-contact-mainwrapper .single-contact-content .single-contact-article h2 {
  color: #3c4d69;
  font-size: 22px;
  font-weight: bold;
  margin-top: 20px;
}

.single-contact-mainwrapper .single-contact-content .single-contact-article h3 {
  color: #3c4d69;
  font-size: 20px;
  font-weight: bold;
  margin-top: 64px;
}

.single-contact-mainwrapper .single-contact-content .single-contact-article h4 {
  font-size: 18px;
  margin-top: 64px;
}

.single-contact-mainwrapper .single-contact-content .single-contact-article img {
  margin-bottom: 20px;
}

/* DL 用ラッパー（必要ならそのまま利用） */
.single-contact-dl-mainwrapper {
  margin: 0 auto;
  padding: 77px 26px 50px;
}

.single-contact-dl-mainwrapper .link-tree {
  width: 100%;
  margin: 40px auto;
}

.single-contact-dl-mainwrapper .link-tree .link-tree-a {
  font-weight: bold;
  font-size: 14px;
}

.single-contact-dl-mainwrapper .single-contact-left {
  width: 100%;
  margin: 0 auto;
  padding-top: 40px;
  text-align: center;
}

.single-contact-dl-mainwrapper .single-contact-left .single-contact-article .contact-title,
.single-contact-dl-mainwrapper .single-contact-left .single-contact-article .contactTitle {
  text-align: center;
  font-size: 24px !important;
}

.single-contact-dl-mainwrapper .single-contact-left .single-contact-article .content-summary {
  margin-top: 50px;
}

.single-contact-dl-mainwrapper .single-contact-left .single-contact-article .content-summary p {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #3c4d69;
}

.single-contact-dl-mainwrapper .single-contact-left .single-contact-article .content-summary .summary {
  width: 100%;
  margin: 0 auto;
  padding: 25px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  text-align: left;
  box-shadow: 0px 5px 16px -2px rgba(10, 10, 10, 0.08);
}

.single-contact-dl-mainwrapper .single-contact-left .single-contact-article .content-summary .summary li {
  font-size: 16px;
  font-weight: 600;
  color: #505050;
  margin-top: 2px;
  list-style: none;
}

.single-contact-dl-mainwrapper .single-contact-left .single-contact-article .content-summary .summary li:before {
  content: "";
  width: 8px;
  height: 8px;
  display: inline-block;
  background-color: #505050;
  border-radius: 50%;
  position: relative;
  top: -1px;
  margin-right: 5px;
}

/* =========================================================
   PC レイアウト調整
   ========================================================= */
@media screen and (min-width: 1024px) {
  .sp {
    display: none;
  }

  .single-contact-mainwrapper {
    padding-top: 200px;
    padding-bottom: 100px;
  }

  .single-contact-mainwrapper .link-tree {
    width: 800px;
    margin: 40px auto;
  }

  .single-contact-mainwrapper .single-contact-content {
    width: 800px;
    margin: 0 auto;
  }

  .single-contact-mainwrapper .single-contact-content .single-contact-article h1 {
    font-size: 34px;
  }

  .single-contact-dl-mainwrapper {
    padding: 90px 80px;
    display: flex;
    justify-content: center;
  }

  .single-contact-dl-mainwrapper .link-tree {
    width: 800px;
    margin: 40px auto;
  }

  .single-contact-dl-mainwrapper .single-contact-content {
    width: 80%;
    margin: 0 auto;
  }

  .single-contact-dl-mainwrapper .single-contact-left .single-contact-article .contact-title,
  .single-contact-dl-mainwrapper .single-contact-left .single-contact-article .contactTitle {
    font-size: 30px !important;
  }
}

/* 本文を少し小さく（フォーム説明用） */
.single-contact-article p {
  padding-top: 0 !important;
  font-size: 14px !important;
}

/* =========================================================
   フォームレイアウト・スタイル
   （contact-validation.js / roleplay-contact.php 用）
   ========================================================= */

/* フォームグループ */
.form-group {
  margin-bottom: 24px;
}

/* 横2列レイアウト */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media screen and (min-width: 768px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ラベル */
.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
  font-size: 16px;
}

/* 必須・任意バッジ */
.required-badge {
  display: inline-block;
  background-color: #e74c3c;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px 4px;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: 500;
}

.optional-badge {
  display: inline-block;
  background-color: #95a5a6;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px 4px;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: 500;
}

/* 入力フィールド共通 */
.formContent {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd;
  margin-bottom: 0;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background-color: #fff;
}

/* ホバー */
.formContent:hover:not(:focus):not(.error) {
  border-color: #bbb;
  transition: border-color 0.2s ease;
}

/* フォーカス */
.formContent:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
  background-color: #f8fbff;
  transform: scale(1.01);
}

/* エラー／成功 */
.formContent.error {
  border-color: #e74c3c;
  background-color: #ffe6e6;
}

.formContent.success {
  border-color: #27ae60;
  background-color: #fff;
}

/* テキストエリア */
textarea.formContent {
  resize: vertical;
  min-height: 120px;
}

/* セレクトボックス */
select.formContent {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

/* ラジオボタングループ */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.radio-item {
  display: flex;
  align-items: center;
}

.radio-item input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: #161616;
}

.radio-label {
  margin-left: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

/* チェックボックス */
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #161616;
}

.checkbox-label {
  cursor: pointer;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.checkbox-label a {
  color: #ba4d4d;
  text-decoration: underline;
}

/* ホバー時の背景変化 */
.radio-item:hover,
.checkbox-group:hover {
  background-color: #f8f9fa;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

/* エラーメッセージ */
.error-message {
  display: block;
  color: #e74c3c;
  font-size: 13px;
  margin-top: 6px;
  min-height: 18px;
}

.error-message:empty {
  display: none;
}

/* ヒントテキスト */
.form-hint {
  display: block;
  color: #7f8c8d;
  font-size: 12px;
  margin-top: 6px;
}

/* 文字数カウンター */
.char-counter {
  text-align: right;
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 6px;
}

.char-count {
  font-weight: 600;
  color: #333;
}

.char-counter.warning .char-count {
  color: #f39c12;
}

.char-counter.danger .char-count {
  color: #e74c3c;
}

/* カウンターとエラーメッセージの横並び */
.char-counter-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  gap: 12px;
}

.char-counter-wrapper .char-counter {
  margin-top: 0;
  flex-shrink: 0;
}

.char-counter-wrapper .error-message {
  margin-top: 0;
  text-align: left;
  flex-grow: 1;
}

/* 通知メッセージ */
.form-notification {
  padding: 12px 20px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 14px;
}

.error-notification {
  background-color: #ffe6e6;
  border-left: 4px solid #e74c3c;
  color: #c0392b;
}

/* 送信ボタンエリア */
.submit-area {
  margin-top: 32px;
  text-align: center;
}

/* 送信ボタン */
.formSubmitButton {
  background-color: #2C7260;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 48px 16px;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.formSubmitButton:hover:not(:disabled) {
  color: #fff;
  background-color: #063026;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(58, 58, 58, 0.3);
}

.formSubmitButton:active:not(:disabled) {
  transform: translateY(0);
}

.formSubmitButton:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ローディング状態 */
.formSubmitButton.loading {
  position: relative;
  color: transparent;
}

.formSubmitButton.loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 3px solid #fff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 0.8s linear infinite;
}

/* =========================================================
   日本語リアルタイムプレビュー
   ========================================================= */
.japanese-preview {
  display: none;
  margin-top: 8px;
  padding: 10px 14px;
  background-color: #fff5f5;
  border: 2px solid #e74c3c;
  border-radius: 4px;
  animation: slideDown 0.3s ease-out;
}

.japanese-preview.show {
  display: block;
}

.japanese-preview-label {
  font-size: 12px;
  color: #e74c3c;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.japanese-preview-label::before {
  content: "⚠️";
  font-size: 14px;
}

.japanese-preview-content {
  font-size: 16px;
  color: #e74c3c;
  font-weight: 700;
  letter-spacing: 2px;
  word-break: break-all;
  line-height: 1.6;
}

footer {
  color: #b6b6b6;
}

/* =========================================================
   アニメーション・アクセシビリティ
   ========================================================= */
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* エラーフィールド揺れ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.formContent.error {
  animation: shake 0.5s;
}

/* エラーメッセージのフェードイン */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.error-message:not(:empty) {
  animation: fadeIn 0.3s ease-out;
}

/* サーバーサイドエラー */
.server-error {
  background-color: #fee;
  border: 2px solid #f66;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  animation: slideDown 0.3s ease-out;
}

.server-error p {
  color: #c33;
  font-weight: 500;
  margin: 0;
}

/* スライドダウン */
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 8px;
  }
}

/* フォーカス可視リング */
*:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* =========================================================
   レスポンシブ微調整
   ========================================================= */
@media screen and (max-width: 768px) {
  .formContent {
    font-size: 16px; /* iOS Safari の自動ズーム対策 */
  }

  .formSubmitButton {
    width: 100%;
    padding: 16px 24px;
  }

  .radio-group {
    gap: 16px;
  }

  .form-row {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }
}

/* 印刷時：送信ボタン非表示 */
@media print {
  .formSubmitButton {
    display: none;
  }
}

/* =========================================================
   該当ページに遷移中の時の対応。
   ========================================================= */
.contact-disabled {
  background-color: #ccc !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: #ccc !important;
  color: #666 !important;
}