@charset "UTF-8";
/**
 * お問い合わせフォーム関連スタイル（CF7 + 自作確認画面）
 * - CF7 ショートコードを含むページのみで読み込まれる（inc/enqueue.php で制御）
 * - :root 変数や container / m-page-fv / m-dot-divider / m-page-ttl は main.css で定義済み
 */

/* ========================================
    FV（イラスト配置）
    ======================================== */
/* SPはイラストが在フローになる。白円の上端は「FV下端の128px上」に来るため、
   同じだけ下余白を取ってイラストの足元を境目に合わせる */
@media (max-width: 768px) {
  .ct-fv {
    padding-bottom: 128px;
  }
}

/* 600px以下は縦積みをやめ、イラストを見出しの右へ絶対配置してFVの高さを抑える。
   白円のオフセットを深くして境目〜FV下端の白い帯を 128px → 48px に詰める */
@media (max-width: 600px) {
  .ct-fv {
    padding-bottom: 160px;
  }

  /* 白円は600px以下で直径 277.8vw になるため、同じ「FV下端の48px上」に来るよう直径から逆算する */
  .ct-fv .m-page-fv__circle {
    bottom: calc(48px - 277.8vw);
  }
}

.ct-fv__illust {
  top: 391px;
  left: 69.306vw;
  width: min(126px, 8.75vw);
}

/* static のままだと絶対配置の白円より下に描画され、イラストが塗りつぶされる。
   relative + z-index で前面に出しつつ、PC用の top / left は打ち消す */
@media (max-width: 768px) {
  .ct-fv__illust {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    order: 2;
    width: 126px;
    margin: 32px 48px 0 auto;
  }
}

/* 600px以下は在フローをやめて絶対配置に戻す。足元を境目（＝FV下端の48px上）に合わせる */
@media (max-width: 600px) {
  .ct-fv__illust {
    position: absolute;
    top: auto;
    bottom: 48px;
    left: auto;
    right: 24px;
    z-index: 2;
    width: 96px;
    margin: 0;
  }
}

.ct-fv__bird {
  z-index: 2;
}

.ct-fv__bird--01 {
  top: 256px;
  left: 53.75vw;
  width: min(63px, 4.375vw);
}

.ct-fv__bird--02 {
  top: 309px;
  left: 60.519vw;
  width: min(60px, 4.167vw);
}

@media (max-width: 768px) {
  .ct-fv__bird {
    display: none;
  }
}

/* ========================================
    お問い合わせ本文
    ======================================== */
.contact {
  padding: 0 0 160px;
}

/* 769px以上はFV下端（白円の265px下）が本文の上余白になる。
   SPは白円〜FV下端の帯が詰まるぶん、上余白を足して『私たちについて』と同じ
   「弧の上端 → 本文」の距離（約184px／600px以下は約102px）に揃える */
@media (max-width: 768px) {
  .contact {
    padding: 56px 0 160px;
  }
}

@media (max-width: 600px) {
  .contact {
    padding: 56px 0 80px;
  }
}

.contact__info {
  font-size: clamp(16px, 1.25vw, 18px);
  text-align: center;
  line-height: 1.78;
}

/* 小型スマホは1行の文字数を稼ぐため 15px まで落とす（入力欄ではないので16px下限の対象外） */
@media (max-width: 430px) {
  .contact__info {
    font-size: 15px;
  }
}

/* ----------------------------------------
    お電話でのお問い合わせ
    ---------------------------------------- */
.contact__tel {
  margin-top: min(5.556vw, 80px);
  text-align: center;
}

@media (max-width: 600px) {
  .contact__tel {
    margin-top: 40px;
  }
}

.contact__tel-name {
  font-size: clamp(20px, 1.667vw, 24px);
  font-weight: 500;
  line-height: 1.33;
}

.contact__tel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  transition: 0.3s;
}

.contact__tel-link:hover {
  opacity: 0.7;
}

.contact__tel-link img {
  width: 40px;
  height: 40px;
}

@media (max-width: 600px) {
  .contact__tel-link img {
    width: 32px;
    height: 32px;
  }
}

