/* =========================================================

   Belle Terre Contact Form

   THE THOR用

   基本設定はChildlife Contact Formを流用

   ========================================================= */


/* =========================================================

   基本設定

   ========================================================= */

.btcf-contact {

  --btcf-primary: #333333;
  --btcf-primary-hover: #555555;
  --btcf-border: #d8d8d8;
  --btcf-bg: #f7f7f7;
  --btcf-error: #c62828;
  --btcf-required: #d9534f;
  --btcf-radius: 4px;

  width: 100%;
  max-width: 1000px;

  margin: 0 auto;

  box-sizing: border-box;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  color: #231815;
  line-height: 1.8;

}


/* =========================================================

   box-sizing統一

   ========================================================= */

.btcf-contact *,
.btcf-contact *::before,
.btcf-contact *::after {

  box-sizing: border-box;

}


/* =========================================================

   フォーム部品のフォント統一

   ========================================================= */

.btcf-contact input,
.btcf-contact textarea,
.btcf-contact button,
.btcf-contact select,
.btcf-contact label,
.btcf-contact legend,
.btcf-contact dt,
.btcf-contact dd {

  font-family: inherit;
  font-size: inherit;
  color: inherit;

}


/* =========================================================

   フォーム本体

   ========================================================= */

.btcf-contact__form {

  width: 100%;

}


/* =========================================================

   フォーム1行

   全項目を同じ基準線に統一

   ========================================================= */

.btcf-contact__row {

  display: grid;

  grid-template-columns:
    300px
    minmax(0, 1fr);

  gap: 30px;

  align-items: start;

  padding: 25px 0;

  border-bottom: 1px solid var(--btcf-border);

}


/* =========================================================

   項目名

   ========================================================= */

.btcf-contact__label {

  margin: 0;

  font-family: inherit;
  font-size: inherit;
  color: inherit;

  font-weight: 600;

  line-height: 1.6;

}


/* =========================================================

   利用予定者名

   長い項目名を1行表示

   ========================================================= */

.btcf-contact__label[
  for="btcf-target-name"
] {

  white-space: nowrap;

}


/* =========================================================

   必須ラベル

   ========================================================= */

.btcf-required {

  display: inline-block;

  margin-left: 6px;

  padding: 2px 7px;

  border-radius: 3px;

  background: var(--btcf-required);

  color: #ffffff;

  font-family: inherit;

  font-size: 11px;

  font-weight: normal;

  line-height: 1.5;

  vertical-align: middle;

}


/* =========================================================

   任意ラベル

   ========================================================= */

.btcf-optional {

  display: inline-block;

  margin-left: 6px;

  padding: 2px 7px;

  border-radius: 3px;

  background: #eeeeee;

  color: #666666;

  font-family: inherit;

  font-size: 11px;

  font-weight: normal;

  line-height: 1.5;

  vertical-align: middle;

}


/* =========================================================

   入力エリア

   ========================================================= */

.btcf-contact__field {

  min-width: 0;

}


/* =========================================================

   補足文がある場合

   入力欄・選択肢を先に表示し、
   補足文をその下へ移動

   ========================================================= */

.btcf-contact__field:has(
  > .btcf-contact__help
) {

  display: flex;

  flex-direction: column;

}


/* 入力欄 */

.btcf-contact__field
> input[type="text"],

.btcf-contact__field
> input[type="email"],

.btcf-contact__field
> input[type="tel"],

.btcf-contact__field
> select,

.btcf-contact__field
> textarea,

.btcf-contact__field
> .btcf-contact__choices,

.btcf-contact__field
> .btcf-contact__office-groups {

  order: 1;

}


/* 補足文 */

.btcf-contact__field
> .btcf-contact__help {

  order: 2;

}


/* エラー */

.btcf-contact__field
> .btcf-contact__error {

  order: 3;

}


/* =========================================================

   補足文

   ========================================================= */

.content
.btcf-contact
p.btcf-contact__help {

  margin: 8px 0 0;

  font-family: inherit;

  font-size: 13px;

  font-weight: 400;

  color: #666666;

  line-height: 1.7;

}


/* =========================================================

   テキスト入力

   ========================================================= */

