/* ------------------------------------------
   Bootstrapの上書き
------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #000;
    background-color: #fafbfc;
    -webkit-font-smoothing: antialiased;
}

.c-note strong {
    display: contents;
}

.table td,
.table th {
    padding: 24px 32px 16px;
    display: block;
    width: 100%;
    border: none;
}

.table tbody {
    width: 100%;
}

.table tr {
    margin-bottom: 16px;
    display: block;
    width: 100%;
}

.form-control:focus,
.input-text-1of2:focus {
    color: #000;
}

dl, ol, ul {
    padding-inline-start: 0px;
}


/* ------------------------------------------
   コンテナ
------------------------------------------ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

.c-editor {
    margin-bottom: 80px;
}

/* ------------------------------------------
   セクション見出し
------------------------------------------ */
.section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0a1e54;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #0a1e54;
}

/* ------------------------------------------
   フォームテーブル
------------------------------------------ */
.form-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}


/* 質問列（左） */
.cell-form-question {
    font-size: 18px;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    color: #000;
    background-color: #fff;
    text-align: left;
}

.form-table .cell-form-question {
    border: 1px solid #e5e7eb;
    border-bottom: 1px solid #E5E7EB;
    border-radius: 8px 8px 0 0;
    box-shadow: rgba(30, 30, 50, 0.02) 0px 8px 16px 8px;
}


/* 入力列（右） */
.form-table .cell-form-input {
    vertical-align: top;
    padding: 24px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: rgba(30, 30, 50, 0.02) 0px 8px 16px 8px;
}

/* 日程調整フォーム */
/* 日程調整マトリクス（設問セル内の表） */
.sched-table {
  width: 100%;
  border-collapse: collapse;
}

.sched-table tr.sched-table__row{
    display: table-row;
    margin-bottom:0px;
}
.sched-table__row + .sched-table__row .sched-table__date,
.sched-table__row + .sched-table__row .sched-table__opts {
  border-top: 1px solid #e5e7eb;
}
th.sched-table__date {
  width: 30%;
  text-align: left;
  font-weight: 700;
  padding: 24px 24px 24px 0;
  vertical-align: middle;
  white-space: nowrap;
  display: table-cell;
}

td.sched-table__opts {
  padding: 24px 0;
  vertical-align: middle;
  display: table-cell;
}

.sched-table tr:first-child th.sched-table__date {
    padding: 0 24px 24px 0;
}

.sched-table tr:first-child td.sched-table__opts {
    padding: 0 0 24px 0;
}

/* ボタンの横並びは内側のラップで */
.sched-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.sched-table tbody tr:last-child th.sched-table__date {
    padding: 24px 24px 0 0;
    text-align: left;
}

.sched-table tbody tr:last-child td.sched-table__opts {
    padding: 24px 0 0 0;
    text-align: left;
}

@media (max-width: 767px) {
  /* スマホは日時の上に選択肢を縦積み */
  .sched-table, .sched-table tbody, .sched-table__row,
  .sched-table__date, .sched-table__opts {
    display: block;
    width: 100%;
  }
  .sched-table__date {
    padding: 16px 0 8px;
    white-space: normal;
  }
  .sched-table__opts {
    padding: 0 0 16px;
  }
}

/* 日程調整：選択肢を大きめボタンに（中身はラジオ） */

.sched-choice {
  margin: 0;
  cursor: pointer;
  line-height: 0; /* ラベル内の余白詰め */
}

.sched-choice__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.sched-choice__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;      /* 44px四方以上を確保（余裕をもって48px） */
  padding: 8px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #333;
  background-color: #fff;
  border: 2px solid #8e949e;
  border-radius: 6px;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.sched-choice:hover .sched-choice__btn {
  border-color: #006699;
}

/* 選択状態 */
.sched-choice__input:checked ~ .sched-choice__btn {
  border-color: #0a1e54;
  background-color: #0a1e54;
  color: #fff;
}

/* キーボードフォーカス（既存ラジオと同じ見せ方に寄せる） */
.sched-choice__input:focus-visible ~ .sched-choice__btn {
  outline: 6px solid #069;
  outline-offset: 2px;
  box-shadow: 0 0 0 10px #fff;
}

/* ------------------------------------------
   必須マーク
------------------------------------------ */
.form-control-label {
    display: block;
    margin-bottom: 0;
}

