/* =========================================================
   page_contact.css — Contact Page（固定ページ /contact）
   =========================================================
   目的：
   - page-contact.php の固定レイアウトを、A LEGEND の“余白・タイポ・カード感”に沿って整える。
   - 既存のトップContact（top_contact.css）や共通デザインの思想に寄せつつ、
     Contactページ固有の構造（.page-contact / .pc-*）だけを対象にする。
   - 既存のリンク下線（.animate-link）を前提に、見た目が馴染むよう調整する。

   ポリシー：
   1) JSなしでも成立（<details> FAQ / 通常フォーム）
   2) 色はテーマの“薄いグレー＋白カード”を基本に、アクセントは最小限
   3) すべて .page-contact / .pc-* スコープ内に閉じ、他ページへ影響させない
   ========================================================= */


/* ---------------------------------------------------------
   0) トークン（Contactページ内でのみ使う変数）
   - テーマ共通変数がある場合はそちらが優先される想定で “上書き可能”
   - 無い場合でも崩れないようフォールバックを用意
   --------------------------------------------------------- */
.page-contact{
  /* 余白 */
  --pcPadX: 20px;
  --pcPadY: 56px;
  --pcGap: 28px;

  /* 幅 */
  --pcMaxWide: 1040px;  /* コンテンツ（FAQ/注意など）の最大幅 */
  --pcMaxForm: 720px;   /* フォームの最大幅（中央カラム） */

  /* 色（テーマ色が無い環境でも成立するフォールバック）
     --------------------------------------------------------
     ★改修（統一：テーマ共通トークンへ寄せる）
     - Contactだけ独自の薄背景（#f6f7f9）になっていたため、
       テーマ共通の --pageBg / --text が存在する場合はそちらを参照する。
     - 共通トークンが無い環境でも成立するよう、フォールバック値は維持する。
     -------------------------------------------------------- */
  --pcBg: var(--pageBg, #f6f7f9);     /* ページの薄背景（共通 --pageBg 優先） */
  --pcCard: #ffffff;                  /* カード白 */
  --pcLine: #e5e5e5;                  /* 罫線（Blogカード基準のトーンへ） */
  --pcText: var(--text, #111);        /* 文字色（共通 --text 優先） */
  --pcSub: rgba(0,0,0,.62);

  /* 角丸/影（控えめ）
     --------------------------------------------------------
     ★改修（統一：カード感をA LEGEND標準へ）
     - BLOG側のカード表現（角丸/影/線）に寄せ、Contactだけ別UIに見える差を縮める。
     - ここは Contact専用トークンなので、他ページへの影響はない。
     -------------------------------------------------------- */
  --pcR: 14px;
  --pcShadow: 0 4px 18px rgba(0,0,0,.04);

  /* フォーカスリング */
  --pcFocus: 0 0 0 3px rgba(0,134,224,.18);

  /* --------------------------------------------------------
     ★今回の改修：必須マーク（*）の色
     --------------------------------------------------------
     背景：
     - 必須の * は <span class="pc-req">*</span> で出力しているが、
       既存CSSでは rgba(0,0,0,.62) で “本文/サブ文字” と同系色になっていた。
     目的：
     - 必須マークだけを赤系にして視認性を上げる。
     方針：
     - テーマ側に “danger系トークン” が存在する場合はそれを優先し、
       無い環境でも崩れないようフォールバックを持つ。
     -------------------------------------------------------- */
  --pcReqColor: var(--danger, #c00); /* テーマに --danger があれば優先 / 無ければ赤 */
}


/* ---------------------------------------------------------
   1) ページラッパ
   --------------------------------------------------------- */
.page-contact{
  background: var(--pcBg);
  color: var(--pcText);
}

.page-contact .pc-wrap{
  padding: var(--pcPadY) var(--pcPadX);
}

@media (min-width: 768px){
  .page-contact{
    --pcPadX: 28px;
    --pcPadY: 72px;
    --pcGap: 34px;

    /* ------------------------------------------------------
       ★改修（統一：PCでも角丸を過度に大きくしない）
       - もともと PC 時に 18px へ増やしていたが、カード表現を統一するため
         基本値（14px）を維持する。
       - “サイズに応じた緩やかな変化” は余白側で担保する。
       ------------------------------------------------------ */
    --pcR: 14px;
  }
}

@media (min-width: 1024px){
  .page-contact{
    --pcPadX: 36px;
  }
}


/* ---------------------------------------------------------
   2) Hero（上部帯）
   - “帯”として静かにまとめる（余白とタイポで見せる）
   --------------------------------------------------------- */
.page-contact .pc-hero{
  max-width: var(--pcMaxWide);
  margin: 0 auto calc(var(--pcGap) + 8px);
}

.page-contact .pc-hero__inner{
  padding: 22px 0 0;
}

/* ---------------------------------------------------------
   2-A) パンくず（BLOGと統一）
   ---------------------------------------------------------
   ★今回の改修（最重要）：
   - page-contact.php 側でパンくずを BLOG と同一の DOM/class へ置換した。
     （.ba-breadcrumb / .ba-breadcrumb__*）
   - そのため、Contact固有の .pc-breadcrumb スタイルは “互換残し” としつつ、
     新しい .ba-breadcrumb スタイルをここに実装して BLOG と一致させる。
   - BLOG側CSS（css/blog/archive-blog.css）の “見た目（区切り/間隔/リンク装飾）” と
     同等になるようにし、影響範囲は .page-contact スコープ内に閉じる。
   --------------------------------------------------------- */

/* BLOGパンくず（Contact内限定で再現） */
.page-contact .ba-breadcrumb{
  /* BLOGのパンくずは控えめなトーン（#666系）で、上に静かに配置される */
  font-size: 12px;
  line-height: 1.5;
  color: #666;
}

.page-contact .ba-breadcrumb__list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.page-contact .ba-breadcrumb__item{
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------
   ★改修（BLOGと統一）
   - 区切り： "/" → ">"
   - 余白/色：BLOGと同等のトーンへ
   --------------------------------------------------------- */
.page-contact .ba-breadcrumb__item + .ba-breadcrumb__item::before{
  content: ">";
  display: inline-block;
  margin: 0 6px 0 4px;
  color: #aaa;
}

/* ---------------------------------------------------------
   ★改修（BLOGと統一）
   - Contact側の “アニメ下線(::after)” を廃止
   - BLOGと同じ「点線の下線（border-bottom: dotted）」へ統一
   --------------------------------------------------------- */
.page-contact .ba-breadcrumb__link{
  color: #666;
  text-decoration: none;
  border-bottom: 1px dotted #aaa; /* BLOGと同等：控えめな点線下線 */
  transition: color .2s ease, border-color .2s ease;
}

.page-contact .ba-breadcrumb__link:hover{
  color: #111;
  border-bottom-color: #666;       /* hoverで少しだけ存在感を上げる（BLOG相当） */
}

/* current（現在地）はリンクではない想定：強調は最小限 */
.page-contact .ba-breadcrumb__current{
  color: #111;
  font-weight: 600;
}

/* 旧：pc-breadcrumb（互換残し：DOMが残っても最低限崩れない） */
.page-contact .pc-breadcrumb{
  font-size: 12px;
  line-height: 1.5;
  color: #666;
}

.page-contact .pc-hero__eyebrow{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.page-contact .pc-hero__title{
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: .02em;
}

.page-contact .pc-hero__meta{
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0,0,0,.55);
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.page-contact .pc-hero__metaLabel{
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   3) メッセージ（送信成功/失敗）
   --------------------------------------------------------- */
.page-contact .pc-message{
  max-width: var(--pcMaxForm);
  margin: 0 auto var(--pcGap);
  padding: 18px 18px;
  border-radius: var(--pcR);
  background: var(--pcCard);
  box-shadow: var(--pcShadow);
  border: 1px solid var(--pcLine);
}

.page-contact .pc-message__title{
  margin: 0;
  font-size: 16px;
  letter-spacing: .02em;
}

.page-contact .pc-message__lead{
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--pcSub);
}

.page-contact .pc-message__note{
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--pcSub);
  line-height: 1.7;
}

.page-contact .pc-message__id{
  font-weight: 700;
}

.page-contact .pc-message--success{
  border-color: rgba(0,0,0,.14);
}

.page-contact .pc-message--error{
  border-color: rgba(200,0,0,.25);
}


/* ---------------------------------------------------------
   4) ブロック（共通）
   --------------------------------------------------------- */
.page-contact .pc-block{
  background: var(--pcCard);
  border-radius: var(--pcR);
  box-shadow: var(--pcShadow);
  border: 1px solid var(--pcLine);
  padding: 22px 18px;
  margin: 0 auto var(--pcGap);
}

.page-contact .pc-block{
  max-width: var(--pcMaxWide);
}

.page-contact .pc-form{
  max-width: var(--pcMaxForm);
}

.page-contact .pc-h2{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: .06em;
  font-weight: 700;
}

.page-contact .pc-text{
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--pcSub);
}

/* ---------------------------------------------------------
   4-A) リンク（ページ内一般リンク：BLOGと統一）
   ---------------------------------------------------------
   ★今回の改修（最重要）：
   - Contactページ内リンクが「先頭から線が伸びる」演出になっていた原因は、
     .pc-link が ::after + transform(scaleX) で下線アニメを作っていたため。
   - BLOG側の“リンク装飾”は、擬似要素アニメではなく「点線下線（dotted）」が基調。
   - ここでは Contact内の一般リンク（.pc-link）を BLOG と同じ方式へ揃える。
     （影響範囲は .page-contact スコープ内のみ）
   --------------------------------------------------------- */
.page-contact .pc-link{
  color: #111;
  text-decoration: none;            /* 既存方針を維持：ブラウザ標準の下線は使わない */
  border-bottom: 1px dotted #aaa;   /* ✅BLOGと同等：控えめな点線下線 */
  transition: color .2s ease, border-color .2s ease;
}

.page-contact .pc-link:hover{
  color: #111;
  border-bottom-color: #666;        /* hoverで少しだけ存在感を上げる（BLOG相当） */
}

/* ✅旧仕様（伸びる線アニメ）を完全に無効化：原因そのものを断つ */
.page-contact .pc-link::after{
  content: none;
}
.page-contact .pc-link:hover::after{
  content: none;
}


/* ---------------------------------------------------------
   5) FAQ
   --------------------------------------------------------- */
.page-contact .pc-faq__list{
  display: grid;
  gap: 10px;
}

.page-contact .pc-faq__item{
  border: 1px solid var(--pcLine);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.02);
}

.page-contact .pc-faq__q{
  cursor: pointer;
  padding: 12px 12px;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
}

.page-contact .pc-faq__q::-webkit-details-marker{
  display: none;
}

.page-contact .pc-faq__a{
  padding: 0 12px 12px;
}

.page-contact .pc-faq__a p{
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--pcSub);
}


