/* =========================
  contact.css
  - contactページだけ “フラット寄せ”
  - フォームCSSを確実に適用
========================= */

/* ページ識別（HTMLの body に page--flat を付与している前提） */
.page--flat{
  --shadow: none;
  --shadow-soft: none;
}

/* 余計な“紙ノイズ”を弱める（common.css の noise を使ってるため上書き） */
.page--flat .section--paper::after,
.page--flat .section-surface::after,
.page--flat .cta-panel::after,
.page--flat .trust-panel::after{
  opacity: .12; /* 0にしたいなら 0 に */
}

/* 影を消す（pages.css は box-shadow が多い） */
.page--flat .btn,
.page--flat .cta-panel,
.page--flat .trust-panel,
.page--flat .trust-card,
.page--flat .contact-card{
  box-shadow: none !important;
}

/* 背景の水彩感を弱めてフラットに */
.page--flat .section-surface{
  background: #fff;
}
.page--flat .section--paper{
  background: #fff;
}
.page--flat .wave{ opacity: .20; }

/* HEROの間隔だけ整える */
.contact-hero{ padding-bottom: 54px; }
.page--flat .hero-title{ margin: 0 0 8px; }
.page--flat .cta-panel{ margin-top: 16px; }

/* trust-panel：フラット枠（角丸は残す） */
.page--flat .trust-panel{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: 14px;
}
.page--flat .trust-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
}

/* ========== フォーム（ここが“効いてない”対策の本体） ========== */
.contact-card{
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: 18px;
}

.contact-form{ display:block; }

.form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 920px){
  .form-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px 16px;
  }
}

.form-row{ display:grid; gap: 6px; min-width: 0; }
.form-row--full{ grid-column: 1 / -1; }

.contact-form label{
  font-size: 13px;
  color: rgba(17,17,17,.74);
  display:flex;
  align-items:center;
  gap: 8px;
}

.req{
  font-size: 11px;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(47,127,111,.22);
  background: rgba(47,127,111,.06);
  color: rgba(17,17,17,.70);
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  font: inherit;
  outline: none;
}

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

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color: rgba(47,127,111,.45);
  box-shadow: 0 0 0 4px rgba(47,127,111,.10);
}

.note-mini{
  font-size: 12px;
  color: rgba(17,17,17,.60);
  margin: 0;
  line-height: 1.7;
}

.helper{
  margin: 6px 0 0;
  padding: 0 0 0 1.2em;
  color: rgba(17,17,17,.62);
  font-size: 12.5px;
  line-height: 1.9;
}
.helper li{ margin: 2px 0; }

.form-actions{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.consent{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 13px;
  color: rgba(17,17,17,.70);
}
.consent input{ margin-top: 3px; }

@media (max-width: 600px){
  .contact-card{ padding: 16px; }
}