body {
  --bs-link-color-rgb: lightgreen !important;
}

.text-muted {
  color: rgb(181, 177, 177) !important;
}

#main {
  max-width: 900px;

  margin: 0 auto;

  padding: 20px;
}

#footer {
  background-color: rgb(22, 38, 38);
}

/* inquiryページのフッターリンク色を修正 */

body#inquiry #footer a,
body#inquiry #footer a:link,
body#inquiry #footer a:visited {
  color: #ffffff !important;

  text-decoration: none !important;
}

body#inquiry #footer a:hover,
body#inquiry #footer a:active {
  color: #20c997 !important;

  text-decoration: underline !important;
}

/* Bootstrapのリンク色を上書き */

body#inquiry #footer a[href] {
  color: #ffffff !important;
}

img {
  max-width: 100%;

  height: auto;
}

.scroll-box {
  height: 200px;

  padding: 20px;

  overflow-y: scroll;

  border: 1px solid #cccccc;

  background-color: #eeeeee;
}

label {
  font-weight: bold;
}

em {
  color: red;

  font-weight: bold;
}

a:hover {
  color: #17a2b8;
}

button.btn-primary {
  display: flex;

  justify-content: center;

  align-items: center;

  width: 8em;

  height: 2em;

  /* 横サイズを1.5倍に */

  margin-top: 20px;

  /* ボタンの位置を下げるために追加 */

  border-color: #20c997;

  background-color: #20c997;

  color: white;
}

button.btn-primary:hover {
  border-color: #17a2b8;

  background-color: #17a2b8;
}

button.btn-primary:active {
  border-color: #138496;

  background-color: #138496;
}

button.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.5);
}

button.btn-primary:disabled {
  border-color: #006666; /* 暗い青緑色 */

  background-color: #006666; /* 暗い青緑色 */

  color: #000000; /* 黒 */

  cursor: not-allowed;
}

.responsive-text {
  font-size: 1rem;
}

.input-width {
  width: 60%;
}

label {
  width: 40%;
}

input[type="checkbox"]:checked {
  background-color: #17a2b8; /* 青緑 */

  color: #ffffff; /* 白 */
}

/* inquiryページ専用のスタイル修正 */

body#inquiry {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  line-height: 1.6;

  color: #333;

  background-color: #f8f9fa;
}

body#inquiry #main {
  max-width: 900px;

  margin: 0 auto;

  padding: 20px;

  background-color: #fff;

  border-radius: 8px;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body#inquiry header {
  margin-bottom: 30px;
}

body#inquiry .container {
  max-width: 100%;
}

body#inquiry .form-control {
  border: 1px solid #ced4da;

  border-radius: 0.375rem;

  padding: 0.5rem 0.75rem;

  font-size: 1rem;

  line-height: 1.5;

  transition: all 0.15s ease-in-out;

  background-color: #fff;
}

body#inquiry .form-control:focus {
  border-color: #20c997;

  outline: 0;

  box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.25);

  background-color: #fff;
}

body#inquiry .form-control:invalid {
  border-color: #dc3545;
}

body#inquiry .form-control:valid {
  border-color: #198754;
}

body#inquiry label {
  font-weight: 600;

  margin-bottom: 0.5rem;

  color: #495057;

  display: block;
}

body#inquiry .form-label {
  font-weight: 600;

  margin-bottom: 0.5rem;

  color: #495057;

  min-width: 200px;

  margin-right: 1rem;

  padding-top: 0.5rem;
}

body#inquiry .d-flex.mb-3 {
  align-items: flex-start;

  margin-bottom: 1.5rem !important;

  border-bottom: 1px solid #f1f3f4;

  padding-bottom: 1rem;
}

body#inquiry .d-flex.mb-3:last-of-type {
  border-bottom: none;
}

body#inquiry .d-flex.mb-3 input,
body#inquiry .d-flex.mb-3 textarea {
  flex: 1;

  max-width: 400px;
}

body#inquiry .input-width {
  flex: 1;

  max-width: 400px;
}

/* 新しいカスタムform-checkのスタイル */

body#inquiry .custom-form-check {
  display: flex; /* ラジオボタンとラベルを横並びにするためにflexを使用 */

  align-items: center; /* 垂直方向の中央揃え */

  margin: 0;

  background-color: transparent !important; /* 背景色を透明に設定 */

  padding: 0; /* Bootstrapのデフォルトpaddingをリセット */

  flex-shrink: 0; /* flexアイテムとして縮小させない */
}