/* Bootstrap の .required アイコンを非表示にして
   テキストで「※必須」を表示するスタイルに変更 */
.fa.required {
    display: none;
}

/* 必須行に ※必須 を赤で表示 */
.cell-form-question small::before {
    content: "必須";
    font-family: "Noto Sans JP", sans-serif;
    display: inline-block;
    padding: 2px 12px;
    margin-left: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #069;
    background-color: #fff;
    border: 1px solid #069;
    border-radius: 999px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------
   テキスト入力・テキストエリア
------------------------------------------ */
.form-control {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    border: 2px solid #8e949e;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: #0a1e54;
    box-shadow: 0 0 0 3px rgba(10, 30, 84, 0.12);
}

.form-control::placeholder {
    color: #b0b8c5;
}

textarea .form-control {
    resize: vertical;
    min-height: 140px;
    height: auto;
    /* テキストエリアは高さ固定しない */
}

/* ------------------------------------------
   分割入力（氏名 2カラム）
------------------------------------------ */
.input-text-1of2 {
    display: inline-block;
    width: calc(50% - 10px);
    padding: 16px;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    border: 2px solid #8e949e;
    border-radius: 8px;
    height: 56px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: top;
    box-sizing: border-box;
}

.input-text-1of2 + .input-text-1of2 {
    margin-left: 16px;
}

.input-text-1of2:focus {
    outline: none;
    border-color: #0a1e54;
    box-shadow: 0 0 0 3px rgba(10, 30, 84, 0.12);
}

.input-text-1of2::placeholder {
    color: #b0b8c5;
}

/* ------------------------------------------
   ヒントテキスト
------------------------------------------ */
.cell-form-input .text-muted {
    font-size: 16px;
    color: #000000 !important;
    margin: 16px 0px;
    font-weight: 300;
}

.text-muted .fa {
    margin: 0px;
}

/* ------------------------------------------
   ヒントテキスト（設問セル内に移動したもの）
------------------------------------------ */
.cell-form-question .text-muted {
    display: block;
    margin: 8px 0 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: #000 !important;
}

/* ------------------------------------------
   カスタムコントロール
------------------------------------------ */
td .custom-control {
    margin-bottom: 16px;
}
.cell-form-input label:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------
   セレクトボックス
------------------------------------------ */
select.form-control {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 1L7 7L1 1' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    cursor: pointer;
}

select.form-control.short {
    max-width: 480px;
}

/* ------------------------------------------
   ラジオボタン
------------------------------------------ */
.custom-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
    margin-bottom: 6px;
    cursor: pointer;
}

.custom-radio .custom-control-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-radio .custom-control-indicator {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #8e949e;
    background-color: #fff;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
    position: relative;
}

.custom-radio .custom-control-input:checked ~ .custom-control-indicator {
    border-color: #006699;
    background-color: #fff;
}

.custom-radio .custom-control-input:checked ~ .custom-control-indicator::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #006699;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-radio .custom-control-description {
    font-size: 0.9375rem;
    color: #000;
}

/* 必須にしない場合の「指定なし」を非表示要素に */
table.form-table label:has(input[type="radio"][value=""]) {
  display: none;
}

/* ------------------------------------------
   チェックボックス
------------------------------------------ */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
    margin-bottom: 6px;
    cursor: pointer;
}

.custom-checkbox .custom-control-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-checkbox .custom-control-indicator {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid #8e949e;
    background-color: #fff;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    position: relative;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
    border-color: #006699;
    background-color: #006699;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator::after {
    content: "";
    display: block;
    width: 12px;
    height: 7px;
    border-left: 3.5px solid #fff;
    border-bottom: 3.5px solid #fff;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.custom-checkbox .custom-control-description {
    font-size: 0.9375rem;
    color: #000;
}

/* ------------------------------------------
   ラジオボタンとチェックボックスのアクセシビリティ対応
------------------------------------------ */
.custom-radio .custom-control-input,
.custom-checkbox .custom-control-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.custom-radio .custom-control-input:focus-visible ~ .custom-control-indicator,
.custom-checkbox .custom-control-input:focus-visible ~ .custom-control-indicator {
    position: relative;
    z-index: 1;
    outline: 6px solid #069;
    outline-offset: 2px;
    box-shadow: 0 0 0 10px #fff;
    animation: focus-expand 0.2s ease-out forwards;
    text-decoration: none;
}


