/* =========================================================
   お問い合わせ (contact) — ページ固有CSS
   参照: page_analysis/contact_design.png (InDesign原稿) 完全再現
   背景クリーム × 水色バッジ × 細い濃グレー枠の入力欄。
   ラベル(必須/任意 + 項目名)を入力欄の左に横並び。row1 右に ※備考 注記。
   ========================================================= */

.contact-main{position:relative;padding-bottom:30px}

/* ---- ページタイトル「お問い合わせ」 ---- */
.contact-main .page-title{
  text-align:center;font-family:var(--font-r);
  color:var(--aqua);font-weight:500;
  font-size:26px;letter-spacing:.34em;
  margin:14px 0 4px;
}
.contact-main .page-pad{padding-top:30px;padding-bottom:6px}

/* タイトル下の点線 (style.css の .dots を活用・幅だけ調整) */
.contact-main .dots{margin:18px 24px 30px}

/* =========================================================
   水彩装飾 (絶対配置・本文の左右に散らす)
   ========================================================= */
.ct-deco{position:absolute;pointer-events:none;z-index:0;opacity:.95}
/* 左: 緑のジグザグ葉 (フォーム上部) */
.ct-leaf{width:62px;left:10px;top:150px;animation:floaty 6.5s ease-in-out infinite}
/* 右中: 青い丸木 (電話番号付近) */
.ct-tree-r{display:none}
/* 下左 / 下右: PCのみ表示 */
.ct-tree-bl{display:none}
.ct-tree-br{display:none}

/* =========================================================
   フォーム本体
   ========================================================= */
.ct-wrap{
  position:relative;z-index:1;
  max-width:560px;margin:0 auto;padding:6px 22px 0;
}
.ct-form{display:flex;flex-direction:column;gap:22px}

/* 1行: ラベル → 入力 (SPは縦積み) */
.ct-row{display:flex;flex-direction:column;gap:8px;position:relative}