body#inquiry .custom-form-check-input {
  margin-right: 0.5rem; /* ラジオボタンとテキストの間隔 */

  margin-top: 0;

  position: relative !important; /* Bootstrapのabsoluteを上書き */

  margin-left: 0 !important; /* Bootstrapの-1.25remを上書き */

  flex-shrink: 0; /* ラジオボタンのサイズを固定 */

  background-color: #fff !important; /* 背景色を白色に設定 */

  border: 1px solid #ced4da !important; /* ボーダー色を標準的な灰色に設定 */
}

body#inquiry .custom-form-check-input:checked {
  background-color: #20c997 !important; /* 選択時の背景色を青緑に設定 */

  border-color: #20c997 !important; /* 選択時のボーダー色を青緑に設定 */
}

body#inquiry .custom-form-check-label {
  font-weight: normal;

  cursor: pointer;

  margin-bottom: 0;

  padding-left: 0 !important; /* Bootstrapのデフォルト1.25remを上書きしてラジオボタンとテキストを密着 */

  line-height: 1.2;

  background-color: transparent !important; /* 背景色を透明に設定 */

  color: #495057 !important; /* テキスト色を標準的な灰色に設定 */
}

body#inquiry .scroll-box {
  height: 200px;

  padding: 15px;

  overflow-y: auto;

  border: 1px solid #dee2e6;

  border-radius: 0.375rem;

  background-color: #f8f9fa;

  font-size: 0.875rem;

  line-height: 1.6;

  margin: 1rem 0;
}

body#inquiry .scroll-box strong {
  color: #495057;

  display: block;

  margin-bottom: 0.5rem;
}

body#inquiry .btn-lg {
  padding: 0.75rem 2rem;

  font-size: 1.125rem;

  border-radius: 0.375rem;

  font-weight: 600;

  text-transform: none;

  letter-spacing: 0.5px;
}

body#inquiry .alert {
  border-radius: 0.375rem;

  padding: 1rem 1.25rem;

  margin-bottom: 1rem;

  border: 1px solid transparent;
}

body#inquiry .alert-success {
  color: #155724;

  background-color: #d4edda;

  border-color: #c3e6cb;
}

body#inquiry .small {
  font-size: 0.875rem;

  color: #6c757d;
}

body#inquiry .text-muted {
  color: #6c757d !important;
}

body#inquiry em {
  color: #dc3545;

  font-weight: bold;

  font-style: normal;
}

body#inquiry .submit {
  margin-top: 2rem;

  padding-top: 1rem;

  border-top: 2px solid #e9ecef;
}

/* 個人情報保護方針のチェックボックス修正 */

body#inquiry #agreePolicy {
  background-color: #17a2b8 !important;

  border-color: #17a2b8 !important;

  margin: 0 !important;

  flex-shrink: 0 !important;
}

body#inquiry #agreePolicy:checked {
  background-color: #17a2b8 !important;

  border-color: #17a2b8 !important;
}

/* 個人情報保護方針のチェックボックスコンテナ - 新しいクラス名 */

body#inquiry .inquiry-privacy-checkbox {
  display: flex; /* チェックボックスとラベルをフレックスで並べる */

  align-items: center; /* 垂直中央揃え */

  background-color: #17a2b8 !important;

  border-radius: 5px !important;

  width: 100% !important;

  padding: 0.5rem 1rem; /* パディングを追加して見た目を改善 */
}

body#inquiry .inquiry-privacy-checkbox input[type="checkbox"] {
  border: 1px solid white !important;

  background-color: #17a2b8 !important;

  margin-top: 0; /* 上下中央揃えのため0に設定 */

  vertical-align: middle; /* テキストと垂直方向を合わせる */

  flex-shrink: 0 !important;
}

body#inquiry .inquiry-privacy-checkbox label {
  color: white !important;

  margin-left: 0; /* ラベル全体の左マージンを0に戻す */

  margin-bottom: 0 !important;
  padding-left: 0 !important; /* form-check-labelのpadding-leftを上書き */

  cursor: pointer !important;

  white-space: normal !important; /* テキストの折り返しを許可 */
}

/* 個人情報保護方針リンクのスタイル */

body#inquiry .inquiry-privacy-checkbox label a {
  color: #ffa500 !important; /* 明るいオレンジ */

  text-decoration: underline !important;

  font-weight: bold !important;
}

