/* form.css - scoped, collision-safe form styles */
:root {
  --border: 1px solid #d0d5dd;
  --radius: .5rem;
}
/* ===== c-form: ベース ===== */
.c-form{
  /* 調整しやすいようにCSS変数を定義 */
  --label-w: 17rem;           /* PC時のラベル幅 */
  --gap: 1.1rem;                /* 要素間の余白 */
  --border: #D6D9E0;
  --focus: #005da8;           /* フォーカス色 (サイト基調色に合わせて可) */
  --req: #d93025;             /* 必須アスタ色 */
  font-size: 16px;
}
@layer components {
.c-form { --gap: 1rem; --radius: .5rem; --border: 1px solid #dcdfe3; --focus: 2px solid #4da3ff; }
.c-form form { display: grid; gap: var(--gap); max-width: 720px; }
.c-form label { display: grid; gap: .375rem; font-weight: 600; }
h2.c-form{
  font-size: 1.5rem; font-weight: 700; color: #222;
  margin-bottom: 1.5rem;
}
.c-form :where(input, select, textarea) {
  width: 100%; padding: .625rem .75rem; border: var(--border, 1px solid #667085); border-radius: var(--radius--radius, .5rem);
  background: #fff; font: inherit; line-height: 1.6;
}
.c-form :where(textarea){ min-height: 8rem; resize: vertical; }
.c-form :where(input:focus, select:focus, textarea:focus){ outline: 0; box-shadow: 0 0 0 var(--focus); border-color: transparent; }
.c-form .field--inline { display: grid; gap: var(--gap); }
@media (min-width: 751px){
  .c-form .field--inline { grid-template-columns: 1fr 1fr; }
}
.c-form .help { color: #667085; font-size: .875rem; }
.c-form .error { color: #b42318; font-size: .875rem; }
.c-form .actions { display: flex; gap: .75rem; justify-content: flex-start; }
.c-form button[type=submit]{
  padding: .625rem 1rem; border: 0; border-radius: var(--radius); background:#0a7cff; color:#fff; font-weight:700; cursor:pointer;
}
.c-form button[type=submit]:hover{ filter: brightness(0.95); }
}
.c-form input,
.c-form select,
.c-form textarea {
  width: 100%;
  padding: .625rem .75rem;
  border: var(--border, 1px solid #7a7d84);
  border-radius: var(--radius, .5rem);
  background: #fff;
  font: inherit;
  line-height: 1.6;
}





/* 1行をラベル + 入力に分割（PC） */
.c-form .form-field{
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  margin-bottom: 1rem;
}

/* ラベル列 */
.c-form .form-label{
  flex: 0 0 var(--label-w);
  line-height: 1.5;
  padding-top: .55rem;         /* 入力欄とベースラインを揃える */
  font-weight: 600;
  color: #222;
}

/* 必須マークの統一 */
.c-form .form-label .required{
  color: var(--req);
  margin-left: .4rem;
  font-weight: 700;
}

.c-form .form-label label {
  display: inline-flex;         /* 横並びを強制 */
  align-items: center;          /* 縦位置揃え */
  gap: .3rem;                   /* テキストと＊の間隔 */
  white-space: nowrap;          /* 折り返し防止 */
}


/* 入力列 */
.c-form .form-data{ flex: 1; min-width: 0; }
.c-form .form-group{ width: 100%; }

/* テキスト・セレクト・テキストエリアの統一見た目 */
.c-form input.form-control,
.c-form select.form-control,
.c-form textarea.form-control,
.c-form .form-control{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: .7rem .9rem;
  /* font-size: 1rem; */
  background: #fff;
}

/* フォーカス時のわかりやすい強調 */
.c-form input:focus,
.c-form select:focus,
.c-form textarea:focus{
  outline: 2px solid transparent;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 35%, white);
}

/* テキストエリアの最低高 */
.c-form textarea{ min-height: 8rem; resize: vertical; }

/* 行内セレクト（加入人数など）を少しだけコンパクトに */
.c-form .personsrow select{ max-width: 12rem; }

/* ボタン行：ラベル列と揃える（PC） */
.c-form .buttons{
  display: flex;
  gap: .75rem;
  justify-content: flex-start;
  margin-top: .5rem;
  margin-left: calc(var(--label-w) + var(--gap));
}
.c-form .buttons .button{
  border-radius: .6rem;
  padding: .8rem 1.2rem;
}

/* ===== スマホ（～750px） ===== */
@media (max-width: 750px){
  .c-form{ --label-w: auto; }
  .c-form .form-field{ display: block; }
  .c-form .form-label{
    padding-top: 0;
    margin-bottom: .35rem;     /* ラベルの下に少し余白 */
  }
  .c-form .buttons{
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .c-form .buttons .button{
    width: 100%;
    text-align: center;
  }
}