/* ------------------------------------------
   ボタンエリア
------------------------------------------ */
.form-table tfoot td,
.form-table tbody tr:last-child td {
    padding: 60px 0;
    text-align: center;
}

/* 確認ボタン（ネイビー塗り） */
#form-post-button,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    width: 70%;
    font-size: 1rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    line-height: 1.6;
    border-radius: 8px;
    border: 2px solid #0a1e54;
    background-color: #0a1e54;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin: 0 8px;
}

#form-post-button:hover,
.btn-secondary:hover {
    background-color: #fff;
    color: #0a1e54;
}

/* クリアボタン（白抜き）※サンプルにはない */
.btn-outline,
button[type="reset"],
.btn-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    font-size: 1rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    line-height: 1.6;
    border-radius: 8px;
    border: 2px solid #0a1e54;
    background-color: #fff;
    color: #0a1e54;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin: 0 8px;
}

.btn-outline:hover,
button[type="reset"]:hover,
.btn-clear:hover {
    background-color: #0a1e54;
    color: #fff;
}

/* ------------------------------------------
   バリデーションエラー
------------------------------------------ */
.form-control.form-control-danger,
.input-text-1of2.form-control-danger {
    background-color: #fff8f8;
    /* 薄い赤色 */
    border-color: #A61B1B;
    /* 赤いボーダー */
    border-width: 3px;
}

.form-control.form-control-danger:focus,
.input-text-1of2.form-control-danger:focus {
    border-color: #A61B1B;
    box-shadow: none;
}

.container-fluid p.text-center::before,
.form-control-feedback::before,
.form-submit-reason:before,
.textarea-counter--warning:before{
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 4px;
    vertical-align: -0.125em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23d62828' d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1em 1em;
}

.container-fluid,
.form-submit-reason{
    font-weight: 500;
    color: #d62828;
    padding: 40px 32px;
}

/* ------------------------------------------
   文字数カウンター
------------------------------------------ */
.textarea-counter {
    font-size: 16px;
    color: #374151;
    margin-top: 16px;
}

.textarea-counter--warning,
.form-control-feedback {
    color: #d62828;
    font-weight: 500;
    margin-top: 16px;
}


.table {
    background-color: transparent;
}

.table-hover tbody tr:hover {
    background-color: transparent;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------
   文字数カウンターでエラーの場合の処理（「確認する」ボタンを非活性で押せなくする）
------------------------------------------ */
#form-post-button:disabled {
    border-color: #d7d7d7;
    background-color: transparent;
    color: #000;
    cursor: not-allowed;
}


/* ===== ul内のstrong（太字＋赤） ===== */
strong {
  color: #d62828;
  font-weight: 700;
}


/* ------------------------------------------
   既存ルールの打ち消し
------------------------------------------ */
.container-fluid {
    padding: 0;
    color: #000;
    font-weight: 400;
}

.container-fluid p.text-center::before {
    content: none;
}

.c-note {
  margin-bottom: 80px;
}


/* ------------------------------------------
   ステップ表示（c-step）
------------------------------------------ */
.c-step {
    margin-bottom: 40px;
}

.c-step__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-step__item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

/* ステップ間をつなぐ線。円の中心（48px の半分＝24px）に合わせる */
.c-step__item + .c-step__item::before {
    content: "";
    position: absolute;
    top: 24px;
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: #d7d7d7;
}

/* 通過済み・現在地に入る線は塗る */
.c-step__item + .c-step__item--done::before,
.c-step__item + .c-step__item--current::before {
    background-color: #0a1e54;
}

.c-step__num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 3px solid #d7d7d7;
    border-radius: 50%;
    background-color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #374151;
}

.c-step__label {
    font-size: 16px;
    line-height: 1.5;
    color: #374151;
}

/* 通過済み：枠線と文字をネイビーに */
.c-step__item--done .c-step__num {
    border-color: #0a1e54;
    color: #0a1e54;
}

.c-step__item--done .c-step__label {
    color: #0a1e54;
}

/* 現在地：塗りつぶし＋太字。色だけに頼らず形と太さでも差をつける */
.c-step__item--current .c-step__num {
    border-color: #0a1e54;
    background-color: #0a1e54;
    color: #fff;
}

