@charset "utf-8";

/* =======================================

        CommonElements & TOP

======================================= */
/* ========= Theme (HERP風の落ち着いた配色) ========= */
:root{
  --bg: #f6f7f9;        /* ページの薄いグレー */
  --panel:#ffffff;      /* カード背景 */
  --text:#111827;       /* 本文 */
  --muted:#6b7280;      /* 補足 */
  --line:#e5e7eb;       /* 枠線 */
  --primary:#2563eb;    /* 主要ボタン色（ブルー） */
  --primary-weak:#e8efff; /* フォーカスリング */
  --danger:#b91c1c;
  --radius:12px;        /* 角丸 */
  --shadow:0 8px 24px rgba(0,0,0,.06); /* 柔らかい影 */
}

/* ========= Base ========= */
*,
*::before,
*::after { box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  font-family: system-ui, -apple-system, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  line-height:1.6; color:var(--text); background:var(--bg);
}

/* ========= Container ========= */
/* ★ご指定どおり：中央寄せ＆最大幅1000px */
main.container{
  max-width:1000px;
  margin:0 auto;
  padding:24px 16px 56px;
}

h1{ margin:0 0 10px; font-size:clamp(22px,3vw,28px); }
.lead{ margin:0 0 20px; color:var(--muted); font-size:14px; }
.req-mark{ color:#ef4444; }

/* ========= Form Card ========= */
.wpcf7-form{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(16px,3vw,28px);
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

/* PC時は2カラム（HERPの余白感に近い） */
@media (min-width: 768px){
  .wpcf7-form{
    grid-template-columns:1fr 1fr;
    gap:22px 28px;
  }
}
.col-span-2{ grid-column:1 / -1; }

/* ========= Field / Label / Inputs ========= */
.field{
  display:flex; flex-direction:column; gap:8px;
}

label, legend{
  font-weight:600; font-size:14px; color:#111827;
}

.field input:not([type="radio"]):not([type="checkbox"]),
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  font-size:16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

/* フォーカスリングは淡いブルー */
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-weak);
}

textarea{ resize:vertical; }
.hint{ color:var(--muted); font-size:12px; }
.error{ color:var(--danger); font-size:13px; min-height:1.2em; }

/* ========= Radios (性別) ========= */
.radios{
  display:flex; flex-wrap:wrap; gap:10px 16px;
}
.radios label{
  display:inline-flex; align-items:center; gap:8px; font-weight:500;
}
.radios input[type="radio"]{ transform:translateY(1px); }

/* ========= File (最大5枚) ========= */
/* 単体inputでもHERP風に見えるよう、枠を太めの破線に */
.field input[type="file"]{
  padding:18px;
  border:2px dashed var(--line);
  border-radius:10px;
  background:#fafafa;
  font-size:14px;
  cursor:pointer;
}

/* ファイル選択ボタン（モダンブラウザ） */
.field input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-weight:700;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.field input[type="file"]::file-selector-button:hover{
  background:#f3f4f6;
}

/* 選択済みリスト */
.file-list{
  list-style:none;
  padding:8px 12px;
  margin:6px 0 0;
  border:1px dashed var(--line);
  border-radius:10px;
  color:#4b5563; font-size:13px;
}

/* ========= Actions / Buttons ========= */
.actions{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.btn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  padding:12px 20px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  font-size:15px;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ background:#f3f4f6; }
.btn:active{ transform:translateY(1px); }
.btn.primary{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.btn.primary:hover{ filter:brightness(1.05); }

/* ========= Validation / Disabled ========= */
:disabled{ opacity:.7; cursor:not-allowed; }

/* ========= 小さな見た目合わせ（HERPの空気感） ========= */
/* ラベルと入力の間隔、段落の余白を気持ちタイトに */
.field > .hint{ margin-top:-2px; }
.field + .field{ margin-top:2px; }

/* 日付入力の高さを他と合わせる（ブラウザ差分対策） */
input[type="date"]{
  min-height:44px;
}

/* 電話・メール・住所などの長め項目は2カラムでも横幅を広く */
@media (min-width: 768px){
  #address, #message, #files, .agree, .actions{ /* id/クラスは前回HTML準拠 */
    grid-column:1 / -1;
  }
}

.actions p {
    display: flex;
}


.thanks {
    text-align: center;
}

.thanks p {
    margin-bottom: 60px;
}

.agree span a {
	text-decoration:underline
}