/* ---------------------------------------------------------
   6) フォーム
   --------------------------------------------------------- */
.page-contact .pc-form__body{
  margin: 0;
}

.page-contact .pc-field{
  margin: 0 0 14px;
}

.page-contact .pc-label{
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---------------------------------------------------------
   ★今回の改修（必須マーク * を赤く）
   ---------------------------------------------------------
   - .pc-req は必須の * 表示に使う（フォーム全体で共通）
   - 既存は rgba(0,0,0,.62) で “文字色と同化” していたため、
     Contact内専用トークン --pcReqColor を参照して赤系に統一する。
   --------------------------------------------------------- */
.page-contact .pc-req{
  font-weight: 700;
  color: var(--pcReqColor);
  margin-left: 4px;
}

.page-contact .pc-input,
.page-contact .pc-select,
.page-contact .pc-textarea{
  width: 100%;
  border: 1px solid var(--pcLine);
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  line-height: 1.4;
  background: #fff;
  color: #111;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.page-contact .pc-textarea{
  resize: vertical;
  min-height: 160px;
}

.page-contact .pc-input:focus,
.page-contact .pc-select:focus,
.page-contact .pc-textarea:focus{
  outline: none;
  box-shadow: var(--pcFocus);
  border-color: rgba(0,134,224,.35);
}

/* 同意チェック */
.page-contact .pc-field--consent{
  margin-top: 10px;
}

.page-contact .pc-check{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.7;
  color: var(--pcSub);
}

.page-contact .pc-check input[type="checkbox"]{
  margin-top: 2px;
}

/* 送信ボタンの配置 */
.page-contact .pc-actions{
  display: flex;
  align-items: center;

  /* --------------------------------------------------------
     ★今回の改修（送信ボタン要件）
     - 中央寄せ：ボタンをフォームの中央カラム内で中央に置く
     - 幅：入力項目（.pc-input/.pc-select/.pc-textarea）と同じ “カラム幅” に揃える
       → ボタン自体は width:100% とし、フォームの最大幅（--pcMaxForm）に追従させる
     -------------------------------------------------------- */
  justify-content: center;
  gap: 12px;
}

/* ---------------------------------------------------------
   6-A) 送信ボタン（Contactページ専用CTA）
   ---------------------------------------------------------
   ★今回の改修（.gm-viewall 廃止 → 一般的なCTA命名へ）
   - page-contact.php の送信ボタンは .c-cta（Call To Action）へ置換した。
   - “VIEW ALL” とは意図が異なるため、命名・責務を分離して Contact 内で完結させる。
   - 将来的に他ページでも使えるよう、BEM風に「ベース + バリアント + ラベル」で設計する。

   仕様（要件）：
   - 中央寄せ：.pc-actions が justify-content:center
   - 幅：フォームの入力項目と同じ幅（=カラム幅） → width:100% / max-width:none
   - 高さ：上下paddingを厚めに
   - 文字：大きめ（視認性）
   - 両端丸：pill（999px）
   - アニメ：下から黒がせり上がり、文字色が反転（hover/focus）
   --------------------------------------------------------- */

/* ボタン本体（ベース） */
.page-contact .pc-actions .c-cta{
  width: 100%;
  max-width: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 高さ（= 余白で作る） */
  padding: 18px 18px;

  /* 文字 */
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;

  /* 形状 */
  border-radius: 999px;
  border: 1px solid #111;
  background: transparent;

  /* 色（通常時） */
  color: #111;

  /* アニメ準備 */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    color .28s ease,
    border-color .28s ease,
    transform .28s ease;
}

/* SPでは文字サイズを少し抑え、押しやすさは維持 */
@media (max-width: 480px){
  .page-contact .pc-actions .c-cta{
    font-size: 17px;
    padding: 18px 16px;
  }
}

/* ラベル（塗りより前面に出す） */
.page-contact .pc-actions .c-cta__label{
  position: relative;
  z-index: 1;
}

/* バリアント：fillup（下から塗り） */
.page-contact .pc-actions .c-cta--fillup::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #111;

  /* 下からせり上げ（初期は下に隠す） */
  transform: translateY(105%);
  transition: transform .38s cubic-bezier(.2,.8,.2,1);
}

