@charset "utf-8";
/* ==========================================================================
   お問い合わせページ（contact.html / contact-thanks.html）専用スタイル

   🔴 読み込み順：style.css（サイト共通）→ subsidy.css（下層ページ共通）→ contact.css
      style.css と subsidy.css は変更していません。
      ・style.css から使い回し：ヘッダー／フッター／ハンバーガー／.section-title／
        .btn .btn--primary／.reveal／br-pc・br-sp
      ・subsidy.css から使い回し：.back-home（← TOPに戻る）／.page-hero／.prose

   構成:
     01. お知らせ（送信エラーなど）
     02. フォーム全体
     03. ラベルと必須／任意バッジ
     04. 入力欄
     05. 同意チェックボックス
     06. 送信ボタン
     07. 迷惑メール対策用の隠しフィールド
     08. 送信完了ページ
   ========================================================================== */

/* ---------- 01. お知らせ（送信エラーなど。既定では非表示） ---------- */
.notice{
  max-width:720px;margin:0 auto clamp(24px,3.6vw,36px);
  padding:clamp(16px,2.4vw,20px) clamp(16px,2.4vw,22px);
  border-radius:var(--radius);
  border:1px solid rgba(234,96,0,.35);
  background:var(--orange-tint);
  color:var(--orange-text);
  font-size:clamp(14px,3vw,15.5px);
  font-weight:700;line-height:1.85;
}
.notice p{margin:0;}

/* ---------- 02. フォーム全体 ---------- */
.form{
  max-width:720px;margin-inline:auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:clamp(24px,4vw,44px) clamp(20px,3.4vw,40px);
}
.form__row{margin-bottom:clamp(24px,3.4vw,34px);}
.form__row:last-of-type{margin-bottom:0;}

/* ---------- 03. ラベルと必須／任意バッジ ---------- */
.form__label{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:clamp(14.5px,3.1vw,16px);
  font-weight:800;color:var(--text);
  line-height:1.6;
  margin-bottom:10px;
}
.badge{
  font-size:clamp(11px,2.4vw,12px);font-weight:800;
  line-height:1;letter-spacing:.04em;
  padding:5px 9px;border-radius:5px;
  flex:0 0 auto;
}
.badge--req{background:var(--orange);color:var(--white);}
.badge--opt{background:var(--sky-tint);color:var(--sky-text);}

.form__note{
  font-size:clamp(12.5px,2.7vw,13.5px);
  line-height:1.85;color:var(--text-sub);
  margin:8px 0 0;
}

/* ---------- 04. 入力欄 ---------- */
.form__control{
  display:block;width:100%;
  font-family:inherit;
  font-size:16px;                   /* iOSで自動ズームさせないため16px以上 */
  line-height:1.7;color:var(--text);
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  transition:border-color .2s ease,box-shadow .2s ease;
  -webkit-appearance:none;appearance:none;
}
.form__control::placeholder{color:#b3aca5;}
.form__control:hover{border-color:var(--orange-light);}
.form__control:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(244,161,26,.25);
}
/* 入力済みなのに形式が正しくないときだけ色を変える。
   未選択の <select> を最初からエラー色にしないよう、input / textarea に限定する */
input.form__control:invalid:not(:placeholder-shown),
textarea.form__control:invalid:not(:placeholder-shown){border-color:var(--orange-mid);}
textarea.form__control{min-height:190px;resize:vertical;}

/* セレクトの矢印（画像を使わずCSSで描く） */
.form__select{
  padding-right:44px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--orange) 50%),
    linear-gradient(135deg,var(--orange) 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 2px),calc(100% - 16px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}

/* ---------- 05. 同意チェックボックス ---------- */
.form__agree{
  margin-top:clamp(26px,3.6vw,36px);
  padding-top:clamp(22px,3.2vw,30px);
  border-top:1px dotted var(--line);
}
.form__check{
  display:flex;align-items:flex-start;gap:12px;
  cursor:pointer;
  font-size:clamp(14.5px,3.1vw,16px);
  font-weight:700;line-height:1.7;color:var(--text);
}
.form__check input[type="checkbox"]{
  flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;
  accent-color:var(--orange);
  cursor:pointer;
}
.form__check .badge{margin-left:2px;}
/* 「プライバシーポリシー」の部分だけリンクにする。
   同じタブで privacy.html?from=contact を開き、
   そのページの「← お問い合わせに戻る」で戻ってくる流れ。
   ラベル内のリンクなので、押しても同意チェックは切り替わらない */
.form__policy-link{
  color:var(--orange-text);
  border-bottom:1px solid rgba(234,96,0,.45);
  transition:color .2s ease,border-color .2s ease;
}
.form__policy-link:hover{color:var(--orange);border-bottom-color:var(--orange);}

/* ---------- 06. 送信ボタン ---------- */
.form__submit{
  margin-top:clamp(28px,4vw,40px);
  text-align:center;
}
.form__submit .btn{
  width:100%;max-width:420px;
  border:none;cursor:pointer;
  font-family:inherit;
}
.form__submit .btn[disabled]{
  opacity:.55;cursor:default;transform:none;box-shadow:none;
}

/* ---------- 07. 迷惑メール対策用の隠しフィールド ----------
   人には見えず、自動投稿プログラムだけが入力してしまう欄。
   ここに何か入っていたら送信を止める（display:none だと避けられるため位置で隠す）
   ------------------------------------------------------------------------ */
.hp-field{
  position:absolute!important;
  left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;
  overflow:hidden!important;
}

/* ---------- 08. 送信完了ページ ---------- */
.thanks{
  max-width:720px;margin-inline:auto;
  background:var(--white);
  border:1px solid var(--line);
  border-top:6px solid var(--orange);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:clamp(30px,4.4vw,48px) clamp(20px,3.4vw,40px);
  text-align:center;
}
.thanks__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--orange-tint);color:var(--orange);
  margin-bottom:clamp(16px,2.4vw,22px);
}
.thanks__icon svg{width:30px;height:30px;}
.thanks__title{
  font-size:clamp(20px,4.6vw,27px);
  line-height:1.5;color:var(--text);margin:0 0 clamp(16px,2.4vw,22px);
}
.thanks__body{
  font-size:clamp(14.5px,3.1vw,16.5px);
  line-height:2;color:var(--text-sub);
}
.thanks__body p{margin:0 0 1.4em;}
.thanks__body p:last-child{margin-bottom:0;}
.thanks__back{margin-top:clamp(26px,3.6vw,36px);}

/* ---------- 極小幅（〜359px）だけの微調整 ---------- */
@media (max-width:359px){
  .form{padding:20px 16px;}
  .form__control{padding:12px 14px;}
}