/* reservation.css */

:root {
  --primary-color: #6c9b7d;
  --primary-hover: #5b886c;
  --error-color: #dc3545;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --text-color: #333;
  --border-color: #ccc;
  --bg-color: #f9f9f9;
  --white: #ffffff;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
}

.form-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: var(--white);
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header h1 {
  text-align: center;
  color: var(--primary-color);
  margin: 0;
  font-size: 1.8rem;
}

.header .title01 h1 a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
}

.header .title01 h1 a:hover {
  color: #0066cc;
  text-decoration: none;
}

.progress-bar {
  display: flex;
  justify-content: center;
  margin: 2rem auto;
  max-width: 600px;
  position: relative;
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--border-color);
  z-index: 1;
}

.step {
  position: relative;
  z-index: 2;
  background-color: var(--white);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2rem;
}

.step.active {
  background-color: var(--primary-color);
  color: var(--white);
}

.step-number {
  font-weight: bold;
}

.progress-bar .step-title {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  width: max-content;
  color: var(--text-color);
}

.form-section {
  flex: 1;
  padding: 2rem;
}

.form-section .container {
  max-width: 960px;
  margin: 0 auto;
  background-color: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  width: 100%;
}

.section-title {
  font-size: 1.8rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
  text-align: center;
  font-weight: bold;
}

.form-description {
  text-align: center;
  margin-bottom: 2rem;
  color: #666;
}

.required-mark {
  color: var(--error-color);
  margin-left: 0.2rem;
}

.form-step {
  margin-bottom: 2rem;
}

.form-row {
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.form-group {
  flex: 1;
  min-width: 250px;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* 名前フィールド用の追加スタイル */
.form-row .form-group + .form-group {
  margin-left: 2rem;
}

.form-row label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-color);
}

.form-row label .note {
  font-size: 0.85em;
  font-weight: normal;
  color: #666;
  margin-left: 0.5rem;
}

/* フォーム入力欄の共通スタイル */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.5px;
  color: #333333;
  background-color: #ffffff;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-sizing: border-box;
}

/* プレースホルダーのスタイル */
.form-row input::placeholder,
.form-row textarea::placeholder {
    color: #999999;
    font-weight: normal;
    opacity: 0.7;
}

/* フォーカス時のスタイル */
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(108, 155, 125, 0.1);
    background-color: #fafafa;
}

/* テキストエリアの特別なスタイル */
.form-row textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.8;
}

/* 入力欄の高さを統一 */
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="number"],
.form-row select,
.birth-inputs input,
.birth-inputs select {
    height: 60px;  /* 月選択ボックスの高さに合わせて調整 */
}

.birth-date {
  margin-bottom: 20px;
}

.birth-inputs {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
  align-items: center;  /* 入力欄を縦方向に中央揃え */
}

.error-message {
  color: #ff0000;
  font-size: 14px;
  margin-top: 5px;
}

.birth-date .error-message {
  display: block;
  margin-top: 5px;
  clear: both;
}

input.error,
select.error {
  border-color: #ff0000;
}

.form-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.form-navigation button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s;
}

.prev-step {
  background-color: #f0f0f0;
  color: var(--text-color);
}

.next-step,
.submit-form {
  background-color: var(--primary-color);
  color: var(--white);
}

/* 非活性状態のボタンのスタイル */
.next-step:disabled {
  background-color: var(--primary-color);
  color: var(--white);
  opacity: 0.5;
  cursor: not-allowed;
}

.next-step:not(:disabled):hover,
.submit-form:hover {
  background-color: var(--primary-hover);
}

#confirmation-content {
  margin: 2rem 0;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.footer {
  background-color: var(--white);
  padding: 2rem;
  text-align: center;
  margin-top: auto;
}

.footer__logo img {
  max-width: 200px;
  height: auto;
}

.footer__logo a {
  display: inline-block;
  transition: opacity 0.3s;
}

.footer__logo a:hover {
  opacity: 0.8;
}

.footer__box {
  margin-top: 1rem;
}