.btcf-contact input[type="text"],
.btcf-contact input[type="email"],
.btcf-contact input[type="tel"],
.btcf-contact textarea,
.btcf-contact select {

  display: block;

  width: 100%;
  max-width: 100%;

  margin: 0;

  padding: 12px 14px;

  border: 1px solid #bbbbbb;

  border-radius: var(--btcf-radius);

  background: #ffffff;

  font-family: inherit;

  font-size: inherit;

  font-weight: 400;

  color: #231815;

  line-height: 1.6;

  box-shadow: none;

}


/* =========================================================

   input / textarea appearance

   ========================================================= */

.btcf-contact input[type="text"],
.btcf-contact input[type="email"],
.btcf-contact input[type="tel"],
.btcf-contact textarea {

  -webkit-appearance: none;

  appearance: none;

}


/* =========================================================

   placeholder

   ========================================================= */

.btcf-contact input::placeholder,
.btcf-contact textarea::placeholder {

  color: #999999;

  opacity: 1;

}


/* =========================================================

   select

   ========================================================= */

.btcf-contact select {

  min-height: 48px;

  cursor: pointer;

}


/* =========================================================

   textarea

   ========================================================= */

.btcf-contact textarea {

  min-height: 200px;

  resize: vertical;

}


/* =========================================================

   フォーカス

   ========================================================= */

.btcf-contact input[type="text"]:focus,
.btcf-contact input[type="email"]:focus,
.btcf-contact input[type="tel"]:focus,
.btcf-contact textarea:focus,
.btcf-contact select:focus {

  border-color: #555555;

  outline: 2px solid rgba(0, 0, 0, 0.12);

  outline-offset: 1px;

  box-shadow: none;

}


/* =========================================================

   入力エラー

   ========================================================= */

.btcf-contact input[aria-invalid="true"],
.btcf-contact textarea[aria-invalid="true"],
.btcf-contact select[aria-invalid="true"] {

  border-color: var(--btcf-error);

}


/* =========================================================

   fieldset

   fieldset自体にはレイアウトを持たせない

   ========================================================= */

.btcf-contact__fieldset {

  min-width: 0;

  margin: 0;

  padding: 0;

  border: 0;

}


/* =========================================================

   選択式項目

   PHP v0.9.1のrow構造を使用

   ========================================================= */

.btcf-contact__fieldset
.btcf-contact__row--choice {

  width: 100%;

  align-items: start;

}


/* =========================================================

   ラジオ・チェックボックス共通

   ========================================================= */

.btcf-contact__choices {

  display: flex;

  flex-direction: column;

  gap: 12px;

  min-width: 0;

}


/* =========================================================

   選択肢

   ========================================================= */

.btcf-contact__choice {

  display: flex;

  align-items: center;

  gap: 8px;

  margin: 0;

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  line-height: 1.6;

  cursor: pointer;

}


/* =========================================================

   ラジオ・チェック本体

   ========================================================= */

.btcf-contact__choice
input[type="radio"],

.btcf-contact__choice
input[type="checkbox"] {

  flex: 0 0 auto;

  width: 18px;

  height: 18px;

  margin: 0;

  cursor: pointer;

}


/* =========================================================

   選択肢文字

   ========================================================= */

.btcf-contact__choice span {

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  line-height: 1.6;

}


/* =========================================================

   お問い合わせいただいている方

   PCは横並び

   ========================================================= */

.btcf-contact__fieldset--contact-person-type
.btcf-contact__choices {

  flex-direction: row;

  flex-wrap: wrap;

  gap: 12px 24px;

}


/* =========================================================

   性別

   PCは横並び

   ========================================================= */

.btcf-contact__fieldset--gender
.btcf-contact__choices {

  flex-direction: row;

  flex-wrap: wrap;

  gap: 12px 24px;

}


/* =========================================================

   お問い合わせ種類

   ========================================================= */

.btcf-contact__fieldset--inquiry-type
.btcf-contact__choices {

  flex-direction: column;

  gap: 12px;

}


/* =========================================================

   支援内容

   ========================================================= */

.btcf-contact__fieldset--support-types
.btcf-contact__choices {

  flex-direction: column;

  gap: 12px;

}


/* =========================================================

   支援内容の補足文

   選択肢の下に配置

   ========================================================= */