/* hover / focus-visible：塗りを上げて文字色反転 */
.page-contact .pc-actions .c-cta--fillup:hover::before,
.page-contact .pc-actions .c-cta--fillup:focus-visible::before{
  transform: translateY(0);
}

.page-contact .pc-actions .c-cta--fillup:hover,
.page-contact .pc-actions .c-cta--fillup:focus-visible{
  color: #fff;
}

/* 押下感（軽く沈む） */
.page-contact .pc-actions .c-cta:active{
  transform: translateY(1px);
}

/* フォーカスリング（キーボード操作の視認性） */
.page-contact .pc-actions .c-cta:focus{
  outline: none;
}
.page-contact .pc-actions .c-cta:focus-visible{
  box-shadow: var(--pcFocus);
}

/* disabled（将来の拡張に備えた最低限） */
.page-contact .pc-actions .c-cta:disabled{
  opacity: .55;
  cursor: not-allowed;
}
.page-contact .pc-actions .c-cta:disabled::before{
  display: none;
}

/* “動きが苦手” な環境：アニメを即時に（最小限の配慮） */
@media (prefers-reduced-motion: reduce){
  .page-contact .pc-actions .c-cta{
    transition: none;
  }
  .page-contact .pc-actions .c-cta--fillup::before{
    transition: none;
  }
}

