/* =========================================================
   contact.css — コンタクトページ（contact.html）固有スタイル
   TOP（index.html）のデザイン言語を継承:
     ・ビビッドなカラー面（ライム/イエロー/ピンク/パープル/ダーク）
     ・太いウェイトと詰めたレタースペースの見出し
     ・中央寄せカードを使わない非対称レイアウト
   共通部分（リセット・ブランドロゴ・MENUドロワー）は style.css を参照。
========================================================= */

/* TOPと同じパレットを変数化して一元管理する */
:root {
  --c-lime:   #b5ff00;
  --c-yellow: #ffea00;
  --c-pink:   #ff2a85;
  --c-purple: #bd3eff;
  --c-dark:   #1e1e1e;
}

/* コンタクトページはスクロール禁止を解除し、内容が縦に伸びても閲覧可能にする
   （TOPは全画面固定だが、フォームはモバイルで縦に伸びるため） */
.contact-page {
  overflow-y: auto;
}

/* 画面全体のステージ。コンテンツ塊を中央に配置し、左右の余白を均等に取る。
   装飾ブロックはこの塊を基準に、Contentの入力欄の右端近くへ隣接させる。 */
.contact-stage {
  position: relative;
  min-height: 100dvh;
  width: 100vw;
  padding: 72px 0 96px;
  display: flex;
  flex-direction: column;
  align-items: center;      /* 中央寄せ */
  justify-content: center;  /* 天地中央 */
  overflow: hidden;
}

/* コンテンツ塊（招待文＋フォーム＋ボタン）を中央に置くためのラッパー。
   装飾ブロックの絶対配置の基準にもなる。 */