@media screen and (max-width: 768px) {
  .form-section {
    padding: 1rem;
  }

  .form-section .container {
    padding: 1rem;
    margin: 0 1rem;
    width: calc(100% - 2rem);
  }

  .form-row {
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0 0 1rem 0;
  }

  .form-group {
    margin-bottom: 10px;
    width: 100%;
  }

  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="tel"],
  .form-group textarea {
    width: 100%;
  }

  .birth-inputs {
    flex-direction: column;
  }

  .step {
    margin: 0 1rem;
  }

  .step-title {
    font-size: 0.8rem;
  }

  .container {
    padding: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* スマートフォンでのコース選択のレイアウト調整 */
  .course-selection {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .course-selection .radio-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .course-selection .radio-group label {
    margin-bottom: 0;
  }

  /* 名前とふりがなの入力欄を横並びに */
  .name-row,
  .kana-row,
  .guardian-row {
    display: flex !important;  /* 他のスタイルを上書き */
    flex-direction: row !important;  /* 横並びを強制 */
    flex-wrap: nowrap !important;  /* 折り返しを禁止 */
    gap: 10px;
    width: 100%;
  }

  .name-row .form-group,
  .kana-row .form-group,
  .guardian-row .form-group {
    flex: 0 0 calc(45% - 5px) !important;  /* 幅を固定 */
    max-width: calc(45% - 5px) !important;
    min-width: calc(45% - 5px) !important;
    margin-bottom: 10px;
  }

  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="tel"],
  .form-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .sp-only {
    display: inline;  /* スマートフォン表示時は表示 */
  }

  .container {
    padding: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .form-group {
    margin-bottom: 20px;
  }

  /* conditional-fieldのラベルサイズ調整 */
  .conditional-field label {
    font-size: 0.9em;
  }
}

.form-example {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
}

.form-note {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
}

.radio-group {
  display: flex;
  gap: 2rem;
  margin: 0.5rem 0;
}

.radio-group label {
  display: block;
  margin-bottom: 5px;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  margin-right: 8px;
  width: auto;
}

.radio-group input[type="checkbox"] {
  margin-right: 8px;
  width: auto;
}

.conditional-field {
  margin-top: 1rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--border-color);
}

.conditional-field label {
  font-size: 0.95em;
}

/* バリデーション関連のスタイル */
.form-group.error input,
.form-group.error textarea,
.form-group.error select {
  border-color: #ff4444;
}

.error-message {
  color: #ff4444;
  font-size: 0.85em;
  margin-top: 5px;
  min-height: 17px;
}

/* 必須マークのスタイル */
.required-mark {
  color: #ff4444;
  margin-left: 3px;
}

/* 条件付きフィールドのスタイル */
.conditional-field {
  margin-top: 10px;
  padding-left: 20px;
  display: none;
}

/* フォームグループのスタイル */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #4CAF50;
}

/* チェックボックスとラジオボタンのスタイル */
.checkbox-group,
.radio-group {
  margin-top: 5px;
}

/* チェックボックスのラベル設定 */
.checkbox-group label {
    display: inline-block;
    margin-bottom: 5px;
    cursor: pointer;
    width: fit-content;  /* コンテンツの幅に合わせる */
}

/* ラジオボタンのラベル設定 */
.radio-group label {
    display: block;
    margin-bottom: 5px;
    cursor: pointer;
}

/* チェックボックスの設定 */
.checkbox-group input[type="checkbox"] {
    margin-right: 8px;
    width: auto;
}

/* ラジオボタンの設定 */
.radio-group input[type="radio"] {
    margin-right: 8px;
    width: auto;
}

.radio-group input[type="checkbox"] {
    margin-right: 8px;
    width: auto;
}

/* 受診希望理由と受診時間のチェックボックス領域 */
.reason-checkboxes label,
.time-checkboxes label {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    width: auto;  /* 幅を自動に設定 */
    cursor: pointer;
}

/* チェックボックスの位置調整 */
.reason-checkboxes input[type="checkbox"],
.time-checkboxes input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

/* チェックボックスのテキスト位置調整 */
.reason-checkboxes label span,
.time-checkboxes label span {
    vertical-align: middle;
}

/* 例示テキストのスタイル */
.form-example {
  color: #666;
  font-size: 0.85em;
  margin-top: 3px;
}

/* フォームの注釈テキスト */
.form-note {
  color: #666;
  font-size: 0.85em;
  margin-top: 3px;
  font-style: italic;
}