.contact__tel-number {
  font-family: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(32px, 3.333vw, 48px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

/* ----------------------------------------
    フォームセクション
    ---------------------------------------- */
/* 11.111vw はデザイン基準幅1440pxで160px。ワイド画面で開きすぎないよう上限を設ける */
.contact__body {
  margin-top: min(11.111vw, 160px);
}

@media (max-width: 600px) {
  .contact__body {
    margin-top: 64px;
  }
}

.contact__lead {
  margin-top: min(2.778vw, 40px);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.78;
}

@media (max-width: 600px) {
  .contact__lead {
    margin-top: 24px;
  }
}

.contact__form {
  margin-top: min(2.778vw, 40px);
  width: 100%;
}

@media (max-width: 600px) {
  .contact__form {
    margin-top: 24px;
  }
}

/* ----------------------------------------
    各入力ユニット（テーブル風の行）
    ---------------------------------------- */
.form-unit {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 32px 0;
  border-top: 1px solid var(--color-border);
}

.form-unit--last {
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 600px) {
  .form-unit {
    flex-direction: column;
    gap: 8px;
    padding: 24px 0;
  }
}

.form-unit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 275px;
  padding-left: 24px;
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 2;
  color: var(--color-primary);
}

@media (max-width: 600px) {
  .form-unit__head {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 0;
  }
}

/* 必須バッジ */
.m-required::after {
  content: "必須";
  flex-shrink: 0;
  padding: 0 10px;
  border: 1px solid var(--color-required);
  border-radius: 8px;
  color: var(--color-required);
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.03em;
}

@media (max-width: 600px) {
  .m-required::after {
    font-size: 14px;
    line-height: 26px;
  }
}

/* 入力欄エリア（CF7 の wrap） */
.form-unit .wpcf7-form-control-wrap {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 24px;
}

@media (max-width: 600px) {
  .form-unit .wpcf7-form-control-wrap {
    width: 100%;
    padding: 0;
  }
}

/* テキスト系入力（text / email / tel / url / number / date 共通） */
.form-unit__input {
  width: 100%;
  max-width: 400px;
  padding: 4px 16px;
  border: none;
  border-radius: 8px;
  background: var(--color-bg-faint);
  font-size: 16px;
  line-height: 1.875;
  letter-spacing: 0.03em;
  transition: 0.3s;
}

@media (max-width: 600px) {
  .form-unit__input {
    max-width: none;
  }
}

.form-unit__input:focus {
  outline: 1px solid var(--color-primary);
}

.form-unit__input::placeholder {
  color: var(--color-placeholder);
}

/* テキストエリア */
.form-unit__textarea {
  width: 100%;
  height: 188px;
  padding: 4px 16px;
  border: none;
  border-radius: 8px;
  background: var(--color-bg-faint);
  font-size: 16px;
  line-height: 1.875;
  letter-spacing: 0.03em;
  resize: vertical;
  transition: 0.3s;
}

.form-unit__textarea:focus {
  outline: 1px solid var(--color-primary);
}

.form-unit__textarea::placeholder {
  color: var(--color-placeholder);
}

/* 日付・数値はPCで全幅にせず、適度な幅に */
input.form-unit__input[type=date],
input.form-unit__input[type=number] {
  width: auto;
  min-width: 200px;
}

@media (max-width: 600px) {

  input.form-unit__input[type=date],
  input.form-unit__input[type=number] {
    width: 100%;
  }
}

/* ファイル入力 */
input.form-unit__input[type=file] {
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
}

input.form-unit__input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  background: var(--white);
  color: var(--color-primary);
  font-size: 13px;
  cursor: pointer;
  transition: 0.3s;
}

input.form-unit__input[type=file]::file-selector-button:hover {
  background: var(--color-primary);
  color: var(--white);
}

/* セレクト */
.form-unit select {
  width: 100%;
  max-width: 400px;
  padding: 4px 36px 4px 16px;
  border: none;
  border-radius: 8px;
  background-color: var(--color-bg-faint);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23f39800' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  font-size: 16px;
  line-height: 1.875;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: 0.3s;
}

