@charset "UTF-8";
/*
 *  page-catalog.css — /catalog（資料請求）専用（T309）
 *  読み込みは catalog/index.twig のみ（/form には影響しない）。page-form-ui.css の後に読み込んで上書きする。
 *  注意: data-pfwform-* が付く要素（th / td など）に display を指定しない（page-form-ui.css 冒頭と同じ理由）。
 */

/* ---------- フォームの見出し ---------- */
.cat-form-ttl {
  margin: 0 0 28px;
  text-align: center;
  font-size: 26px;
  line-height: 1.5;
  font-weight: 700;
  color: #332f2d;
  letter-spacing: 0.08em;
}
.cat-form-ttl .en {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #b1774c;
}
.cat-form-ttl { margin-top: 8px; }

/* ---------- ヒーロー ---------- */
.cat-hero {
  margin: 0 0 56px;
  padding: 56px 20px 60px;
  background: linear-gradient(180deg, #f7f1e8 0%, #fbf8f3 100%);
  border-radius: 0 0 24px 24px;
}
.cat-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}
.cat-hero-copy { flex: 1 1 52%; min-width: 0; }
.cat-eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 0.35em;
  color: #b1774c;
  font-weight: 700;
}
.cat-hero-ttl {
  margin: 0 0 22px;
  font-size: 38px;
  line-height: 1.55;
  font-weight: 700;
  color: #2f2a27;
  letter-spacing: 0.05em;
}
.cat-hero-lead {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 2;
  color: #4a4441;
}
.cat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat-badges li {
  padding: 8px 16px;
  border: 1px solid #b1774c;
  border-radius: 999px;
  background: #fff;
  color: #8a5530;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.cat-hero-img { flex: 0 1 44%; text-align: center; }
.cat-hero-img img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 18px rgba(60, 40, 20, 0.22));
}

/* ---------- フォーム部分 ---------- */
.form-Box .form-list { font-size: 15px; line-height: 1.9; }
.form-Box table { border-collapse: separate; border-spacing: 0; }
.form-Box table th { font-size: 17px; font-weight: 700; color: #2f2a27; }
.form-Box table td input[type="text"],
.form-Box table td input[type="tel"] { font-size: 17px; padding: 12px 14px; box-sizing: border-box; }
.form-Box .opts > label { font-size: 16px; padding: 8px 10px; }
.form-Box .form-note { font-size: 14px; }

/* プライバシーポリシーは折りたたむ（全文は開くと読める） */
.cat-privacy { max-width: 860px; margin: 0 auto 20px; border: 1px solid #d9cfc2; border-radius: 8px; background: #fff; }
.cat-privacy summary {
  padding: 14px 18px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: #5a524c;
}
.cat-privacy[open] summary { border-bottom: 1px solid #e3d9cc; }
.cat-privacy .priv-text { margin: 0; border: 0; height: 240px; }

.priv { margin-bottom: 28px; }
.priv .form-check-label { font-size: 17px; font-weight: 700; }

/* 送信ボタン */
.form-Box .btnArea p { text-align: center; }
.form-Box .btnArea .cat-btn {
  /* display は指定しない（data-pfwform-* の表示切替を上書きして確認用ボタンが入力画面に出る） */
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 20px 24px;
  border: 0;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  cursor: pointer;
}
.form-Box .btnArea .cat-btn-main {
  background: #b1774c;
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 85, 48, 0.3);
}
.form-Box .btnArea .cat-btn-main:hover { background: #9c6640; }
.form-Box .btnArea .cat-btn-sub {
  background: #fff;
  color: #5a524c;
  border: 1px solid #c4bcb3;
  box-shadow: none;
  font-size: 17px;
}
.from-btn-02 p + p { margin-top: 16px; }

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px) {
  .cat-form-ttl { font-size: 21px; margin-bottom: 20px; }
  .cat-hero { margin: 0 0 36px; padding: 32px 16px 36px; border-radius: 0 0 16px 16px; }
  .cat-hero-inner { flex-direction: column-reverse; gap: 20px; }
  .cat-hero-copy { text-align: center; }
  .cat-hero-ttl { font-size: 25px; margin-bottom: 16px; }
  .cat-hero-lead { font-size: 15px; text-align: left; }
  .cat-badges { justify-content: center; gap: 8px; }
  .cat-badges li { font-size: 14px; padding: 7px 12px; }
  .cat-hero-img { flex-basis: auto; width: 72%; }
  .form-Box table th { font-size: 16px; }
  .form-Box .btnArea .cat-btn { font-size: 18px; padding: 18px 16px; }
}