/* ボタンのスタイル */
.form-navigation {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.next-step,
.prev-step,
.submit-form {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.next-step,
.submit-form {
  background-color: #4CAF50;
  color: white;
}

.prev-step {
  background-color: #666;
  color: white;
}

.next-step:hover,
.submit-form:hover {
  background-color: #45a049;
}

.prev-step:hover {
  background-color: #555;
}

/* 生年月日入力欄のスタイル */
.birth-inputs {
  display: flex;
  gap: 10px;
}

.birth-inputs input,
.birth-inputs select {
  flex: 1;
}

/* 2列レイアウトのスタイル */
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.form-row .form-group {
  flex: 1;
  min-width: 250px;
  padding: 0 10px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .form-row .form-group {
    flex: 100%;
  }

  .birth-inputs {
    flex-direction: column;
  }
}

/* 同意事項のスタイル */
.consent-group {
  margin: 20px 0;
}

.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.consent-label:hover {
  background-color: #f0f0f0;
}

.consent-label input[type="checkbox"] {
  margin-top: 3px;
}

.consent-text {
  flex: 1;
  line-height: 1.5;
}

/* エラー状態 */
.consent-label.error {
  border-color: #ff4444;
  background-color: #fff8f8;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 5px;
}

.checkbox-group + .error-message {
  margin-top: 5px;
  margin-bottom: 15px;
}

/* 電話番号の表示制御 */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: inline;
}

/* スマートフォン向けスタイル */
@media screen and (max-width: 768px) {
    .mobile-only {
        display: inline !important;
    }
    .desktop-only {
        display: none !important;
    }
}

.reason-list {
  list-style-type: none;
  padding-left: 20px;
}

/* flatpickrカスタマイズ */
.flatpickr-calendar .flatpickr-disabled,
.flatpickr-calendar .flatpickr-disabled:hover {
    color: #888888 !important;  /* より濃いグレー */
    cursor: not-allowed !important;
}

/* flatpickrのヘッダー部分のスタイル */
.flatpickr-calendar .flatpickr-months {
    background-color: #666666 !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-month {
    background-color: #666666 !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    fill: #ffffff !important;
    color: #ffffff !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
    fill: #f0f0f0 !important;
    color: #f0f0f0 !important;
}
.flatpickr-calendar .flatpickr-current-month {
    color: #ffffff !important;
}

/* flatpickrの月選択メニューのスタイル */
.flatpickr-calendar .flatpickr-monthDropdown-months {
    background-color: #666666 !important;
    color: #ffffff !important;
    font-weight: normal !important;
}
.flatpickr-calendar .flatpickr-monthDropdown-months:hover {
    background-color: #777777 !important;
}
.flatpickr-calendar .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: #666666 !important;
}
.flatpickr-calendar .flatpickr-monthDropdown-months option {
    background-color: #666666 !important;
    color: #ffffff !important;
}
.flatpickr-calendar .flatpickr-monthDropdown-months option:hover,
.flatpickr-calendar .flatpickr-monthDropdown-months option:focus,
.flatpickr-calendar .flatpickr-monthDropdown-months option:checked,
.flatpickr-calendar .flatpickr-monthDropdown-months option:active {
    background-color: #777777 !important;
    color: #ffffff !important;
}
.flatpickr-calendar .flatpickr-monthDropdown-months option.selected {
    background-color: #666666 !important;
}
.flatpickr-calendar .flatpickr-monthDropdown-months option:hover {
    background-color: #777777 !important;
}
.flatpickr-calendar select:focus {
    outline: none;
}

/* flatpickrの曜日部分のスタイル */
.flatpickr-calendar .flatpickr-weekdays {
    background-color: #666666 !important;
}
.flatpickr-calendar .flatpickr-weekday {
    background-color: #666666 !important;
    color: #ffffff !important;
}

/* flatpickrの選択可能な日付のホバー時のスタイル */
.flatpickr-calendar .flatpickr-day:not(.flatpickr-disabled):hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    opacity: 0.8;
}

/* flatpickrの今日の日付のスタイル */
.flatpickr-calendar .flatpickr-day.today {
    border-color: var(--primary-color);
}

/* flatpickrの選択された日付のスタイル */
.flatpickr-calendar .flatpickr-day.selected {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* 月選択時のドロップダウンメニュー */
.flatpickr-calendar .flatpickr-months .flatpickr-month .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: #666666 !important;
}
.flatpickr-calendar .numInputWrapper:hover {
    background-color: transparent !important;
}
.flatpickr-calendar .cur-month,
.flatpickr-calendar .cur-year {
    color: #ffffff !important;
}
.flatpickr-calendar .numInputWrapper input {
    background-color: #666666 !important;
    color: #ffffff !important;
}
.flatpickr-calendar .numInputWrapper input:hover,
.flatpickr-calendar .numInputWrapper input:focus {
    background-color: #777777 !important;
}

/* 生年月日入力欄の特別なスタイル */
.birth-inputs {
    display: flex;
    flex-direction: row;  /* 横方向に並べる */
    gap: 10px;
    align-items: center;
    width: 100%;
}

.birth-inputs input,
.birth-inputs select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333333;
    background-color: #ffffff;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.birth-inputs input:focus,
.birth-inputs select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(108, 155, 125, 0.1);
    background-color: #fafafa;
}

/* 年入力欄の幅を調整 */
.birth-inputs input[name="birth_year"] {
    width: 30%;  /* 年の入力欄の幅を30%に */
}