.btcf-contact__fieldset--support-types
.btcf-contact__field {

  display: flex;

  flex-direction: column;

}


.btcf-contact__fieldset--support-types
.btcf-contact__choices {

  order: 1;

}


.content
.btcf-contact__fieldset--support-types
p.btcf-contact__help {

  order: 2;

  margin-top: 8px;

  margin-bottom: 0;

}


.btcf-contact__fieldset--support-types
.btcf-contact__error {

  order: 3;

}


/* =========================================================

   利用予定事業所

   ========================================================= */

.btcf-contact__fieldset--offices
.btcf-contact__field {

  display: flex;

  flex-direction: column;

}


.btcf-contact__fieldset--offices
.btcf-contact__office-groups {

  order: 1;

}


.content
.btcf-contact__fieldset--offices
p.btcf-contact__help {

  order: 2;

  margin-top: 10px;

  margin-bottom: 0;

}


.btcf-contact__fieldset--offices
.btcf-contact__error {

  order: 3;

}


/* =========================================================

   事業所グループ

   ========================================================= */

.btcf-contact__office-groups {

  display: flex;

  flex-direction: column;

  gap: 22px;

  margin: 0;

}


/* =========================================================

   各事業所グループ

   ========================================================= */

.btcf-contact__office-group {

  width: 100%;

  padding: 18px 20px;

  border-radius: var(--btcf-radius);

  background: #fafafa;

}


/* =========================================================

   非表示事業所

   ========================================================= */

.btcf-contact__office-group[hidden] {

  display: none !important;

}


/* =========================================================

   事業所グループ見出し

   ========================================================= */

.content
.btcf-contact
h3.btcf-contact__subheading {

  margin-top: 0;

  margin-bottom: 14px;

  padding: 0;

  font-family: inherit;

  font-size: 16px;

  font-weight: 600;

  color: inherit;

  line-height: 1.6;

}


/* =========================================================

   事業所一覧

   PCは2列

   ========================================================= */

.btcf-contact__office-group
.btcf-contact__choices {

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px 24px;

}


/* =========================================================

   事業所だけは長文対応のため
   checkboxを上揃え

   ========================================================= */

.btcf-contact__office-group
.btcf-contact__choice {

  min-width: 0;

  align-items: flex-start;

  overflow-wrap: anywhere;

}


.btcf-contact__office-group
.btcf-contact__choice
input[type="checkbox"] {

  margin-top: 3px;

}


/* =========================================================

   条件分岐項目

   ========================================================= */

.btcf-contact__conditional[hidden],
.btcf-contact__conditional-section[hidden],
.btcf-contact__office-group[hidden] {

  display: none !important;

}


/* =========================================================

   通所・成人系追加エリア

   横方向に余白を入れず、
   通常項目と基準線を揃える

   ========================================================= */

.btcf-contact__conditional-section {

  margin: 40px 0;

  padding: 0;

  border: 0;

  background: transparent;

}


/* =========================================================

   条件分岐エリア見出し

   ========================================================= */

.content
.btcf-contact
h2.btcf-contact__section-title {

  margin-top: 0;

  margin-bottom: 0;

  padding: 0 0 12px;

  font-family: inherit;

  font-size: 22px;

  font-weight: 700;

  color: inherit;

  line-height: 1.5;

  border-bottom: 1px solid var(--btcf-border);

}


/* =========================================================

   条件分岐内も通常項目と同じ幅を使用

   300px + 30px

   ========================================================= */

.btcf-contact__conditional-section
.btcf-contact__row {

  grid-template-columns:
    300px
    minmax(0, 1fr);

}


/* =========================================================

   エラーメッセージ

   ========================================================= */

.content
.btcf-contact
p.btcf-contact__error {

  margin: 8px 0 0;

  color: var(--btcf-error);

  font-size: 14px;

  line-height: 1.6;

  font-weight: 500;

}


/* =========================================================

   エラー概要

   ========================================================= */

.btcf-contact__error-summary,
.btcf-contact__system-error {

  margin-bottom: 25px;

  padding: 15px 20px;

  border-left: 4px solid var(--btcf-error);

  background: #fff5f5;

  color: var(--btcf-error);

}


