/* =====================================================================
   contact.css
   Contactページだけで使うCSSです。
   色・ナビ・フッターなどの共通部分は common.css 側にあるので、
   このファイルは必ず common.css の後に読み込んでください。
===================================================================== */

/* =====================================================================
   ページ見出し(簡易ヘッダー帯)
===================================================================== */
.page-head{
  background:var(--paper-deep);
  padding:120px 0 30px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.page-head .eyebrow{ display:block; font-size:.8rem; color:var(--rust); letter-spacing:.08em; margin-bottom:10px; }
.page-head h1{
  font-size:clamp(2rem, 5vw, 2.8rem);
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--rust-deep);
}
.page-head p{ margin-top:16px; color:var(--ink-soft); font-size:.95rem; }

/* =====================================================================
   ② 案内ブロック(返信目安・対応内容・SNS を3枚のカードで並べる)
===================================================================== */
.guide-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin:56px 0;
}
.guide-card{
  background:#fff;
  border:1px solid var(--line);
  padding:28px 22px;
  text-align:center;
}
.guide-card .icon{
  width:40px; height:40px;
  margin:0 auto 14px;
  color:var(--rust);
}
.guide-card .icon svg{ width:100%; height:100%; }
.guide-card h3{ font-size:.95rem; margin-bottom:8px; }
.guide-card p{ font-size:.82rem; color:var(--ink-soft); margin:0; }

/* SNSカードだけリンクとして機能させるので、ホバー時に少し動きをつける */
.guide-card.is-link{ transition:transform .2s ease, box-shadow .2s ease; }
.guide-card.is-link:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 24px rgba(30,20,10,.12);
}
.guide-card.is-link a{
  display:flex;
  flex-direction:column;
  align-items:center;
  color:inherit;
}

/* =====================================================================
   ③ フォームセクション(左:案内文 / 右:入力フォーム)
===================================================================== */
.contact-section{ padding-bottom:110px; }

.contact-layout{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:56px;
  align-items:start;
}

/* --- 左カラム:記入ガイド --- */
.form-guide h2{
  font-size:1.2rem;
  margin-bottom:16px;
}
.form-guide p{
  font-size:.88rem;
  color:var(--ink-soft);
  margin:0 0 20px;
}
.form-guide .pricing-link{
  display:inline-block;
  padding:12px 24px;
  border:1px solid var(--rust);
  color:var(--rust-deep);
  font-size:.82rem;
  transition:background .2s ease, color .2s ease;
}
.form-guide .pricing-link:hover{ background:var(--rust); color:var(--paper); }

/* --- 右カラム:フォーム本体 --- */
.contact-form{
  background:#fff;
  border:1px solid var(--line);
  padding:40px;
}

/* 1項目分のまとまり(ラベル+入力欄) */
.field{ margin-bottom:24px; }
.field label{
  display:block;
  font-size:.85rem;
  margin-bottom:8px;
  color:var(--ink);
}
/* 必須項目には赤いバッジを付ける */
.field label .required{
  display:inline-block;
  margin-left:6px;
  font-size:.65rem;
  padding:2px 7px;
  background:var(--rust);
  color:#fff;
  border-radius:999px;
  vertical-align:middle;
}
.field label .optional{
  display:inline-block;
  margin-left:6px;
  font-size:.65rem;
  padding:2px 7px;
  background:var(--paper-deep);
  color:var(--ink-soft);
  border-radius:999px;
  vertical-align:middle;
}

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  font-size:.9rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--rust);
  background:#fff;
}
.field textarea{ min-height:160px; resize:vertical; }

/* ファイル添付欄は少し見た目を変える */
.field input[type="file"]{
  width:100%;
  font-size:.82rem;
  color:var(--ink-soft);
}

/* お名前・メールアドレスなど、横に2つ並べたい項目用 */
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

/* 同意チェックボックス */
.field-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.82rem;
  color:var(--ink-soft);
}
.field-checkbox input{ margin-top:3px; }
.field-checkbox a{ color:var(--rust-deep); text-decoration:underline; }

.form-submit{
  display:inline-block;
  padding:16px 48px;
  background:var(--rust);
  color:var(--paper);
  border:none;
  font-size:.92rem;
  letter-spacing:.04em;
  transition:background .2s ease, transform .2s ease;
}
.form-submit:hover{ background:var(--rust-deep); transform:translateY(-2px); }
.form-submit:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* =====================================================================
   送信完了メッセージ(はじめは隠しておき、JSで切り替える)
===================================================================== */
.thanks-message{
  display:none; /* JSが .is-visible を付けたら表示 */
  text-align:center;
  padding:60px 20px;
}
.thanks-message.is-visible{ display:block; }
.thanks-message .icon{
  width:56px; height:56px;
  margin:0 auto 20px;
  color:var(--rust);
}
.thanks-message h2{ font-size:1.3rem; margin-bottom:12px; }
.thanks-message p{ color:var(--ink-soft); font-size:.9rem; }

/* =====================================================================
   ④ プライバシーポリシーの一文
===================================================================== */
.privacy-note{
  max-width:640px;
  margin:28px auto 0;
  text-align:center;
  font-size:.78rem;
  color:var(--ink-soft);
}

/* =====================================================================
   レスポンシブ(画面幅が狭いとき)
===================================================================== */
@media (max-width:900px){
  .guide-cards{ grid-template-columns:1fr; }
  .contact-layout{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .contact-form{ padding:26px; }
  .field-row{ grid-template-columns:1fr; }
}

/* =====================================================================
   Contact Form 7 用の追加スタイル
===================================================================== */
/* CF7が作る「隠し項目の入れ物」(fieldset)。標準CSSを止めているため、
   何もしないと枠線つきの四角が、フォームの一番上に出てしまう。非表示にする */
.wpcf7 .hidden-fields-container{ display:none; }

/* ファイル添付欄の、ラベル横の注意書き(5MBまで…) */
.field label .file-note{
  margin-left:8px;
  font-size:.72rem;
  color:var(--ink-soft);
}

/* =====================================================================
   Contact Form 7 の入力エラー・送信結果の表示
   (CF7の標準CSSを止めているため、ここで整える)
===================================================================== */
/* 画面を読み上げる人向けの通知(.screen-reader-response)は、目には見えないようにする。
   ※ display:none にすると読み上げもされなくなるため、「見えないだけ」の書き方にする */
.wpcf7 .screen-reader-response{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
}

/* 入力欄ごとのエラー文(「入力してください。」) */
.wpcf7-not-valid-tip{
  display:block;
  margin-top:6px;
  font-size:.78rem;
  color:#b3261e;
}
/* エラーのある入力欄は、枠線を赤くする */
.field .wpcf7-not-valid{ border-color:#b3261e; }

/* フォームの下に出る、送信結果のメッセージ(中身が空のときは出さない) */
.wpcf7 form .wpcf7-response-output{
  margin:24px 0 0;
  padding:12px 16px;
  border:1px solid var(--rust);
  background:#fff;
  font-size:.85rem;
  color:var(--ink);
}
.wpcf7 form .wpcf7-response-output:empty{ display:none; }