.form-unit select:focus {
  outline: 1px solid var(--color-primary);
}

/* 複数input縦積み時の上下余白（住所など、data-confirm-separator なしのケース） */
.form-unit:not([data-confirm-separator]) .wpcf7-form-control-wrap+.wpcf7-form-control-wrap {
  margin-top: 8px;
}

/* 複数入力欄を横並び（電話番号・郵便番号などの分割入力） */
.form-unit[data-confirm-separator] .wpcf7-form-control-wrap {
  display: inline-block;
  width: auto;
  padding: 0;
}

.form-unit[data-confirm-separator] .form-unit__input {
  width: 6em;
}

/* ----------------------------------------
    ラジオ・チェックボックス（CF7のリスト）
    ---------------------------------------- */
.wpcf7-radio,
.wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.wpcf7-list-item {
  margin: 0;
}

.wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.wpcf7-list-item-label {
  font-size: 16px;
}

/* ラジオボタン（カスタム） */
.wpcf7 input[type=radio] {
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--color-checkbox);
  position: relative;
  background-color: var(--white);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: 0.3s;
  flex-shrink: 0;
}

.wpcf7 input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
  transform: translate(-50%, -50%);
}

/* 複数チェックボックス（[checkbox] グループ）— カスタムUI */
.wpcf7-checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid var(--color-checkbox);
  position: relative;
  background-color: var(--white);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  transition: 0.3s;
}

.wpcf7-checkbox input[type=checkbox]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.wpcf7-checkbox input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ----------------------------------------
    個人情報の取り扱い（スクロールボックス）
    ---------------------------------------- */
.form-policy {
  max-width: 640px;
  height: 240px;
  margin: min(5.556vw, 80px) auto 0;
  padding: 16px 24px;
  border: 2px solid var(--color-border);
  overflow-y: auto;
}

@media (max-width: 600px) {
  .form-policy {
    margin-top: 40px;
    padding: 16px;
  }
}

.form-policy p {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.71;
  color: var(--black);
}

.form-policy p:first-child {
  margin-top: 0;
}

/* 見出しは太字（.form-policy p より高い詳細度で上書き） */
.form-policy .form-policy__ttl,
.form-policy .form-policy__head {
  font-weight: 700;
}

/* ----------------------------------------
    プライバシー同意（[acceptance]）
    ---------------------------------------- */
.form-consent {
  margin-top: min(5.556vw, 80px);
  text-align: center;
  font-size: 16px;
  line-height: 1.875;
}

@media (max-width: 600px) {
  .form-consent {
    margin-top: 40px;
  }
}

.form-checkbox {
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  border-radius: 4px;
  border: 1px solid var(--color-checkbox);
  position: relative;
  background-color: var(--white);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  vertical-align: -2px;
  transition: 0.3s;
}

/* ポリシー未読中（最後までスクロールするまで）のグレーアウト */
.form-checkbox:disabled {
  border-color: var(--color-border);
  background-color: var(--color-border);
  cursor: not-allowed;
}

.form-consent.is-locked .wpcf7-list-item label {
  color: var(--color-gray);
  cursor: not-allowed;
}

.form-consent.is-locked .form-unit__policy-link:hover {
  opacity: 1;
}

.form-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* CF7 が acceptance 内の a を p に変換するため、inline 化して横並びを維持 */
.form-consent .wpcf7-list-item {
  margin: 0;
}

.form-consent .wpcf7-list-item label {
  cursor: pointer;
}

.form-unit__policy-link {
  display: inline;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: 0.3s;
}

.form-unit__policy-link:hover {
  opacity: 0.7;
}

/* ----------------------------------------
    送信ボタン (CF7) — 「内容を確認する」
    ---------------------------------------- */
.wpcf7-submit {
  display: block;
  width: 318px;
  max-width: 100%;
  margin: 24px auto 0;
  padding: 16px 0;
  border: none;
  border-radius: 40px;
  background: var(--color-primary);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-align: center;
  transition: 0.3s;
}

.wpcf7-submit:hover {
  opacity: 0.7;
}

/* ----------------------------------------
    バリデーション・エラー表示
    ---------------------------------------- */