.contact-inner {
  position: relative;
  width: min(920px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =========================================================
   装飾カラーブロック（意味を持たない世界観演出）
   画面の右上に、ライム（前面）とイエロー（背面・左下へずらす）を
   重ね置きし、TOPのパレットを反復する。ステージ基準で絶対配置。
========================================================= */
.deco {
  position: absolute;
  pointer-events: none;
}
/* ライム: フォーム（色面）の右上角に接する。イエローより背面 */
.deco-lime {
  top: 0;
  right: 0;
  width: 210px;
  height: 175px;
  background: var(--c-lime);
  z-index: 0;
}
/* イエロー: ライムの左下へずらして重ねる。ライムより前面。
   ライムとの重なりを少し深くするため右へ寄せる（rightを詰める）。 */
.deco-yellow {
  top: 90px;
  right: 112px;
  width: 210px;
  height: 120px;
  background: var(--c-yellow);
  z-index: 1;
}

/* 招待メッセージ */
.contact-lead {
  position: relative;
  z-index: 2;
  max-width: 640px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-dark);
}
/* メールアドレスのリンク: ピンクの下線でアクセント */
.mail-link {
  color: var(--c-dark);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 3px solid var(--c-pink);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mail-link:hover {
  color: var(--c-pink);
}

/* フォーム本体。幅は画面いっぱいに取り、入力欄が色面から右へはみ出す余地を残す。
   ピンク面と紫面を段差なく縦連結させるため、slab間の隙間は作らない。 */
.contact-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* =========================================================
   カラー面（slab）: ラベルを乗せる背景の色ブロック
   入力欄はこの面から右へはみ出す（ラフの構図を再現）。
========================================================= */
/* カラー面: コンテンツ塊の左〜4割で止める帯。入力欄はこの右端を突き抜ける。
   ピンク面(Name/Mail)と紫面(Content)は段差なく縦に連結させる。 */
.field-slab {
  position: relative;
  width: 42%;
  min-width: 240px;
  padding: 22px 0 22px 30px;
}
/* ピンク面は下側、紫面は上側の余白を詰めて連結を自然にする */
/* ピンク面のみ右端を約2cm(76px)短くする */
.slab-pink   { background: var(--c-pink); padding-bottom: 26px; width: calc(42% - 76px); }
.slab-purple { background: var(--c-purple); padding-top: 24px; }

/* 各フィールド行: ラベル（左・面の上）＋入力欄（右・面からはみ出す）。
   overflow: visible で入力欄が色面の外へせり出すのを許可する。 */
.field {
  position: relative;
  z-index: 3; /* 装飾ブロック（deco: z-index 0〜1）より前面に置き、入力欄を装飾の上に表示する */
  display: flex;
  align-items: center;
  gap: 40px;
  overflow: visible;
}
.field + .field {
  margin-top: 18px;
}

/* ラベル: 白文字・太字。ラフの Name/Mail/Content の見え方 */
.field-label {
  flex-shrink: 0;
  width: 96px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* 必須マーク: ラベルの右隣に添える。白文字にして色面の上でも明快に見せる */
.required-mark {
  margin-left: 5px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

/* 入力欄のラッパー: 色面の右端を突き抜けて右へ伸ばす。
   Name/Mail はこの幅で右端を揃える。Content はさらに長くする（下で個別指定）。 */
.field-input-wrap {
  position: relative;
  flex-shrink: 0;
  width: 400px;
  max-width: 48vw;
}

/* 入力欄本体: 白に近い面＋濃い枠線。青やグラデを使わずTOPの硬質な質感に合わせる */
.field-input {
  width: 100%;
  padding: 13px 18px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--c-dark);
  background: #fafafa;
  border: 3px solid var(--c-dark);
  border-radius: 0; /* 角丸を使わず直線的に＝AIテンプレ感を排除 */
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
/* プレースホルダー（入力例）: 薄いグレーで実入力と区別する */
.field-input::placeholder {
  color: #9a9a9a;
  opacity: 1; /* Firefoxのデフォルト半透明を打ち消す */
}
/* フォーカス時: ライムのリングで強調（transform/opacityではなくbox-shadowだが色のみ変化） */
.field-input:focus {
  border-color: var(--c-dark);
  box-shadow: 0 0 0 4px var(--c-lime);
}
/* 入力エラー時: ピンクの枠で警告 */
/* 入力エラー時: 背景のビビッドピンクと区別できるよう素直な赤枠にする */
.field-input.is-invalid {
  border-color: red;
}

/* 本文（textarea）: Content 面は縦に大きく取る */
.field-message {
  align-items: flex-start;
}
.field-message .field-label {
  padding-top: 12px;
}
/* Content の入力欄は Name/Mail より横に長くする（ラフの構図） */
.field-message .field-input-wrap {
  width: 560px;
  max-width: 62vw;
}
.field-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
}

/* フィールド単位のエラーメッセージ。
   絶対配置で入力欄の直下に置き、通常フローの高さに含めない。
   これによりラベルと入力欄が上下中央で揃う（下揃えになるのを防ぐ）。 */
/* エラーメッセージ: 入力欄の下に、間隔を詰めて表示する。
   黄色の背景に赤文字で、色面の上でも視認できるようにする。 */
.field-error {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  padding: 1px 6px;
  font-size: 0.72rem;
  font-weight: 400;
  color: #e00000;
  background: var(--c-yellow);
}
/* メッセージが空のときは黄色帯を出さない（背景だけ残るのを防ぐ） */
.field-error:empty {
  display: none;
}

/* 送信結果メッセージ */
.form-result {
  position: relative;
  z-index: 2;
  min-height: 1.4em;
  margin-top: 14px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.form-result.is-success { color: #12a150; }
.form-result.is-error   { color: var(--c-pink); }

/* =========================================================
   アクションボタン（キャンセル／送信）
   TOPのパレットに統一。送信=ダーク（ホバーでライム）、
   キャンセル=アウトライン。青は使わない。
========================================================= */
/* ボタン列: 色面のすぐ下に配置。幅をContentの入力欄の右端に合わせ、
   キャンセル=左端（紫面の左端）、送信=右端（Content入力欄の右端）に揃える。
   幅の内訳: 色面padding-left(30px)＋ラベル(96px)＋gap(16px)＋textarea幅(560px) = 702px */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 702px;
  max-width: 100%;
  margin-top: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}

/* キャンセル: アウトラインで控えめに */
.btn-cancel {
  color: var(--c-dark);
  background: transparent;
  border: 3px solid var(--c-dark);
}
.btn-cancel:hover {
  transform: translateY(-2px);
  background: var(--c-dark);
  color: #fff;
}

/* 送信: ダーク塗り → ホバーでライム反転（TOPのcontact-btnと同系の遊び） */
.btn-submit {
  color: #fff;
  background: var(--c-dark);
  border: 3px solid var(--c-dark);
}
.btn-submit:hover {
  transform: translateY(-2px);
  background: var(--c-lime);
  color: var(--c-dark);
}

/* 送信中（ローディング）: opacityで無効感を出し二重送信を防止 */
.btn-submit.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

/* =========================================================
   スマホ専用レイアウト（contact-mobile）
   PC用（.contact-inner）とはDOMを分離。
   背景レイヤー（.m-bg: 色面＋装飾帯）とフォームレイヤー（.m-fields）を
   別要素にし、入力欄が装飾帯の上に確実に重なるようにする。
========================================================= */

/* PC表示時（デフォルト）はスマホ専用ブロックを隠す */
.contact-mobile {
  display: none;
}

/* --- 768px以下: PC用を隠し、スマホ専用を表示 --- */
@media (max-width: 768px) {

  /* PC用フォームを非表示 */
  .contact-inner {
    display: none;
  }

  /* ステージは上詰め・左右余白なし */
  .contact-stage {
    padding: 64px 0 90px;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* スマホ専用ブロックを表示 */
  .contact-mobile {
    display: block;
    width: 100%;
  }

  /* 招待文（左右に余白） */
  .m-lead {
    padding: 0 20px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.7;
    color: var(--c-dark);
  }

  /* --- 段（上段=Name/Mail, 下段=Content） --- */
  .m-block {
    position: relative;   /* 背景レイヤーの絶対配置基準 */
  }
  .m-block + .m-block {
    margin-top: 0;        /* 段差なく縦連結 */
  }

  /* --- 背景レイヤー（最背面 z-index:0） --- */
  .m-bg {
    position: absolute;
    inset: 0;             /* 段いっぱいに広げる */
    z-index: 0;
    display: flex;        /* 色面(70%) + 装飾帯(30%) を横並び */
  }
  .m-bg-color {
    display: block;
    height: 100%;
  }
  /* 色面70% / 装飾帯30% */
  .m-bg-pink,
  .m-bg-purple { width: 70%; }
  .m-bg-lime,
  .m-bg-yellow { width: 30%; }

  .m-bg-pink   { background: var(--c-pink); }
  .m-bg-purple { background: var(--c-purple); }
  .m-bg-lime   { background: var(--c-lime); }
  .m-bg-yellow { background: var(--c-yellow); }

  /* --- フォームレイヤー（前面 z-index:1） --- */
  .m-fields {
    position: relative;
    z-index: 1;
    padding: 20px;        /* 段の内側余白 */
  }

  /* 各フィールド（ラベル＋入力欄の縦積み） */
  .m-field + .m-field {
    margin-top: 18px;
  }

  /* ラベル: 白文字・太字 */
  .m-label {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
  }

  /* 入力欄: 段の内側幅いっぱい（装飾帯の上まで跨ぐ）。
     背景レイヤーとは別要素なので重なり順を気にせず全幅に伸ばせる。 */
  .m-input {
    width: 100%;
    font-size: 16px;      /* iOSの自動ズーム防止 */
  }
  .m-textarea {
    min-height: 200px;
  }

  /* エラーメッセージ（通常フロー） */
  /* スマホのエラー: 黄色背景は付けず、色面の上で読める白文字＋影にする */
  .m-error {
    position: static;
    min-height: 1.1em;
    margin-top: 6px;
    padding: 0;
    background: none;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }

  /* 送信結果メッセージ */
  .m-result {
    padding: 0 20px;
    margin-top: 16px;
  }

  /* ボタン列（左右余白・等分割） */
  .m-actions {
    width: 100%;
    padding: 0 20px;
    gap: 12px;
    margin-top: 24px;
  }
  .m-actions .btn {
    flex: 1;
    min-width: 0;
    padding: 13px 12px;
    font-size: 0.9rem;
  }
  .m-actions .btn-cancel {
    margin-left: 0;
  }
}