/* 送信後の注記（返信目安など） */
.page-contact .pc-form__note{
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--pcSub);
}

/* honeypot：視覚的に完全隠し（スクリーンリーダーも不要） */
.page-contact .pc-honeypot{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}



/* =========================================================
   7) ★今回の改修（方式A：確認画面の見た目）
   =========================================================
   背景：
   - page-contact.php が「入力 → 確認 → 確定送信」へ移行した。
   - 確認画面は .pc-confirm / .pc-confirm__* を用意しているため、
     Contactページのカード感・余白・文字階層に沿って整える。

   方針：
   - 影響範囲は .page-contact スコープに閉じる（他ページへ影響させない）
   - 既存のフォーム・FAQ・メッセージのトーンと一致させる
   - “確認” は読みやすさ最優先：ラベルと値を2列（SPは縦積み）で表示
   --------------------------------------------------------- */

/* 確認ブロックの内側ラッパ（ページ構造が変わっても壊れない最小） */
.page-contact .pc-confirm{
  /* フォームブロック内で完結するため、余計な背景は付けない */
}

/* 定義リストを “カード内テーブル” 風に */
.page-contact .pc-confirm__list{
  margin: 0;
  padding: 0;
}

/* 1行 = 1項目 */
.page-contact .pc-confirm__row{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}

