/* ===========================
   contact.css — お問い合わせページ専用スタイル
   =========================== */

:root {
  --ink: #171b20;
  --muted: #66707a;
  --blue: #2547d8; /* ブランドの基調色（ヘッダーのCTAと統一） */
  --blue-dark: #1b39b8; /* hover時の濃いめ */
  --blue-soft: #5b8bff; /* グラデの明るい側・淡いアクセント */
  --required: #e0564a; /* 必須マーク。青に埋もれず「入力必須」が一目で分かる暖色を残す */
  --bg: #f4f7ff; /* ほんのり青みがかった背景でページ全体を青基調に */
  --line: rgba(23, 27, 32, 0.12);
  --font-ja: "Noto Sans JP", sans-serif;
  --font-title: "Shippori Mincho", serif;
  --font-en: "Inter", sans-serif;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ja);
  line-height: 1.7;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ┌─────────────────────────────────────────┐
   │ ヘッダーは css/style.css に共通化           │
   └─────────────────────────────────────────┘ */

/* 共通ヘッダーはトップのヒーロー演出用に2.8s遅れてフェードインする。
   フォームページでは待たせず早く表示する */
.header {
  animation-delay: 0.3s;
}

/* ┌─────────────────────────────────────────┐
   │ ページヘッダー（タイトルエリア）           │
   └─────────────────────────────────────────┘ */