.wpcf7-not-valid {
  outline: 1px solid var(--color-required);
}

.wpcf7-not-valid-tip {
  color: var(--color-required);
  font-size: 13px;
  margin-top: 4px;
}

.wpcf7-response-output {
  border-color: transparent !important;
  text-align: center !important;
}

/* 文字数カウンター */
.cf7-char-counter {
  text-align: right;
  font-size: 13px;
  color: var(--color-gray);
  margin-top: 4px;
}

/* ----------------------------------------
    確認ビュー
    ---------------------------------------- */
.contact__confirm {
  margin-top: min(2.778vw, 40px);
}

@media (max-width: 600px) {
  .contact__confirm {
    margin-top: 24px;
  }
}

.contact__confirm-table {
  width: 100%;
  border-collapse: collapse;
}

.contact__confirm-table th,
.contact__confirm-table td {
  padding: 32px 24px;
  border-top: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  line-height: 1.875;
}

.contact__confirm-table tr:last-child th,
.contact__confirm-table tr:last-child td {
  border-bottom: 1px solid var(--color-border);
}

.contact__confirm-table th {
  width: 275px;
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
}

@media (max-width: 600px) {

  .contact__confirm-table th,
  .contact__confirm-table td {
    display: block;
    width: 100%;
    padding: 8px 0;
  }

  .contact__confirm-table th {
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    white-space: normal;
  }

  .contact__confirm-table td {
    padding-bottom: 24px;
    border-top: none;
  }
}

.contact__confirm-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: min(5.556vw, 80px);
}

@media (max-width: 600px) {
  .contact__confirm-actions {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
  }
}

.contact__btn {
  display: block;
  width: 240px;
  padding: 16px 0;
  border-radius: 40px;
  border: 1px solid var(--color-primary);
  background: var(--white);
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
}

@media (max-width: 600px) {
  .contact__btn {
    width: 100%;
    max-width: 318px;
  }
}

.contact__btn:hover {
  opacity: 0.7;
}

.contact__btn--send {
  background: var(--color-primary);
  color: var(--white);
}
/* ========================================
    送信完了ページ（/thanks/）
    ======================================== */
/* FV・本文まわりの余白は .contact をそのまま流用し、中身だけ中央揃えにする */
.contact__thanks {
  text-align: center;
}

/* チェックマーク（オレンジ丸） */
.contact__thanks-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-bg-pale);
}

@media (max-width: 600px) {
  .contact__thanks-icon {
    width: 72px;
    height: 72px;
  }
}

.contact__thanks-icon img {
  width: 40px;
  height: 40px;
}

@media (max-width: 600px) {
  .contact__thanks-icon img {
    width: 32px;
    height: 32px;
  }
}

.contact__thanks-ttl {
  margin-top: 32px;
  font-family: var(--font-secondary);
  font-size: clamp(24px, 2.222vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
}

@media (max-width: 600px) {
  .contact__thanks-ttl {
    margin-top: 24px;
  }
}

.contact__thanks .contact__info {
  margin-top: min(2.778vw, 40px);
}

@media (max-width: 600px) {
  .contact__thanks .contact__info {
    margin-top: 24px;
  }
}

/* 電話番号を添えた注意書きカード */
.contact__thanks-note {
  margin-top: min(5.556vw, 80px);
  padding: 48px 24px;
  border-radius: 24px;
  background: var(--color-bg-faint);
}

@media (max-width: 600px) {
  .contact__thanks-note {
    margin-top: 40px;
    padding: 32px 16px;
  }
}

.contact__thanks-note-text {
  font-size: 16px;
  line-height: 1.78;
}

@media (max-width: 430px) {
  .contact__thanks-note-text {
    font-size: 15px;
  }
}

/* カード内では .contact__tel の 80px 上余白が空きすぎるため詰める */
.contact__thanks-note .contact__tel {
  margin-top: 24px;
}

.contact__thanks-btn {
  margin-top: min(5.556vw, 80px);
}

@media (max-width: 600px) {
  .contact__thanks-btn {
    margin-top: 40px;
  }
}