/* ---- ラベル列 (必須/任意バッジ + 項目名) ---- */
.ct-label{display:flex;align-items:center;gap:10px}
.badge{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:27px;border-radius:9px;
  font-family:var(--font-r);font-size:13px;font-weight:500;
  letter-spacing:.06em;color:#fff;line-height:1;
}
.badge.req{background:var(--aqua);}              /* 必須 = 鮮やか水色 #46BEDD */
.badge.opt{background:#B2D0D1;color:#fff;}       /* 任意 = くすみ水色グレー */
.ct-name{
  font-family:var(--font-g);color:var(--ink);
  font-size:14.5px;font-weight:400;letter-spacing:.02em;line-height:1.5;
}
.ct-name small{font-size:11px;color:var(--ink2);font-weight:400;letter-spacing:0}

/* ---- 入力列 ---- */
.ct-field{display:flex;flex-direction:column;gap:6px}

.ct-input{
  width:100%;
  font-family:var(--font-g);font-size:15px;color:var(--ink);
  background:#fff;
  border:1px solid #2A2724;border-radius:3px;
  padding:9px 12px;line-height:1.5;
  transition:border-color .25s,box-shadow .25s,background .25s;
  -webkit-appearance:none;appearance:none;
}
.ct-input::placeholder{color:#A7A097;letter-spacing:.02em}
.ct-input:focus{
  outline:none;
  border-color:var(--aqua);
  box-shadow:0 0 0 3px rgba(70,190,221,.16);
  background:var(--cream2);
}

/* プルダウン (▼ を右に描画) */
.ct-select{
  cursor:pointer;color:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346BEDD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px;
}
.ct-select:required:invalid{color:#A7A097}   /* 「選択してください」を薄く */

/* 姓・名 / セイ・メイ (2ボックス) */
.ct-duo{display:flex;gap:12px}
.ct-duo .ct-input{flex:1;min-width:0}

/* 郵便番号 (3桁 - 4桁) */
.ct-zip{display:flex;align-items:center;gap:10px}
.ct-zip-a{width:88px;flex:none}
.ct-zip-b{width:108px;flex:none}

/* 電話番号 (3ボックス) */
.ct-tel{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ct-tel-box{width:96px;flex:none}
.ct-sep{color:var(--ink2);font-size:15px;flex:none}

/* テキストエリア */
.ct-textarea{resize:vertical;min-height:150px;line-height:1.7}

/* ---- エラーメッセージ (赤文字・各ボックス下) ---- */
.ct-error{
  display:none;
  font-family:var(--font-g);font-size:12.5px;color:#E5566B;
  letter-spacing:.02em;line-height:1.5;margin-top:1px;
}
.ct-error.show{display:block}
.ct-input.is-invalid{
  border-color:#EC85A1;
  box-shadow:0 0 0 3px rgba(236,133,161,.14);
  background:#FFF6F8;
}

/* =========================================================
   送信ボタン (原稿: 小さめ・淡い水色・中央)
   ========================================================= */
.ct-submit-wrap{display:flex;justify-content:center;margin:14px 0 8px}
.ct-submit{
  font-family:var(--font-r);font-weight:500;font-size:15px;
  letter-spacing:.4em;text-indent:.4em;
  color:#fff;cursor:pointer;
  background:var(--aqua-btn);
  border:none;border-radius:8px;
  padding:9px 30px;
  box-shadow:0 4px 12px rgba(116,194,214,.35);
  transition:transform .4s var(--ease-soft),box-shadow .4s,filter .4s,background .4s;
}
.ct-submit:hover{transform:translateY(-1px) scale(1.02);background:var(--aqua-btn-d);box-shadow:0 8px 18px rgba(116,194,214,.45)}
.ct-submit:active{transform:translateY(1px) scale(.99)}

/* =========================================================
   送信完了画面
   ========================================================= */
.ct-thanks[hidden]{display:none}
.ct-thanks{
  max-width:560px;margin:0 auto;padding:30px 8px 20px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.ct-thanks__leaf{width:84px;opacity:.95}
.ct-thanks__title{
  font-family:var(--font-r);color:var(--aqua);font-weight:500;
  font-size:24px;letter-spacing:.22em;
}
.ct-thanks__body{
  font-family:var(--font-g);color:var(--ink2);
  font-size:14px;line-height:2.15;letter-spacing:.03em;
}
.ct-thanks__home{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--aqua-btn);color:#fff;
  font-family:var(--font-r);font-weight:700;font-size:15px;letter-spacing:.06em;
  padding:12px 30px;border-radius:30px;margin-top:4px;
  box-shadow:0 4px 10px rgba(143,209,225,.35);
  transition:transform .45s var(--ease-soft),background .45s,box-shadow .45s;
}
.ct-thanks__home:hover{transform:scale(1.02);background:var(--aqua-btn-d);box-shadow:0 8px 20px rgba(116,194,214,.5)}
.ct-thanks__home svg{width:14px;height:14px}

/* =========================================================
   PC レイアウト (参照画像 = PC幅)
   ラベル(badge+項目名)を入力の左に横並び。row1 右に ※備考。
   実測(設計2084px→1389vw換算): フォーム左301 / ラベル列231 /
   入力左532 / 入力幅598 / 入力高40 / 行送り95(中心) / バッジ58x33 /
   小box93 / textarea193 / 送信btn115x33(ページ中央)
   ========================================================= */
@media (min-width:860px){
  .contact-main{padding-bottom:60px}
  /* 原稿実測(設計2084px→CSS×0.6665): 文字高77px→CSS51 / 6字横幅410px→CSS273 /
     中心x=1042(ページ中央)。色=#46BEDD(--aqua) 軽量・字間ゆとり小 */
  .contact-main .page-title{font-size:50px;font-weight:400;letter-spacing:.1em;margin:30px 0 6px}
  .contact-main .page-pad{padding-top:74px}    /* 原稿: ヘッダ下〜タイトル間を広く(タイトル天 y≈395) */
  .contact-main .dots{max-width:1180px;margin:40px auto 70px}  /* 原稿: 点線 y≈585 / 行1 y≈715 */

  /* 装飾は原稿どおり2点のみ: 左=緑葉(フォーム上部) / 右=青い丸木(電話〜本文の右)。
     原稿は送信〜フッター間は無装飾。フッターの緑木・縞木は style.css の .foot-tree が担う。 */
  /* 装飾は画面が狭くなっても本文(中央834px列)に被らないよう min() で列の外側にクランプ。
     containing block=.contact-main(全幅)のため 50%=画面中央。 */
  .ct-leaf{width:min(96px, calc(50% - 417px));left:max(8px, calc(50% - 505px));top:440px}                 /* 原稿: 葉中心 お名前付近 y≈700 */
  .ct-tree-r{display:block;width:min(104px, calc(50% - 461px));right:max(8px, calc(50% - 557px));top:880px;animation:floaty 7s ease-in-out .4s infinite}  /* 原稿: 青丸木 電話番号付近の右 */
  .ct-tree-bl{display:none}   /* 原稿に無い(送信〜フッター間は無装飾) */
  .ct-tree-br{display:none}

  /* フォーム塊(ラベル+入力)を中央寄せ+原稿どおり微右寄せ(+20px)。
     注: transform は .reveal.in{transform:translateY(0)} に上書きされるため left を使う */
  .ct-wrap{max-width:830px;padding:6px 0 40px;left:20px}
  .ct-form{gap:0}

  /* 行: 左ラベル(固定231px) + 右入力。行送りは padding-bottom で確保 */
  .ct-row{
    display:grid;
    grid-template-columns:231px 603px;
    align-items:start;gap:0;
    padding-bottom:47px;   /* 原稿: 行送り140px→CSS93(=入力46+間47) */
  }
  .ct-row:last-of-type{padding-bottom:0}
  .ct-label{padding-top:9px;align-items:flex-start}
  .ct-name{font-size:16px;line-height:1.5;padding-top:5px}
  .ct-name small{font-size:12px}
  .badge{width:61px;height:37px;font-size:14px;border-radius:9px}  /* 原稿実測 92x56px→CSS61x37 */

  .ct-field{max-width:603px}
  .ct-input{font-size:15px;padding:10px 13px;line-height:1.6}   /* 原稿: 入力高60px→CSS40 */
  .ct-select{background-position:right 14px center;padding-right:42px}

  /* ラジオ/チェックは左ラベル文字と高さを揃える(先方指摘: ボタンが少し上にきている)。
     base .ct-radios(後方定義) に勝つため .ct-field 付きで詳細度を上げる */
  .ct-field .ct-radios{padding-top:10px}
  .ct-duo{gap:18px}
  .ct-zip-a{width:93px}
  .ct-zip-b{width:93px}
  .ct-tel-box{width:93px}
  .ct-tel{gap:11px}
  .ct-sep{color:#7A7268}

  .ct-textarea{min-height:196px}   /* 原稿: 高さ193 */

  /* 送信ボタンは原稿どおりページ中央・小さめ。実測 w114 h33 中央692(=ページ中央)。
     .ct-wrap の +20px を相殺してページ中央に戻す */
  .ct-submit-wrap{position:relative;left:-20px;margin:18px 0 10px;justify-content:center}
  .ct-submit{font-size:15px;padding:3px 26px;letter-spacing:.42em;text-indent:.42em;border-radius:7px}

  .ct-thanks{max-width:760px;padding:60px 16px 30px}
  .ct-thanks__leaf{width:110px}
  .ct-thanks__title{font-size:30px}
  .ct-thanks__body{font-size:16px;line-height:2.4}
}

/* 中幅では width:min(maxW, calc(50% - CH)) が左右余白に応じて装飾を自動縮小し、
   画面内に収めつつ本文(中央830px列)に被らせない(2026-06-26 非表示→縮小に変更)。
   余白が尽きると width が 0 に収束し自然に消える。SP(<860)は base の小サイズを維持。 */

/* =========================================================
   ラジオ / 補足テキスト(お申し込みフォームで使用) 2026-06-25
   ========================================================= */
.ct-radios{display:flex;gap:26px;flex-wrap:wrap;align-items:center;padding-top:4px}
.ct-radio{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:14px;color:var(--ink)}
.ct-radio input{accent-color:var(--aqua-btn);width:17px;height:17px;cursor:pointer;margin:0}
.ct-hint{display:inline-block;margin-top:7px;font-size:12px;color:var(--ink-soft);letter-spacing:.02em}