body#inquiry .inquiry-privacy-checkbox label a:hover {
  color: #ffb84d !important; /* ホバー時のより明るいオレンジ */

  text-decoration: underline !important;
}

body#inquiry .inquiry-privacy-checkbox label a:visited {
  color: #ffa500 !important; /* 訪問済みでも明るいオレンジを維持 */
}

/* より強力なセレクタでリンク色を確実に設定 */

body#inquiry .inquiry-privacy-checkbox a,
body#inquiry .inquiry-privacy-checkbox a:link,
body#inquiry .inquiry-privacy-checkbox a:visited,
body#inquiry .inquiry-privacy-checkbox a:hover,
body#inquiry .inquiry-privacy-checkbox a:active {
  color: #ffa500 !important; /* 明るいオレンジ */

  text-decoration: underline !important;

  font-weight: bold !important;
}

body#inquiry .inquiry-privacy-checkbox a:hover {
  color: #ffb84d !important; /* ホバー時のより明るいオレンジ */
}

/* Bootstrapのデフォルトリンク色を上書き */

body#inquiry .inquiry-privacy-checkbox a[href] {
  color: #ffa500 !important; /* 明るいオレンジ */
}

/* Copyright部分のセンター配置 */

body#inquiry #footer .text-center {
  text-align: center !important;

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  width: 100% !important;
}

body#inquiry #footer .text-center p {
  margin: 0 !important;

  text-align: center !important;
}

/* 新しいラジオボタングループのスタイル */

body#inquiry .radio-group {
  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  background-color: transparent !important;
}

body#inquiry .radio-row {
  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  align-items: center;

  background-color: transparent !important;
}

body#inquiry .radio-row .custom-form-check {
  display: flex;

  align-items: center;

  margin: 0;

  flex-shrink: 0;

  background-color: transparent !important;

  padding: 0;
}

/* レスポンシブ対応 */

@media (max-width: 768px) {
  body#inquiry .d-flex.mb-3 {
    flex-direction: column;

    align-items: flex-start;

    gap: 0.5rem;
  }

  body#inquiry .form-label {
    min-width: auto;

    margin-right: 0;

    margin-bottom: 0.5rem;

    padding-top: 0;
  }

  body#inquiry .d-flex.mb-3 input,
  body#inquiry .d-flex.mb-3 textarea,
  body#inquiry .input-width {
    max-width: 100%;

    width: 100%;
  }

  body#inquiry .radio-row {
    flex-direction: column;

    gap: 0.5rem;

    align-items: flex-start;
  }

  body#inquiry .radio-row .custom-form-check {
    width: 100%;
  }

  body#inquiry .responsive-text {
    font-size: 0.875rem;
    white-space: nowrap; /* テキストを1行に保持 */
    overflow: hidden; /* はみ出したテキストを隠す */
    text-overflow: ellipsis; /* はみ出したテキストを「...」で表示 */
    line-height: 1.2; /* 行の高さを調整 */
  }

  body#inquiry #main {
    padding: 15px;

    margin: 10px;
  }
}

@media (max-width: 576px) {
  body#inquiry #main {
    padding: 10px;

    margin: 5px;
  }

  body#inquiry .responsive-text {
    font-size: 0.8rem;
  }

  body#inquiry .btn-lg {
    padding: 0.5rem 1.5rem;

    font-size: 1rem;

    width: 100%;
  }

  body#inquiry .scroll-box {
    height: 150px;

    padding: 10px;

    font-size: 0.8rem;
  }

  body#inquiry .form-label {
    font-size: 0.9rem;
  }

  body#inquiry .form-control {
    font-size: 0.9rem;

    padding: 0.375rem 0.5rem;
  }
}

/* 新しいチェックボックスグループのスタイル */

body#inquiry .new-checkbox-group-container {
  margin-top: 1.5rem;

  margin-bottom: 1.5rem;

  border-bottom: 1px solid #f1f3f4;

  padding-bottom: 1rem;
}

body#inquiry .new-checkbox-group-label {
  font-weight: 600;

  margin-bottom: 0.5rem;

  color: #495057;
  min-width: 200px; /* form-labelに合わせる */
  margin-right: 1rem; /* form-labelに合わせる */
  padding-top: 0.5rem; /* form-labelに合わせる */
}