.page-contact .pc-confirm__row:first-child{
  border-top: none;
  padding-top: 0;
}

/* 左：項目名 */
.page-contact .pc-confirm__dt{
  margin: 0;
  font-size: 12px;
  letter-spacing: .04em;
  font-weight: 700;
  color: rgba(0,0,0,.62);
}

/* 右：値 */
.page-contact .pc-confirm__dd{
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: #111;
  word-break: break-word;
}

/* 内容（message）は長くなりがちなので、行間だけ少し気持ちよく */
.page-contact .pc-confirm__dd br{
  line-height: 2.0;
}

/* SPでは縦積み（読みやすさ優先） */
@media (max-width: 560px){
  .page-contact .pc-confirm__row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .page-contact .pc-confirm__dt{
    font-size: 12px;
  }
}

/* ---------------------------------------------------------
   7-A) 確認画面のアクション（戻る / 送信）
   --------------------------------------------------------- */

/* 確認画面はボタンが2つ並ぶため、wrap を許容する */
.page-contact .pc-actions--confirm{
  flex-wrap: wrap;
}

/* 2ボタン時は少し幅を抑えて並べやすく（SPは縦積みになる） */
@media (min-width: 560px){
  /* -------------------------------------------------------
     ★今回の改修（A案：幅の責務を “箱” に寄せる）
     --------------------------------------------------------
     目的：
     - 「この内容で送信する」だけ幅が小さく見える問題を解消する。
       （form.pc-confirm__send の中に button.c-cta があり、
        親(form)も子(button)も width:50% が掛かって “半分の半分” になるため）
     方針：
     - 50% 幅の指定は「.pc-actions--confirm 直下のボタン要素」に限定する。
       → 戻る（a.c-cta）にだけ 50% を適用し、form 内の button.c-cta へは当てない。
     - 送信側は form.pc-confirm__send が 50% を持ち、内部 button は width:100% で箱いっぱいにする。
     ------------------------------------------------------- */

  /* ✅直下の c-cta だけに 50% を付与（form 内 button には当てない） */
  .page-contact .pc-actions--confirm > .c-cta{
    width: calc(50% - 6px);
  }
}

/* confirm の送信用フォームは余計な余白を持たない */
.page-contact .pc-confirm__send{
  margin: 0;
  width: 100%;
}

/* PC幅で2列にするとき、送信用フォーム側も同じ幅に揃える */
@media (min-width: 560px){
  .page-contact .pc-confirm__send{
    width: calc(50% - 6px);
  }

  /* ✅送信ボタン（form内button）は “箱いっぱい” にする（A案の核） */
  .page-contact .pc-confirm__send .c-cta{
    width: 100%;
    max-width: none;
  }
}

/* ---------------------------------------------------------
   7-B) 「戻って修正する」ボタン（リンク）
   ---------------------------------------------------------
   - HTMLは <a class="c-cta ... pc-submit--back"> としているため、
     リンクでもボタンと同じ見た目になるよう最小調整だけ行う。
   --------------------------------------------------------- */
.page-contact .pc-submit--back{
  text-decoration: none; /* a要素の下線を無効化 */
}

/* “戻る” は fillup（黒塗り）ではなく、控えめに見せたいので薄いホバーにする */
.page-contact .pc-submit--back::before{
  display: none; /* fillupの::beforeを使わない（安全に抑制） */
}

.page-contact .pc-submit--back:hover,
.page-contact .pc-submit--back:focus-visible{
  background: rgba(0,0,0,.06);
}

/* 戻るボタンは文字色を反転させない（常に黒） */
.page-contact .pc-submit--back:hover,
.page-contact .pc-submit--back:focus-visible{
  color: #111;
}

/* ---------------------------------------------------------
   7-C) JS補助UI（任意）
   ---------------------------------------------------------
   - page_contact.js が .pc-jsmsg（案内）や .pc-charcount（文字数）を追加する。
   - 既に inline style を付与しているため、ここは “あっても無くても良い” 程度の最小調整。
   - 既存の見た目を壊さないため、過度な指定はしない。
   --------------------------------------------------------- */
.page-contact .pc-jsmsg{
  border-radius: 14px;
}

.page-contact .pc-charcount{
  user-select: none;
}