/* =========================================================

   エラー概要内p

   ========================================================= */

.content
.btcf-contact__error-summary p,
.content
.btcf-contact__system-error p {

  margin: 0;

  font-family: inherit;

  font-size: inherit;

  color: inherit;

}


/* =========================================================

   個人情報保護方針

   ========================================================= */

.btcf-contact__privacy {

  margin-top: 30px;

  padding: 20px;

  background: var(--btcf-bg);

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  text-align: center;

}


/* =========================================================

   個人情報保護方針 label

   ========================================================= */

.btcf-contact__privacy-label {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin: 0;

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  cursor: pointer;

}


/* =========================================================

   個人情報保護方針 checkbox

   ========================================================= */

.btcf-contact__privacy-label
input[type="checkbox"] {

  flex: 0 0 auto;

  width: 18px;

  height: 18px;

  margin: 0;

  cursor: pointer;

}


/* =========================================================

   個人情報保護方針リンク

   ========================================================= */

.btcf-contact__privacy a {

  color: #4f7f3b;

  text-decoration: underline;

}


/* =========================================================

   確認ボタン

   ========================================================= */

.btcf-contact__submit {

  margin-top: 35px;

  text-align: center;

}


/* =========================================================

   ボタン共通

   ========================================================= */

.btcf-contact__submit button,
.btcf-contact__actions button {

  display: inline-block;

  min-width: 220px;

  margin: 0;

  padding: 14px 30px;

  border: 0;

  border-radius: var(--btcf-radius);

  background: var(--btcf-primary);

  font-family: inherit;

  font-size: 15px;

  font-weight: 600;

  color: #ffffff;

  line-height: 1.5;

  text-align: center;

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;

}


/* =========================================================

   ボタン hover

   ========================================================= */

.btcf-contact__submit button:hover,
.btcf-contact__actions button:hover {

  background: var(--btcf-primary-hover);

  color: #ffffff;

  opacity: 1;

}


/* =========================================================

   ボタン focus

   ========================================================= */

.btcf-contact__submit button:focus-visible,
.btcf-contact__actions button:focus-visible {

  outline: 2px solid #333333;

  outline-offset: 3px;

}


/* =========================================================

   送信中

   ========================================================= */

.btcf-contact__submit button:disabled,
.btcf-contact__actions button:disabled {

  opacity: 0.6;

  cursor: wait;

}


/* =========================================================

   Honeypot

   ========================================================= */

.btcf-contact__hp {

  position: absolute !important;

  left: -9999px !important;

  width: 1px !important;

  height: 1px !important;

  overflow: hidden !important;

}


/* =========================================================

   確認画面タイトル

   ========================================================= */

.btcf-contact__confirm-title {

  text-align: center;

}


/* =========================================================

   確認画面リスト

   ========================================================= */

.btcf-contact__confirm-list {

  margin: 0;

  padding: 0;

}


/* =========================================================

   確認画面1行

   入力画面と同じ300px基準

   ========================================================= */

.btcf-contact__confirm-row {

  display: grid;

  grid-template-columns:
    300px
    minmax(0, 1fr);

  gap: 30px;

  padding: 22px 0;

  border-bottom: 1px solid var(--btcf-border);

  font-family: inherit;

  font-size: inherit;

  color: inherit;

}


/* =========================================================

   確認画面 項目名

   ========================================================= */

.btcf-contact__confirm-row dt {

  margin: 0;

  padding: 0;

  font-family: inherit;

  font-size: inherit;

  font-weight: 600;

  color: inherit;

  line-height: 1.6;

}


/* =========================================================

   確認画面 内容

   ========================================================= */

.btcf-contact__confirm-row dd {

  margin: 0;

  padding: 0;

  font-family: inherit;

  font-size: inherit;

  font-weight: 400;

  color: inherit;

  line-height: 1.6;

  overflow-wrap: anywhere;

  word-break: break-word;

}


/* =========================================================

   確認画面ボタン

   ========================================================= */

.btcf-contact__actions {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;

  margin-top: 35px;

}


/* =========================================================

   戻るボタン

   ========================================================= */

.btcf-contact__actions
.btcf-contact__back {

  background: #777777;

}