.c-step__item--current .c-step__label {
    font-weight: 700;
    color: #0a1e54;
}

/* ------------------------------------------
   案内文（確認画面）
------------------------------------------ */
.c-form-guide {
    margin: 0 0 40px;
    font-size: 16px;
    line-height: 1.7;
    color: #000;
    text-align: center;
}

/* ------------------------------------------
   エラーサマリー
------------------------------------------ */
.form-error-summary {
    margin-bottom: 40px;
    padding: 24px 32px;
    background-color: #fff8f8;
    border: 3px solid #A61B1B;
    border-radius: 8px;
}

.form-error-summary h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: #A61B1B;
}

.form-error-summary h2::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23A61B1B' d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1em 1em;
}

.form-error-summary ul {
    margin: 0;
    padding-inline-start: 1.25em;
    list-style: disc;
}

.form-error-summary li {
    font-size: 16px;
    color: #000;
}

.form-error-summary li + li {
    margin-top: 8px;
}

/* JS / autofocus によるプログラム的フォーカスでは枠を出さない。
   キーボード操作で到達したときだけ既存と同じリングを出す */
.form-error-summary:focus {
    outline: none;
}

.form-error-summary:focus-visible {
    outline: 6px solid #069;
    outline-offset: 2px;
}

/* ------------------------------------------
   完了メッセージ・受付終了メッセージ
------------------------------------------ */

#form-notice {
    margin: 0 0 40px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    color: #0a1e54;
}

#form-complete:focus,
#form-notice:focus {
    outline: none;
}

#form-complete:focus-visible,
#form-notice:focus-visible {
    outline: 6px solid #069;
    outline-offset: 2px;
}

/* 受付終了は完了と区別する */
#form-notice {
    color: #A61B1B;
}

.c-form-complete__actions {
    margin-top: 64px
}


/* ------------------------------------------
   レスポンシブ（768px以下）
------------------------------------------ */
@media (max-width: 767px) {

    .table td,
    .table th,
    .form-table .cell-form-input {
        padding: 16px 24px 16px;
    }

    .container {
        padding: 24px 16px;
    }

    /* テーブルをブロック表示に切り替え */
    .form-table,
    .form-table tbody,
    .form-table tr,
    .form-table td {
        display: block;
        width: 100%;
    }

    /* 行の区切り線をtrではなくtd単位で指定し直す */
    .form-table tbody tr {
        border-bottom: none;
    }

    /* 質問ラベルエリア */
    .cell-form-question {
        width: 100%;
        padding: 16px 8px;
        border-top: 1px solid #8e949e;
    }

    /* 入力エリア */
    .cell-form-input {
        padding: 16px;
        border-bottom: 1px solid #8e949e;
    }

    /* 注意書きボックス: 20px 24px → 16px 16px / margin-bottom: 40px → 24px */
    .form-notice {
        padding: 16px;
        margin-bottom: 24px;
    }

    /* 分割入力（氏名）をスマホで縦積みに */
    .input-text-1of2 {
        display: block;
        width: 100%;
    }

    .input-text-1of2 + .input-text-1of2 {
        margin-left: 0;
        margin-top: 16px;
    }

    /* ラジオ・チェックボックスの右余白 */
    .custom-radio,
    .custom-checkbox {
        margin-right: 16px;
    }

    /* ボタンエリア */
    .form-table tfoot td,
    .form-table tbody tr:last-child td {
        padding: 40px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    #form-post-button,
    .btn-secondary,
    .btn-outline,
    button[type="reset"],
    .btn-clear {
        width: 100%;
        margin: 0;
    }
}

/* ヒントを使って設問を出す */
td.cell-form-input div.text-muted {
  visibility: hidden;
}

@media (max-width: 767px) {

    .c-note {
        padding: 16px;
        margin-bottom: 24px;
    }

    .c-note__title {
        font-size: 16px;
    }

    .c-step {
        margin-bottom: 24px;
    }

    .c-step__num {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .c-step__item + .c-step__item::before {
        top: 20px;
    }

    .c-step__label {
        font-size: 14px;
    }

    .form-error-summary {
        padding: 16px;
        margin-bottom: 24px;
    }

    .form-error-summary h2 {
        font-size: 16px;
    }
}