body#inquiry .new-checkbox-items-wrapper {
  display: flex;
  flex-wrap: wrap; /* アイテムが横に並び、必要に応じて折り返す */
  gap: 1rem; /* アイテム間のスペース */
  align-items: center; /* アイテムを中央揃えにする */
  justify-content: flex-start; /* flex-endから変更 */
  width: 40%; /* autoから40%に変更 */
}

body#inquiry .new-checkbox-row {
  display: flex;
  flex-wrap: wrap; /* 必要に応じて折り返す */
  gap: 1rem; /* アイテム間のスペース */
}

body#inquiry .new-checkbox-item {
  display: flex;

  align-items: center;

  margin: 0;

  background-color: transparent !important;

  padding: 0;

  flex-shrink: 0;
}

body#inquiry .new-checkbox-input {
  margin-right: 0.5rem; /* チェックボックスとテキストの間隔 */
  margin-top: 0;
  position: relative !important;
  margin-left: 0 !important; /* Bootstrapの-1.25remを上書き */
  flex-shrink: 0;
  background-color: #fff !important;
  border: 1px solid #ced4da !important;
  width: auto !important; /* チェックボックスの幅を自動調整 */
  max-width: fit-content !important; /* 内容に応じた最大幅 */
}

/* 新しいチェックボックスグループのラベルのパディングをリセット */
body#inquiry .new-checkbox-group .new-checkbox-label {
  padding-left: 0 !important;
}

body#inquiry .input-group-text.is-invalid {
  border-color: #dc3545;
}

body#inquiry .new-checkbox-input:checked {
  background-color: #20c997 !important;

  border-color: #20c997 !important;
}

body#inquiry .new-checkbox-label {
  font-weight: normal;

  cursor: pointer;

  margin-bottom: 0;

  padding-left: 0 !important;

  line-height: 1.2;

  white-space: nowrap !important;

  background-color: transparent !important;

  color: #495057 !important;
}

/* レスポンシブ対応 */

@media (max-width: 768px) {
  body#inquiry .new-checkbox-group-container {
    display: flex;
    align-items: flex-start; /* ラベルとアイテムの開始位置を合わせる */
    gap: 1rem; /* ラベルとアイテム間のスペース */
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  body#inquiry .new-checkbox-group-label {
    flex-shrink: 0; /* ラベルが縮小されないようにする */
    min-width: auto;

    margin-right: 0;

    margin-bottom: 0.5rem;

    padding-top: 0;
  }

  body#inquiry .new-checkbox-items-wrapper {
    flex-direction: column; /* 縦方向にアイテムを並べる */
    gap: 0.5rem; /* 行間のスペース */
  }

  body#inquiry .new-checkbox-row {
    flex-direction: column;

    gap: 0.5rem;

    align-items: flex-start;
  }

  body#inquiry .new-checkbox-item {
    width: 100%;
  }
}

/* 確認画面のボタン */
.confirm-button {
  transition: all 0.3s ease;
  border-width: 2px; /* ボーダーを少し太く */
  min-width: 150px !important; /* 最小幅を設定してサイズを統一 */
  max-width: 200px !important; /* 最大幅を設定して横に広がりすぎないように調整 */
  font-weight: bold;
}

#backButton.btn-primary {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

#backButton.btn-primary:hover {
  background-color: #343a40 !important; /* 少し薄い黒に */
  border-color: #343a40 !important;
  transform: translateY(-2px); /* 少し上に移動 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

#confirmSubmitButton.btn-secondary {
  background-color: transparent !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

#confirmSubmitButton.btn-secondary:hover {
  background-color: #000000 !important; /* 背景を黒に */
  color: #ffffff !important; /* 文字を白に */
  transform: translateY(-2px); /* 少し上に移動 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

/* 確認画面のスタイル調整 */
#confirmScreen .card {
  border-top: 5px solid #28a745 !important; /* アクセントカラーのボーダーを上に追加 (緑っぽい色) */
}

#confirmScreen .card .col-md-4 {
  font-weight: bold !important; /* 項目名を太字に */
  color: #333333 !important; /* テキストの色をダークカラーに */
}

/* CTAセクションボタンのテキストカラー調整 */
.cta-button,
.cta-button:hover,
.cta-button:focus,
.cta-button:active {
  color: #343a40 !important; /* CTAボタン全体のテキストカラーをダークグレーに */
}

.cta-button i,
.cta-button:hover i,
.cta-button:focus i,
.cta-button:active i {
  color: #343a40 !important; /* CTAボタンのアイコンカラーもダークグレーに */
}