/* =========================================================

   戻るボタン hover

   ========================================================= */

.btcf-contact__actions
.btcf-contact__back:hover {

  background: #666666;

}


/* =========================================================

   完了画面

   ========================================================= */

.btcf-contact__complete {

  padding: 45px 30px;

  background: var(--btcf-bg);

  text-align: center;

}


/* =========================================================

   完了画面本文

   ========================================================= */

.content
.btcf-contact__complete p {

  margin-top: 0;

  margin-bottom: 0;

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  line-height: 1.8;

}


/* =========================================================

   スクリーンリーダー用

   ========================================================= */

.btcf-contact__sr-only {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

  clip-path: inset(50%) !important;

  white-space: nowrap !important;

  border: 0 !important;

}

/* =========================================================
   学級
   PCでは横並び
   ========================================================= */

.btcf-contact__fieldset--class-type
.btcf-contact__choices {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px 24px;
}


/* =========================================================

   スマートフォン

   ========================================================= */

@media screen and (max-width: 767px) {


  /* -----------------------------------------------------

     基本

     ----------------------------------------------------- */

  .btcf-contact {

    width: 100%;

    max-width: 100%;

    padding: 0 15px;

  }


  /* -----------------------------------------------------

     全項目1カラム

     ----------------------------------------------------- */

  .btcf-contact__row {

    grid-template-columns: 1fr;

    gap: 10px;

    padding: 20px 0;

  }


  /* -----------------------------------------------------

     利用予定者名

     ----------------------------------------------------- */

  .btcf-contact__label[
    for="btcf-target-name"
  ] {

    white-space: normal;

  }


  /* -----------------------------------------------------

     問い合わせ者

     スマホでは縦並び

     ----------------------------------------------------- */

  .btcf-contact__fieldset--contact-person-type
  .btcf-contact__choices {

    flex-direction: column;

    gap: 10px;

  }


  /* -----------------------------------------------------

     性別

     スマホでは縦並び

     ----------------------------------------------------- */

  .btcf-contact__fieldset--gender
  .btcf-contact__choices {

    flex-direction: column;

    gap: 10px;

  }

  /* -----------------------------------------------------

     学級

     スマホでは縦並び

     ----------------------------------------------------- */

	.btcf-contact__fieldset--class-type
	.btcf-contact__choices {
		flex-direction: column;
		gap: 10px;
	}


  /* -----------------------------------------------------

     事業所

     ----------------------------------------------------- */

  .btcf-contact__office-group {

    padding: 15px;

  }


  .btcf-contact__office-group
  .btcf-contact__choices {

    grid-template-columns: 1fr;

    gap: 10px;

  }


  /* -----------------------------------------------------

     条件分岐

     ----------------------------------------------------- */

  .btcf-contact__conditional-section {

    margin: 30px 0;

  }


  .content
  .btcf-contact
  h2.btcf-contact__section-title {

    font-size: 20px;

  }


  .btcf-contact__conditional-section
  .btcf-contact__row {

    grid-template-columns: 1fr;

  }


  /* -----------------------------------------------------

     確認画面

     ----------------------------------------------------- */

  .btcf-contact__confirm-row {

    grid-template-columns: 1fr;

    gap: 8px;

    padding: 20px 0;

  }


  /* -----------------------------------------------------

     確認画面ボタン

     ----------------------------------------------------- */

  .btcf-contact__actions {

    flex-direction: column-reverse;

    gap: 12px;

  }


  /* -----------------------------------------------------

     ボタン

     ----------------------------------------------------- */

  .btcf-contact__submit button,
  .btcf-contact__actions button {

    width: 100%;

    min-width: 0;

  }


  /* -----------------------------------------------------

     個人情報保護方針

     ----------------------------------------------------- */

  .btcf-contact__privacy {

    text-align: left;

  }


  .btcf-contact__privacy-label {

    align-items: flex-start;

  }


  /* -----------------------------------------------------

     iPhone Safari入力時ズーム対策

     ----------------------------------------------------- */

  .btcf-contact input[type="text"],
  .btcf-contact input[type="email"],
  .btcf-contact input[type="tel"],
  .btcf-contact textarea,
  .btcf-contact select {

    font-size: 16px;

  }

}