@charset "utf-8";
/* =============================================================
   南紀黒潮パートナーズ株式会社 公式サイト｜静的HTML本制作
   pages/contact.css ─ お問い合わせページ固有

   1. ページヒーロー（高さを抑える）
   2. お問い合わせ導入
   3. フォーム（項目・ラベル・必須表示・入力欄・選択肢・同意・送信）
   4. 送信後の流れ
   5. 個人情報の取り扱い
   6. レスポンシブ

   フォームを白い大きなカードに閉じ込めない。項目ごとに細い罫線で区切り、
   余白・罫線・タイポグラフィでサイトのデザインの一部として見せる。
   入力欄は角丸を強くせず、影を付けない。文字は16px（iOSのフォームズームを避ける）。
   フォーム部品を他ページでも使うことが決まるまで components.css へは移さない。
   ============================================================= */

/* -------------------------------------------------------------
   1. ページヒーロー
   ------------------------------------------------------------- */
.page-hero-contact{
  padding:calc(var(--header-h) + clamp(44px,6vw,80px)) 0 clamp(48px,6vw,80px);
}
.page-hero-contact .page-hero-lead{max-width:40em}

/* -------------------------------------------------------------
   2. お問い合わせ導入
   PC：左＝見出し、右＝本文（見出しの高さに本文の1行目を揃える）。SP：縦積み。
   ------------------------------------------------------------- */
.contact-intro{
  background:var(--paper);
  padding-block:clamp(56px,6.6vw,96px) clamp(52px,6vw,88px);
}
.contact-intro-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4.6vw,76px);align-items:start;
}
.contact-intro-head .sec-title{font-size:clamp(25px,3.2vw,40px)}
.contact-intro-body{padding-top:clamp(0px,2.4vw,34px);max-width:34em}
.contact-intro-body > .contact-intro-sub{font-size:14px;color:var(--muted);text-wrap:pretty}

/* -------------------------------------------------------------
   3. フォーム
   ------------------------------------------------------------- */
.contact-form-section{
  background:var(--white);
  padding-block:clamp(56px,6.6vw,96px) clamp(64px,7.4vw,112px);
}
.contact-form-head{margin-bottom:clamp(24px,3vw,40px)}
.contact-form-guide{font-size:15px;line-height:2;letter-spacing:.05em;color:var(--ink-soft)}
.form-required-note{display:block;font-size:13px;color:var(--muted)}

/* 3-1 項目：PCは左＝ラベル／右＝入力欄の2列。項目ごとに細い罫線 */
.form-field{
  display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:10px clamp(24px,4vw,60px);align-items:start;
  padding-block:clamp(22px,2.8vw,32px);
  border-bottom:1px solid var(--line);
}
.contact-form > .form-field:first-child{border-top:1px solid var(--line)}
/* fieldset の legend を通常の要素として扱い、左の列に置く */
.form-field legend{float:left;padding:0}
.form-label{
  display:block;padding-top:12px;
  font-size:15px;font-weight:500;letter-spacing:.08em;line-height:1.7;color:var(--ink);
}
/* 必須・任意：色だけに頼らず文字で示す。必須は金の細い枠、任意は灰色 */
.form-required,.form-optional{
  display:inline-block;margin-left:10px;padding:2px 8px;border:1px solid var(--gold);border-radius:2px;
  font-size:10.5px;font-weight:400;letter-spacing:.14em;line-height:1.5;vertical-align:2px;color:var(--gold-text);
}
.form-optional{border-color:var(--line);color:var(--muted)}
.form-control{min-width:0}