/* 月・日選択の幅と高さを調整 */
.birth-inputs select {
    width: 25%;  /* 月日の選択欄の幅を25%に */
    height: 60px;  /* マージンを考慮して60pxに設定 */
    padding-right: 25px;  /* 矢印アイコンのためのスペース */
    -webkit-appearance: none;  /* ネイティブの矢印を非表示 */
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

/* 生年月日の単位（年月日）のスタイル */
.birth-inputs span {
    white-space: nowrap;
    margin: 0 2px;
}

/* IE用の矢印非表示 */
.birth-inputs select::-ms-expand {
    display: none;
}

/* Firefox用のパディング調整 */
@-moz-document url-prefix() {
    .birth-inputs select {
        padding-right: 25px;
    }
}

.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"],
.radio-group input[type="checkbox"] {
    margin-right: 8px;
    width: auto;
}

/* スマートフォン向けのレスポンシブ対応 */
@media screen and (max-width: 768px) {
    .container {
        padding: 15px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 生年月日入力欄のレイアウト調整 */
    .birth-inputs {
        display: flex;
        flex-direction: row;  /* 横方向に並べる */
        gap: 10px;
        align-items: center;
        width: 100%;
    }

    .birth-inputs input[name="birth_year"] {
        width: 30%;  /* 年の入力欄の幅を30%に */
    }

    .birth-inputs select {
        width: 25%;  /* 月日の選択欄の幅を25%に */
        height: 60px;
      }

    /* 生年月日の単位（年月日）のスタイル */
    .birth-inputs span {
        white-space: nowrap;
        margin: 0 2px;
    }

    /* 住所入力欄の調整 */
    textarea[name="address"] {
        width: 100%;
        max-width: 100%;
    }

    /* チェックボックスグループの調整 */
    .checkbox-group {
        width: 100%;
    }

    /* ラジオボタングループの調整 */
    .radio-group {
        width: 100%;
    }

    /* ボタンの調整 */
    .button-group {
        width: 100%;
    }

    button {
        width: 100%;
        max-width: 100%;
        margin: 10px 0;
    }

    /* スマートフォンでのコース選択のレイアウト調整 */
    .course-selection {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .course-selection .radio-group {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .course-selection .radio-group label {
        margin-bottom: 0;
    }
}

/* スマートフォンでのコース選択のレイアウト調整 */
.course-selection {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.course-selection .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 5px;
}

.course-selection .radio-option {
    flex: 0 0 calc(33.333% - 10px);
    margin: 0;
    padding: 5px 0;
}

.course-selection .radio-option input[type="radio"] {
    margin: 3px 8px 0 0;
    width: 16px;
    height: 16px;
    vertical-align: top;
}

.course-selection .radio-option input[type="checkbox"] {
    margin: 3px 8px 0 0;
    width: 16px;
    height: 16px;
    vertical-align: top;
}

.course-selection .radio-option label {
    display: inline;
    cursor: pointer;
}

.course-selection .error-message {
    margin-top: 5px;
    color: #ff0000;
    font-size: 0.9em;
}

/* スマホ表示時のスタイル */
@media screen and (max-width: 768px) {
    .course-selection .radio-group {
        flex-direction: column;
    }

    .course-selection .radio-option {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* スマートフォンでのみ表示する改行 */
.sp-only {
    display: none;  /* 通常時は非表示 */
}

@media screen and (max-width: 768px) {
    .sp-only {
        display: inline;  /* スマートフォン表示時は表示 */
    }

    .container {
        padding: 15px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-group {
        margin-bottom: 20px;
    }

    /* conditional-fieldのラベルサイズ調整 */
    .conditional-field label {
        font-size: 0.9em;
    }

    /* 名前、ふりがな、保護者名の入力欄を横並びに */
    .name-row,
    .kana-row,
    .guardian-row {
        display: flex !important;  /* 他のスタイルを上書き */
        flex-direction: row !important;  /* 横並びを強制 */
        flex-wrap: nowrap !important;  /* 折り返しを禁止 */
        gap: 10px;
        width: 100%;
    }

    .name-row .form-group,
    .kana-row .form-group,
    .guardian-row .form-group {
        flex: 0 0 calc(45% - 5px) !important;  /* 幅を固定 */
        max-width: calc(45% - 5px) !important;
        min-width: calc(45% - 5px) !important;
        margin-bottom: 10px;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.checkbox-group label a {
    color: #0066cc;
    text-decoration: none;
    transition: opacity 0.3s;
}

.checkbox-group label a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* 日付フィールドのスタイル調整 */
.form-group input[type="text"][readonly] {
  margin-bottom: 0.5rem;
}

/* 非活性状態のチェックボックス用のスタイル */
.checkbox-group input[type="checkbox"]:disabled + label,
.checkbox-group label:has(input[type="checkbox"]:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  color: #999;
}

.checkbox-group input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

/* 非活性状態のラベル */
.checkbox-group label:has(input[type="checkbox"]:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  color: #999;
}

/* 日付フィールドのスタイル調整 */
.form-group input[type="text"][readonly] {
  margin-bottom: 0.5rem;
}