/* -----------------------------------------------------------------------
   form-contact.css — アイスリダクション お問い合わせフォーム スタイル
   クラス命名は FLOCSS に準拠（l-: Layout / c-: Component / u-: Utility）
   既存 style.css との競合を避けるため、このファイルで完結する設計にする。
----------------------------------------------------------------------- */

/* ハニーポット非表示（Utility: 複数プロパティが不可分な確立ユーティリティ） */
.u-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Layout: フォームセクション全体の外枠 */
.l-contact-section {
  background: #ede6f8;
  padding: 3em 20px 5em;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Layout: フォームの幅制限・センタリング */
.l-contact-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 700px;
}

/* Project: フォーム見出し */
.p-contact-heading {
  /* font-size: 25px; */
  font-size: clamp(1px,calc(48px/700px*100vw),48px);
  font-family: 平成明朝, serif;
  margin: 0 auto 1.5em;
  text-align: center;
}

/* Component: フォーム全体メッセージ（エラー・成功） */
.c-form-message {
  padding: .8rem 1rem;
  border-radius: 4px;
  margin-bottom: 1.2rem;
  /* font-size: .95rem; */
  font-size: clamp(1px,calc(24px/700px*100vw),24px);
}

.c-form-message--success {
  background: #dff0d8;
  color: #3c763d;
  border: 1px solid #d6e9c6;
}

.c-form-message--error {
  background: #f2dede;
  color: #a94442;
  border: 1px solid #ebccd1;
}

/* Component: フォームグループ（ラベル+入力+エラーのセット） */
.c-form-group {
  margin-bottom: 1.4rem;
  display: flex;
  flex-flow: row wrap;
}

.c-form-group label,
.c-form-group > span:not(.c-required-badge):not(.c-field-error) {
  width: 100%;
  display: block;
  margin-bottom: .3rem;
  padding-left: 0.5em;
  font-weight: bold;
  /* font-size: .95rem; */
  font-size: clamp(1px,calc(24px/700px*100vw),24px);
  text-align: left;
}

/* チェックボックスグループは通常のフロー */
.c-form-group--check label {
  display: inline;
  font-weight: normal;
}

/* Component: 必須バッジ */
.c-required-badge {
  display: inline-block;
  margin-left: .3rem;
  padding: .1em .4em;
  border-radius: 3px;
  background: #d01061;
  color: #fff;
  font-size: .7rem;
  vertical-align: middle;
}

/* フォーム入力要素の上書き（既存 style.css の汎用セレクタより詳細度を上げる） */
.l-contact-inner input[type='text'],
.l-contact-inner input[type='tel'],
.l-contact-inner input[type='email'],
.l-contact-inner textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 0;
  transition: border-color .15s;
  font-family: inherit;
}

.l-contact-inner input:focus,
.l-contact-inner textarea:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, .25);
}

.l-contact-inner input[aria-invalid='true'],
.l-contact-inner textarea[aria-invalid='true'] {
  border-color: #d9534f;
}

/* Component: テキストエリア（コメント欄） */
.l-contact-inner textarea {
  resize: vertical;
  min-height: 120px;
}

/* Component: フィールドエラー */
.c-field-error {
  display: block;
  margin-top: .25rem;
  color: #d9534f;
  /* font-size: .85rem; */
  font-size: clamp(1px,calc(24px/700px*100vw),24px);
  min-height: 1.2em;
  width: 100%;
}

/* Component: 送信ボタン配置エリア */
.c-form-actions {
  margin-top: 1.6rem;
  text-align: center;
  width: 100%;
}

/* 送信ボタン（既存の input[type=submit] スタイルを継承しつつ button 要素向けに調整） */
.l-contact-inner button[type='submit'] {
  padding: 2px 32px;
  font-size: 20px;
  line-height: 2.5;
  font-weight: 600;
  color: #fff;
  background: #d01061;
  border-radius: 5rem;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  border: none;
  margin: 1em auto;
  transition: background .15s;
  font-family: inherit;
}

.l-contact-inner button[type='submit']:hover:not(:disabled) {
  background: #a11e37;
}

.l-contact-inner button[type='submit']:disabled {
  background: #aaa;
  cursor: not-allowed;
}

@media only screen and (max-width: 900px) {
  .l-contact-inner {
    padding: 0;
  }
}