.contact_hero {
  position: relative; /* 紙飛行機を絶対配置する基準 */
  overflow: hidden; /* 画面外から飛んでくる紙飛行機が横スクロールを生まないように隠す */
  padding: 16rem 2rem 3rem;
  text-align: center;
  /* 薄い青のグリッド＋淡い青グラデで、ページ冒頭から青基調を印象づける */
  background: linear-gradient(90deg, rgba(37, 71, 216, 0.05) 1px, transparent 1px), linear-gradient(0deg, rgba(37, 71, 216, 0.05) 1px, transparent 1px), linear-gradient(180deg, #eaf0ff, #f4f7ff);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}

/* 装飾：紙飛行機が左上→右下へ滑空して抜けていく（途中で減速しない1本の弧・1回）
   トップのCTAと同じ「白い紙＋折り目の筋」の質感。背景が薄いので影で浮かせて見せる。
   ── カクつき防止の肝 ──
   1本のtransformで0→50→100とキーフレームを刻むと、50%地点で一瞬減速して再加速＝カクッと見える。
   そこで横移動(外枠)と縦移動(中のsvg)を別アニメに分離。横=等速・縦=加速で、各軸は0→100の一直線補間。
   折れ目が無くなり、掛け合わせると滑らかな放物線の滑空になる（このプロジェクトの定番テク）。 */
.contact_hero_plane {
  position: absolute;
  top: 8%; /* 左上スタートの基準。ここから右下へ降りていく */
  left: 0;
  width: 5.4rem;
  height: 5.4rem;
  /* both＝待ち時間(0.4s)の間も0%の状態(画面外・透明)を先取り。forwardsだと待機中に定位置で一瞬チラ見えする */
  animation: planeGlideX 5.6s linear 0.4s both;
}

.contact_hero_plane_svg {
  display: block;
  width: 100%;
  height: 100%;
  /* 紙が宙に浮いてる影＝白い機体を薄い背景の上でも立体的に見せる肝 */
  filter: drop-shadow(0 1rem 1.6rem rgba(37, 71, 216, 0.22));
  animation: planeGlideY 5.6s ease-in 0.4s both; /* 中身は縦移動＋傾き・だんだん速く落ちる */
}

.contact_hero_plane .contact_plane_body {
  fill: url(#contactPlaneFill); /* 白→淡い青のグラデで、紙にうっすら青みと立体感（定義はsvg内のdefs） */
}

.contact_hero_plane .contact_plane_fold {
  fill: none;
  stroke: rgba(37, 71, 216, 0.45); /* 折り目の筋。半透明の青で陰影っぽく */
  stroke-width: 1;
  stroke-linejoin: round;
}

/* 横：左外→右外へ等速。フェードはここで管理（透明度はカクつきに影響しないので同居OK） */
@keyframes planeGlideX {
  0% {
    opacity: 0;
    transform: translateX(-13vw);
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(112vw);
  }
}

/* 縦：上→下へ加速して落ちる。降下に合わせ機首を52→60度へ下げる（45度で真横・それ以上で右下向き） */
@keyframes planeGlideY {
  0% {
    transform: translateY(-2rem) rotate(52deg) scale(0.88);
  }
  100% {
    transform: translateY(24rem) rotate(60deg) scale(1);
  }
}

/* ②：①の逆向き（右上→左下）。小さく・薄く・少し遅れて入れて、上の帯で①と交差させる */
.contact_hero_plane_2 {
  top: 6%;
  width: 4.4rem; /* ①(5.4rem)より小さめは保ちつつ、交差が見えるよう少し大きく */
  height: 4.4rem;
  animation: planeGlideX2 4.8s linear 0.7s both; /* 0.7s＝①(0.4s)より少し遅らせて交差点をずらす */
}

/* ②の縦＋傾きは別アニメで上書き（rotate 218→210度＝機首が左下向き＝①の鏡像） */
.contact_hero_plane_2 .contact_hero_plane_svg {
  animation: planeGlideY2 4.8s ease-in 0.7s both;
}

/* ②の横：左外→右外へ等速（舞い上がり軌道なので①と同じく左→右へ流す）。
   最大opacity 0.62で、薄さを残しつつ見えるように */
@keyframes planeGlideX2 {
  0% {
    opacity: 0;
    transform: translateX(-16vw);
  }
  12% {
    opacity: 0.62;
  }
  85% {
    opacity: 0.62;
  }
  100% {
    opacity: 0;
    transform: translateX(108vw);
  }
}

/* ②の縦：左下から舞い上がって頂点を越え、右上へ抜ける弧（飛び立つイメージ）。
   ・translateYは 16rem(低い)→ -3rem(頂点・高い)→ 1rem(少し下げて右上へ)
   ・rotateは 18→44→52度＝機首が「上向き(climb)→水平→やや下向き」と弧に沿って回る
   ・上りはease-out(減速して頂点へ)／下りはease-in(頂点から加速)＝自然な放物線。
     頂点で縦速度が0になるのは弧の頂点として自然な動きで、カクつきには見えない */
@keyframes planeGlideY2 {
  0% {
    transform: translateY(16rem) rotate(18deg) scale(0.85);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-3rem) rotate(44deg) scale(0.92);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(1rem) rotate(52deg) scale(0.95);
  }
}

.contact_kicker {
  margin: 0 0 1.4rem;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.contact_hero h1 {
  margin: 0 0 2rem;
  font-family: var(--font-title);
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.contact_hero_lead {
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1.8;
}

/* ┌─────────────────────────────────────────┐
   │ フォームセクション                        │
   └─────────────────────────────────────────┘ */

.contact_form_section {
  padding: 2rem 2rem 12rem; /* 上の余白を詰めてフォームをヒーローに寄せる（旧8rem→2rem） */
}

/* フォームを白いカードにまとめて、背景の青から浮かせる */
.contact_form_wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 5rem 5rem 5.6rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1.6rem 4rem rgba(37, 71, 216, 0.1); /* 青みのある柔らかい影で、平面的にならないように */
  border-top: 4px solid var(--blue); /* カード上端に1本だけ青のアクセント */
}

.contact_note {
  margin-bottom: 4rem;
  padding: 2rem 2.4rem;
  background: rgba(37, 71, 216, 0.06);
  border-left: 3px solid var(--blue);
  border-radius: 0 8px 8px 0;
  font-size: 1.4rem;
  color: var(--muted);
  line-height: 1.8;
}

/* フォーム全体 */
.contact_form {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

/* 各フィールドのまとまり */
.contact_field {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact_label {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}

.contact_required {
  margin-left: 0.4rem;
  color: var(--required);
  font-size: 1.3rem;
}

/* テキスト入力 */
.contact_input {
  padding: 1.4rem 1.8rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 1.5rem;
  font-family: var(--font-ja);
  color: var(--ink);
  transition: border-color 0.2s ease;
  outline: none;
}

.contact_input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 71, 216, 0.12);
}

.contact_input::placeholder {
  color: rgba(102, 112, 122, 0.5);
}

/* テキストエリア */
.contact_textarea {
  padding: 1.4rem 1.8rem;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 1.5rem;
  font-family: var(--font-ja);
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.2s ease;
  outline: none;
  line-height: 1.7;
}

.contact_textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 71, 216, 0.12);
}

.contact_textarea::placeholder {
  color: rgba(102, 112, 122, 0.5);
}

/* ラジオボタン群 */
.contact_radios {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.contact_radio {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
}

.contact_radio input[type="radio"] {
  width: 1.8rem;
  height: 1.8rem;
  accent-color: var(--blue);
  cursor: pointer;
}

/* 送信ボタン */
.contact_submit {
  align-self: center;
  padding: 1.6rem 6rem;
  background: linear-gradient(135deg, var(--blue), var(--blue-soft)); /* 単色より奥行きが出る斜めグラデ */
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-ja);
  border: none;
  border-radius: 999px; /* 角丸を強めて柔らかい印象に */
  cursor: pointer;
  letter-spacing: 0.05em;
  box-shadow: 0 0.8rem 1.8rem rgba(37, 71, 216, 0.28); /* ボタンを少し浮かせて押したくなる見た目に */
  transition:
    box-shadow 0.3s ease,
    transform 0.2s ease;
  margin-top: 1.6rem;
}

.contact_submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 1.2rem 2.4rem rgba(37, 71, 216, 0.36); /* ホバーで影を強めて浮き上がりを強調 */
}