/* 3-2 入力欄。角丸は2px、影なし。触れると枠が濃くなり、フォーカスで濃紺になる */
.form-input,.form-textarea{
  display:block;width:100%;min-height:54px;padding:12px 16px;
  border:1px solid #7f949c;border-radius:2px;background:var(--white); /* 白地に対して3:1以上の枠線 */
  font:inherit;font-size:16px;line-height:1.7;letter-spacing:.04em;color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.form-input:hover,.form-textarea:hover{border-color:#5f7780}
.form-input:focus,.form-textarea:focus{border-color:var(--blue)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--muted);opacity:1} /* 入力例。白地で 5.59:1（#6f8087 は 4.11:1 で基準未満だった） */
.form-textarea{min-height:220px;resize:vertical}
/* エラー時（Phase 2 で aria-invalid="true" を付ける）：枠を赤系にし、下に理由の文章を出す */
.form-input[aria-invalid="true"],.form-textarea[aria-invalid="true"]{border-color:#b04a3d;background:#fff9f8}
.form-error{margin-top:8px;font-size:13px;line-height:1.9;letter-spacing:.04em;color:#9b3428}
.form-error::before{content:"※";margin-right:.3em}
.form-hint{margin-top:8px;font-size:13px;line-height:1.9;letter-spacing:.04em;color:var(--muted)}
/* 無効化の想定（Phase 2 の送信中など） */
.form-input:disabled,.form-textarea:disabled,.form-button:disabled{opacity:.55;cursor:not-allowed}

/* 3-3 選択肢（radio）：5つを一覧で見せる。PCは2列、狭い画面は1列。48px以上のタップ領域 */
.choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.choice{
  display:flex;align-items:center;gap:12px;
  min-height:50px;padding:10px 14px;border:1px solid #9fb0b6;border-radius:2px;background:var(--white);
  font-size:15px;letter-spacing:.05em;line-height:1.6;color:var(--ink);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.choice:hover{border-color:#5f7780}
.choice:has(:checked){border-color:var(--blue);background:var(--paper)}
/* ネイティブの radio / checkbox を、見た目だけ細い枠の円・四角にする（操作は標準のまま） */
.choice input,.form-consent input{
  appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;margin:0;
  position:relative;border:1px solid #7f949c;background:var(--white);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.choice input{border-radius:50%}
.choice input:checked{border-color:var(--blue)}
.choice input:checked::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--blue);
}
.choice input:focus-visible,.form-consent input:focus-visible{outline:2px solid #29809f;outline-offset:3px}

/* 3-4 同意（checkbox）。文中の「プライバシーポリシー」はリンク */
.form-consent{
  display:flex;align-items:flex-start;gap:12px;
  min-height:50px;padding:12px 0;
  font-size:15px;letter-spacing:.05em;line-height:1.8;color:var(--ink);cursor:pointer;
}
.form-consent input{border-radius:2px;margin-top:3px}
.form-consent input:checked{border-color:var(--blue);background:var(--blue)}
.form-consent input:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.form-consent a{
  color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.28em;
  transition:color .3s var(--ease);
}
.form-consent a:is(:hover,:focus-visible){color:var(--gold-text);text-decoration-color:currentColor}

/* 3-5 送信。PCは右の列に揃える。注意書きは静かに（警告文の見た目にしない） */
.form-submit{
  display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:10px clamp(24px,4vw,60px);
  padding-top:clamp(28px,3.4vw,44px);
}
.form-submit .form-note{
  grid-column:2;
  font-size:13px;line-height:1.9;letter-spacing:.04em;color:var(--muted);
}
.form-button{grid-column:2;justify-self:start;width:min(100%,360px);margin-top:14px;cursor:pointer}

/* -------------------------------------------------------------
   4. 送信後の流れ
   PC：3列。上に細い罫線、列の間に細い縦罫。番号は金、見出しは明朝。
   SP：番号を左に置いた縦の並び。
   ------------------------------------------------------------- */
.contact-flow{background:var(--paper);padding-block:clamp(56px,6.6vw,96px)}
.contact-flow-title{font-size:clamp(25px,3.2vw,40px)}
.flow-steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(36px,4.4vw,60px);border-top:1px solid var(--line);
}
.flow-steps li{
  padding:clamp(26px,3vw,40px) clamp(18px,2.4vw,36px) 0 clamp(18px,2.4vw,36px);
  border-left:1px solid var(--line);
}
.flow-steps li:first-child{padding-left:0;border-left:0}
.flow-num{
  display:block;
  font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--gold-text);
}
.flow-steps h3{margin-top:14px;font-size:clamp(18px,1.7vw,21px);line-height:1.7;letter-spacing:.08em}
.flow-steps p{margin-top:12px;font-size:14.5px;line-height:2;letter-spacing:.05em;color:var(--muted);text-wrap:pretty}

/* -------------------------------------------------------------
   5. 個人情報の取り扱い（短い補足）
   ------------------------------------------------------------- */
.contact-privacy{background:var(--white);padding-block:clamp(52px,6vw,88px)}
.contact-privacy-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4.6vw,76px);align-items:start;
}
.contact-privacy-title{font-size:clamp(19px,1.9vw,24px);line-height:1.7;letter-spacing:.08em}
.contact-privacy-body{max-width:34em}
.contact-privacy-body p{font-size:15px;line-height:2.1;letter-spacing:.045em;color:var(--ink-soft)}
.contact-privacy-body .text-link{margin-top:18px}

/* -------------------------------------------------------------
   6. レスポンシブ
   ------------------------------------------------------------- */
@media (max-width:1024px){
  .contact-intro-grid,.contact-privacy-inner{grid-template-columns:1fr;gap:clamp(20px,3vw,32px)}
  .contact-intro-body{padding-top:0}
  .form-field{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .form-submit{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
}
@media (max-width:768px){
  /* 項目は ラベル → 入力欄 の縦積みへ */
  .form-field{grid-template-columns:1fr;gap:10px;padding-block:clamp(20px,3.4vw,28px)}
  .form-label{padding-top:0}
  .form-submit{grid-template-columns:1fr}
  .form-submit .form-note,.form-button{grid-column:auto}
  .form-button{width:100%}
  .choice-list{grid-template-columns:1fr}
  /* 送信後の流れ：番号を左に置いた縦の並び */
  .flow-steps{grid-template-columns:1fr;border-top:0}
  .flow-steps li{
    display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px;
    padding:clamp(20px,3.4vw,26px) 0;border-left:0;border-top:1px solid var(--line);
  }
  .flow-steps li:last-child{border-bottom:1px solid var(--line)}
  .flow-num{padding-top:8px}
  .flow-steps h3{grid-column:2;margin-top:0}
  .flow-steps p{grid-column:2}
}
@media (max-width:600px){
  .contact-intro{padding-block:clamp(44px,6vw,64px)}
  .contact-intro-head .sec-title{font-size:clamp(23px,6.4vw,27px)}
  .contact-form-section{padding-block:clamp(44px,6vw,64px) clamp(52px,8vw,72px)}
  .form-input,.form-textarea{padding:12px 14px}
  .form-textarea{min-height:200px}
  .choice{min-height:48px;font-size:14.5px}
  .form-consent{font-size:14.5px}
  .contact-flow{padding-block:clamp(44px,6vw,64px)}
  .contact-flow-title{font-size:clamp(23px,6.4vw,27px)}
  .contact-privacy{padding-block:clamp(40px,6vw,56px)}
}

/* -------------------------------------------------------------
   7. Contact Form 7 の出力への調整（WordPressテーマ専用。静的HTMLには無い章）
   静的HTMLの <form> は Phase 2 で Contact Form 7（以下 CF7、6.1.7）へ置き換えた。
   CF7 6.1.7 の実際の出力（フォームテンプレートは管理画面側）：
     - 各項目：span.wpcf7-form-control-wrap[data-name] > input / textarea
     - radio  ：wrap > span.wpcf7-radio > span.wpcf7-list-item > label > input + span.wpcf7-list-item-label
                （テンプレートの class: は .wpcf7-radio に付く）
     - 同意   ：wrap > span.wpcf7-acceptance > span.wpcf7-list-item > label > input + span.wpcf7-list-item-label
                （テンプレートの class: は checkbox 本体に付くため、ここでは class: を前提にしない）
     - エラー ：wrap の末尾に span.wpcf7-not-valid-tip（.wpcf7-radio / .wpcf7-acceptance の外・兄弟）
     - 送信   ：input.wpcf7-submit ＋ 直後に span.wpcf7-spinner（子要素を持てないので矢印は背景画像）
     - 行の区切りが自動で <p> / <br> になる（例：.choice-list と wrap のあいだに <p> が入る）
   DOMは変えず CSS だけで静的版（3章）の見た目へ寄せる。すべて .wpcf7 配下に限定し、
   CF7 標準CSS（.wpcf7-list-item / .wpcf7-not-valid-tip / .wpcf7-response-output 等）より
   優先されるようセレクタを組む。表示・非表示の state 制御（init / submitting / visibility）は CF7 に任せる。
   ------------------------------------------------------------- */

/* 7-1 wrapper と自動 p / br */
.wpcf7 .wpcf7-form-control-wrap{display:block;min-width:0}
.wpcf7 .wpcf7-form p:empty{display:none}
.wpcf7 .form-control > br,
.wpcf7 .form-submit > br{display:none}
.wpcf7 .wpcf7-list-item-label::before,
.wpcf7 .wpcf7-list-item-label::after{content:none} /* CF7 標準の前後スペースを消す（間隔は gap で取る） */

/* 7-2 先頭の罫線
   CF7 は form の先頭に hidden の入力群を置くため、3章の :first-child が効かない。
   「前に .form-field の兄弟が無い .form-field」へ上罫線を引く。 */
.wpcf7 .wpcf7-form .form-field:not(.form-field ~ .form-field){border-top:1px solid var(--line)}

/* 7-3 ご相談内容（radio）
   列の管理は .wpcf7-radio に集約する。外側の .choice-list（テンプレート側の div）は CF7 内では
   ただの block にし、あいだに自動 <p> が入っても崩れないようにする。 */
.wpcf7 .choice-list{display:block}
.wpcf7 .wpcf7-radio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.wpcf7 .wpcf7-radio .wpcf7-list-item{display:block;margin:0;min-width:0}
.wpcf7 .wpcf7-radio .wpcf7-list-item > label{
  display:flex;align-items:center;gap:12px;
  min-height:50px;padding:10px 14px;border:1px solid #9fb0b6;border-radius:2px;background:var(--white);
  font-size:15px;letter-spacing:.05em;line-height:1.6;color:var(--ink);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.wpcf7 .wpcf7-radio .wpcf7-list-item > label:hover{border-color:#5f7780}
.wpcf7 .wpcf7-radio .wpcf7-list-item > label:has(:checked){border-color:var(--blue);background:var(--paper)} /* 3-3 の .choice:has(:checked) と同じ */
.wpcf7 .wpcf7-list-item-label{flex:1 1 auto;min-width:0}

/* 7-4 プライバシーポリシーへの同意（acceptance）
   CF7 の list-item > label を、静的版の label.form-consent と同じ横並びの1行にする。 */
.wpcf7 .wpcf7-acceptance,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{display:block;margin:0}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item > label{
  display:flex;align-items:flex-start;gap:12px;
  min-height:50px;padding:12px 0;
  font-size:15px;letter-spacing:.05em;line-height:1.8;color:var(--ink);cursor:pointer;
}
.wpcf7 .wpcf7-acceptance a{
  color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.28em;
  transition:color .3s var(--ease);
}
.wpcf7 .wpcf7-acceptance a:is(:hover,:focus-visible){color:var(--gold-text);text-decoration-color:currentColor}

/* 7-5 radio / checkbox の見た目（3-3 / 3-4 と同じ） */
.wpcf7 .wpcf7-radio input[type="radio"],
.wpcf7 .wpcf7-acceptance input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px;height:20px;margin:0;
  position:relative;border:1px solid #7f949c;background:var(--white);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.wpcf7 .wpcf7-radio input[type="radio"]{border-radius:50%}
.wpcf7 .wpcf7-radio input[type="radio"]:checked{border-color:var(--blue)}
.wpcf7 .wpcf7-radio input[type="radio"]:checked::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--blue);
}
.wpcf7 .wpcf7-acceptance input[type="checkbox"]{border-radius:2px;margin-top:3px}
.wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked{border-color:var(--blue);background:var(--blue)}
.wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.wpcf7 .wpcf7-radio input[type="radio"]:focus-visible,
.wpcf7 .wpcf7-acceptance input[type="checkbox"]:focus-visible{outline:2px solid #29809f;outline-offset:3px}

/* 7-6 送信ボタンと送信中インジケータ
   CF7 の <input type="submit"> は子要素を持てないため、静的版の .button.button-lg.button-primary-cue
   （文字 ＋ 細い水平ライン ＋ 金の円のノード ＋ 矢印）を背景画像のSVGで同じ寸法に描く。
   触れるとラインが伸び、ノードが少し進む（静的版と同じ動き。色は最初から金）。
   .button:hover の background 一括指定に背景画像を消されないよう、hover 側でも画像を指定する。
   ボタンと spinner を包む要素（自動 <p>）をボタンと同じ幅の枠にし、spinner はその中で
   ノードの円の位置に absolute で置く。送信中に何も動かない。表示は CF7 の visibility 制御に任せる。 */
.wpcf7 .form-submit > :has(> .wpcf7-submit){grid-column:2;position:relative;width:min(100%,360px);margin:0}
.wpcf7 .wpcf7-submit{
  display:block;width:100%;min-height:88px;margin-top:14px;
  padding:20px 108px 20px 26px;border:0;border-radius:2px;
  background-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 32'%3E%3Cpath d='M0 16h27' stroke='%23fff' stroke-opacity='.6' stroke-width='1'/%3E%3Ccircle cx='53' cy='16' r='14.5' fill='none' stroke='%23b08d4e'/%3E%3Cpath d='M3 10h13M11 5l5 5-5 5' transform='translate(44.5 7.5) scale(.85)' fill='none' stroke='%23b08d4e' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:76px 32px;
  color:#fff;font-family:var(--font-ja);font-weight:500;font-size:16px;letter-spacing:.09em;line-height:1.6;text-align:left;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:background-color var(--flow-time) var(--ease),background-image var(--flow-time) var(--ease);
}
.wpcf7 .wpcf7-submit:is(:hover,:focus-visible){
  background-color:#1a5470;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 32'%3E%3Cpath d='M0 16h38' stroke='%23fff' stroke-width='1'/%3E%3Ccircle cx='58' cy='16' r='14.5' fill='none' stroke='%23b08d4e'/%3E%3Cpath d='M3 10h13M11 5l5 5-5 5' transform='translate(49.5 7.5) scale(.85)' fill='none' stroke='%23b08d4e' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:76px 32px;
}
.wpcf7 .wpcf7-submit:disabled{opacity:.55;cursor:not-allowed}
/* spinner：ボタン右側の円（右端から 41px が中心）に重ねる。ボタン上端は margin-top 14px、高さ 88px */
.wpcf7 .wpcf7-spinner{position:absolute;right:29px;top:46px;margin:0}

/* 7-7 エラー表示・送信結果
   項目ごとの理由（.wpcf7-not-valid-tip）は静的版の .form-error と同じ見た目。
   送信結果（.wpcf7-response-output）は入力欄の列に揃えた静かな帯（警告色で塗らない）。 */
.wpcf7 .wpcf7-not-valid-tip{display:block;margin-top:8px;font-size:13px;line-height:1.9;letter-spacing:.04em;color:#9b3428}
.wpcf7 .wpcf7-not-valid-tip::before{content:"※";margin-right:.3em}
.wpcf7 .form-input.wpcf7-not-valid,
.wpcf7 .form-textarea.wpcf7-not-valid{border-color:#b04a3d;background:#fff9f8}
.wpcf7 .wpcf7-form .wpcf7-response-output{
  margin:clamp(24px,3vw,36px) 0 0 calc(230px + clamp(24px,4vw,60px));
  padding:14px 18px;border:1px solid var(--line);border-radius:2px;background:var(--paper);
  font-size:14px;line-height:1.9;letter-spacing:.04em;color:var(--ink);text-wrap:pretty;
}
.wpcf7 .wpcf7-form.sent .wpcf7-response-output{border-color:var(--blue)}
.wpcf7 .wpcf7-form:is(.invalid,.unaccepted,.failed,.aborted,.spam,.payment-required) .wpcf7-response-output{
  border-color:#b04a3d;background:#fff9f8;color:#9b3428;
}

/* 7-8 レスポンシブ（6章の各幅に合わせる） */
@media (max-width:1024px){
  .wpcf7 .wpcf7-form .wpcf7-response-output{margin-left:calc(200px + clamp(24px,4vw,60px))}
}
@media (max-width:768px){
  .wpcf7 .form-submit > :has(> .wpcf7-submit){grid-column:auto;width:100%}
  .wpcf7 .wpcf7-radio{grid-template-columns:1fr}
  .wpcf7 .wpcf7-form .wpcf7-response-output{margin-left:0}
}
@media (max-width:600px){
  .wpcf7 .wpcf7-radio .wpcf7-list-item > label{min-height:48px;font-size:14.5px}
  .wpcf7 .wpcf7-acceptance .wpcf7-list-item > label{font-size:14.5px}
}

/* 7-9 強制カラーモード（Windows のハイコントラスト等）
   独自描画の radio / checkbox は背景色で状態を示すため、この環境では OS 標準の描画へ戻す。
   送信ボタンは背景色が無効化されるので、輪郭線を持たせる。 */
@media (forced-colors: active){
  .wpcf7 .wpcf7-radio input[type="radio"],
  .wpcf7 .wpcf7-acceptance input[type="checkbox"]{appearance:auto;-webkit-appearance:auto;border:0;background:none}
  .wpcf7 .wpcf7-radio input[type="radio"]:checked::after,
  .wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked::after{content:none}
  .wpcf7 .wpcf7-submit{border:1px solid ButtonText}
}

/* ---- contact.css ここまで（本番で末尾がこの行になっていれば、ファイル全体が届いている） ---- */