/* ===== Google Fonts読み込み ===== */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400&display=swap');

/* =========================================================
   Contactページ共通レイアウト（Aboutと統一）
   ========================================================= */

/* ============================================
   ★1. index の scroll-snap の影響を無効化（Aboutと統一）
   ============================================ */
html, body {
  scroll-snap-type: none !important;   /* ← index の影響遮断 */
  overflow-y: auto !important;
  background: #000;
  margin: 0;
  font-family: "Helvetica Neue", sans-serif;
}

/* ============================================
   ★2. メイン構成（Aboutと共通のレイアウト）
   ============================================ */

.about-main { /* 👈 クラス名を統一 */
  width: 100%;
  max-width: 600px;
  /* Aboutに合わせて、paddingで上下余白を取るために margin: 0 auto に変更 */
  margin: 0 auto; 
  /* Aboutの padding: 120px 24px 80px; に近づける */
  padding: 120px 24px 0px; 
  color: #fff;
  box-sizing: border-box;
  text-align: left; /* Aboutのデフォルトのテキスト配置に合わせる */
}

/* ---- タイトル ---- */
.about-main h1 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-size: 40px;
  margin-bottom: 24px; /* Aboutの仕様 */
  letter-spacing: 0.05em;
  text-align: center;
}

/* ---- 説明文 (p) ---- */
.about-main p {
  font-size: 16px; /* Aboutの仕様 */
  color: #e0e0e0; /* Aboutのフォントカラーに合わせる */
  line-height: 1.8;
  margin-bottom: 1.6em; /* Aboutの仕様に合わせる */
}

/* ---- フォーム（Contact固有のスタイル） ---- */
.contact-form {
  margin-top: 40px; /* pのマージン底上げと合わせた調整 */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
}

.contact-form textarea {
  height: 120px;
  resize: vertical;
}

/* ---- 送信ボタン ---- */
.contact-form button {
  /* ★修正点：幅を制限して中央配置にする */
  display: block; /* max-widthとmargin: autoを効かせるため */
  max-width: 300px; /* Aboutページと共通の最大幅 */
  margin: 0 auto; /* 中央配置 */
  
  background: #9dc4d7;
  color: #000;
  border: none;
  padding: 12px 0;
  font-size: 14px;
  font-weight: bold;
  border-radius: 9999px;
  cursor: pointer;
  transition: opacity 0.25s ease;
  width: 100%; /* max-widthを適用しつつ、それ以下では100%になるように */
}
.contact-form button:hover {
  opacity: 0.8;
}

/* ---- 成功メッセージ ---- */
.success-message {
  margin-top: 12px;
  color: #9dc4d7;
  font-size: 14px;
}

/* ============================================
   ★3. フッター（About と統一）
   ============================================ */
/* NOTE: .footer-simpleのスタイルは style.css にもあるため、ここでは Contact 固有の記述のみ残します
      今回は Contact の footer-simple と About の footer-simple がほぼ同じため、
      About に合わせて一部削除し、共通CSSに任せます。
*/


/* ============================================
   ★4. SP レスポンシブ（Aboutの仕様に合わせる）
   ============================================ */
@media (max-width: 768px) { /* 👈 Aboutのブレークポイント 768px に変更 */
  /* 固定ヘッダー（80px）の回避措置を追加 */
  .about-main {
    margin-top: 80px;
    /* Aboutに合わせて padding-topを減らす (120px -> 40px) */
    padding: 40px 20px 60px; 
  }

  .about-main h1 {
    font-size: 28px; /* 👈 Aboutの仕様に合わせる */
  }
  
  .about-main p {
    font-size: 15px; /* 👈 Aboutの仕様に合わせる */
  }
}