/* 送信中は押せなくして、二重送信を防ぐ */
.contact_submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* 人には見えない「おとり」の欄（自動送信のプログラムだけが入力する） */
.contact_hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信の結果。ふだんは隠す。:target は、JSが使えないとき send.php が #sent / #error へ戻して出すため */
.contact_result {
  display: none;
  margin: 0;
  padding: 1.6rem 2rem;
  border-radius: 0 8px 8px 0;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--ink);
}

.contact_result.is_shown,
.contact_result:target {
  display: block;
}

.contact_result_ok {
  background: rgba(37, 71, 216, 0.06);
  border-left: 3px solid var(--blue);
}

.contact_result_error {
  background: rgba(224, 86, 74, 0.08);
  border-left: 3px solid var(--required);
}

/* スパム対策 */
.cf-turnstile{
  text-align: center;
}

/* ┌─────────────────────────────────────────┐
   │ レスポンシブ（スマホ）                    │
   └─────────────────────────────────────────┘ */

/* ヘッダーの白帯化はハンバーガーが出る幅（700px）に合わせる。下の768pxとはブレイクポイントが違う点に注意 */
@media screen and (max-width: 699.98px) {
  /* 幅360pxで1rem=9.6pxになるので、11px以上になるよう少し大きくする */
  .contact_kicker {
    font-size: 1.15rem;
  }

  /* スマホは透明オーバーレイをやめて、index.htmlと同じ白い横帯ヘッダーにそろえる */
  .header {
    align-items: center; /* ロゴとハンバーガーを帯の中で縦中央にそろえる */
    padding: 0.7rem 2rem; /* 白帯の上下左右の余白（上下は薄めにして帯の縦幅を抑える） */
    background: #ffffff;
    box-shadow: 0 0.2rem 1rem rgba(7, 16, 38, 0.08); /* 帯の下にうっすら影で境目を出す */
    pointer-events: auto;
  }

  /* 白帯なのでスクロールしてもロゴは消さない（PCの「スクロールで隠す」挙動を打ち消す） */
  .header.is_scrolled .logo {
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .header.is_scrolled .logo_image {
    height: 2.8rem;
  }

  /* 余白はヘッダーのpaddingが持つので、ボタン側のマージンは消す */
  .nav_toggle {
    margin: 0;
  }

  /* 箱（白背景・枠・影・blur）をやめてロゴ画像を直に白帯へのせる */
  .logo {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .logo_image {
    height: 2.8rem; /* 箱がなくなったぶん少し大きめにしてちょうどいいサイズに */
  }

  /* 開閉メニューを白帯の下・端の余白にそろえる */
  .nav_menu {
    top: 8.4rem;
    right: 1.4rem;
    left: 1.4rem;
    width: auto;
  }
}

@media (max-width: 768px) {
  /* ヒーロー */
  .contact_hero {
    padding: 10rem 2rem 4rem;
  }

  /* スマホは横幅が狭く、紙飛行機がタイトルに被るので隠す */
  .contact_hero_plane {
    display: none;
  }

  .contact_hero h1 {
    font-size: 2.8rem;
    line-height: 1.3;
  }

  .contact_hero_lead {
    font-size: 1.4rem;
  }

  /* フォームセクション */
  .contact_form_section {
    padding: 2rem 1.6rem 8rem;
  }

  /* スマホではカードの内側余白を詰める（5remだと画面が窮屈になる） */
  .contact_form_wrap {
    padding: 2.8rem 2rem 3.2rem;
    border-radius: 12px;
  }

  .contact_form {
    gap: 2.4rem;
  }

  .contact_note {
    font-size: 1.3rem;
    padding: 1.6rem 1.8rem;
  }

  .contact_input,
  .contact_textarea {
    font-size: 1.4rem;
    padding: 1.2rem 1.4rem;
  }

  .contact_submit {
    width: 100%;
    padding: 1.6rem;
    font-size: 1.5rem;
  }

}

/* 動きを減らす設定の人には紙飛行機を飛ばさず、静かに非表示にする（横・縦の両アニメを止める） */
@media (prefers-reduced-motion: reduce) {
  .contact_hero_plane,
  .contact_hero_plane_svg {
    animation: none;
  }
  .contact_hero_plane {
    display: none;
  }
}