/* ==========================================================
   MATERA LIAN 申し込みフォーム CSS v12（整理・統合版）
   ----------------------------------------------------------
   ★使い方★
   今お使いのフォームCSSを丸ごと削除し、この内容だけに
   置き換えてください。（v11＋その後の追記を1本に整理したものです）

   ▼ v12 での整理内容
   ・散らかっていた Amazon 関連の追記（★2b／★2c）を削除し、
     正しい内容を「2. Amazon」セクションに一本化
       - ログインボタン(#AmazonPayButtonAll) … 中央・最大320px
       - 予備の灰色ボタン(#AmazonPayButton)  … 非表示
   ・申し込むボタンを「黒」→「サイトのゴールド」に変更（11章）
   ・その他（入力欄・見出し・セレクト等）は v11 のまま
   ========================================================== */


/* ==========================================================
   色とサイズの一括管理
   :root は「ページ全体」の意味。ここに置いた変数は
   どこからでも var(--gold) の形で呼び出せます。
   ========================================================== */
:root {
  --form-bg: #faf6ee;   /* 生成りの背景 */
  --ink:     #252525;   /* 墨色(文字・下線) */
  --ink-sub: #8a8272;   /* 補足文字のグレージュ */
  --line:    #cfc6b2;   /* 待機中の下線(淡い) */
  --gold:    #c9a34e;   /* アクセントの金 */
  --gold-lt: #e8cd84;   /* 明るい金（グラデ上側） */
  --gold-dk: #b8923f;   /* 深い金（グラデ下側・ホバー） */
  --field-h: 52px;      /* 入力欄の高さ */
  --row-gap: 48px;      /* 項目間の余白 */
}


/* ==========================================================
   1. アンカーリンク対応
   ・scroll-behavior:smooth … ページ内ジャンプを滑らかに
   ・scroll-margin-top       … 着地時にフォーム頭へ余白を確保
   ========================================================== */
html {
  scroll-behavior: smooth;
}
#lp-form {
  scroll-margin-top: 24px;
}


/* ==========================================================
   2. Amazon 決済まわり
   ----------------------------------------------------------
   実際のecforceの構造に合わせています。
   ・ログインボタン本体 … #AmazonPayButtonAll
     （外枠 #AmazonPayOneClickOrderArea。中身はShadow DOM）
   ・予備の灰色ボタン    … #AmazonPayButton（標準では非表示の要素。
     申し込むボタンの下に「不完全なボタン」として出るため隠す）
   ========================================================== */

/* ログインボタン ── 外枠を中央寄せ（土台） */
#lp-form #AmazonPayOneClickOrderArea,
.Cta_form #AmazonPayOneClickOrderArea {
  text-align: center !important;
}
/* ログインボタン本体 ── 最大320px・中央・左寄せ解除 */
#lp-form #AmazonPayButtonAll,
.Cta_form #AmazonPayButtonAll {
  max-width: 320px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  float: none !important;
}
/* 予備の灰色ボタン ── 非表示 */
#lp-form #AmazonPayButton,
.Cta_form #AmazonPayButton {
  display: none !important;
}


/* ==========================================================
   0. 土台リセット ── 幅ズレの原因(box-sizing混在)を断つ
   ========================================================== */
.Cta_form *,
#lp-form *,
#lp-form *::before,
#lp-form *::after {
  box-sizing: border-box !important;
}


/* ==========================================================
   3. フォーム全体 ＋ 上下の境界線
   #lp-form はフォーム本体。::before(先頭) と ::after(末尾) で
   中央が濃く両端に消える金のラインを敷いています。
   ========================================================== */
#lp-form {
  display: block;
  position: relative;      /* 線を配置する基準点 */
  background: var(--form-bg);
  padding: 56px 0 72px;
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
}
#lp-form::before,
#lp-form::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
#lp-form::before { top: 0; }     /* 上端＝ここから購入フォーム */
#lp-form::after  { bottom: 0; }  /* 下端＝ここまで */

/* 外側の枠(.Cta_form)が存在する場合はフラットに保つ */
.Cta_form {
  background: var(--form-bg) !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 24px 24px 40px !important;
  text-align: left;
}
@media (min-width: 769px) {
  .Cta_form {
    padding: 32px 64px 48px !important;
  }
}


/* ==========================================================
   4. 見出し ── 大きく、静かに
   ========================================================== */
#lp-form h4,
.Cta_form h4 {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin: 72px 0 12px;
  padding: 0;
  border: none;
  line-height: 1.5;
}
#lp-form p,
.Cta_form > p {
  font-size: 0.92rem;
  color: var(--ink-sub);
  line-height: 2.1;
  letter-spacing: 0.04em;
  margin: 8px 0;
}


/* ==========================================================
   5. 表組み → 縦積み（整列の土台）
   ========================================================== */
#lp-form table,
#lp-form tbody,
#lp-form tr,
#lp-form th,
#lp-form td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}
#lp-form table { margin: 16px 0 0; }
#lp-form tr    { padding: 0; margin-bottom: var(--row-gap); }

/* ラベル ── 明朝体でひと回り大きく */
#lp-form th {
  padding: 0 0 6px !important;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--ink);
  white-space: normal !important;
}
#lp-form th b,
#lp-form th strong { font-weight: 400; }
#lp-form td {
  padding: 0 !important;
  font-size: 1rem;
  line-height: 1.9;
}


/* ==========================================================
   6. 「必須」表記 ── 金色の小さな文字
   ========================================================== */
#lp-form th .required,
#lp-form th .must,
#lp-form th span,
#lp-form th font {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--gold) !important;
  background: transparent !important;
  border: none !important;
  padding: 0;
  margin-left: 10px;
  vertical-align: 2px;
}


/* ==========================================================
   7. 入力欄 ── 「箱」ではなく「下線」
   ========================================================== */
#lp-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]) {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--field-h) !important;
  padding: 0 2px !important;
  margin: 0 !important;
  font-size: 17px !important;   /* 16px以上=iPhoneズーム防止 */
  font-family: inherit;
  letter-spacing: 0.04em;
  color: var(--ink) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* メッセージ欄(textarea)は箱型を維持 */
#lp-form textarea {
  display: block;
  width: 100% !important;
  min-height: 160px;
  height: auto !important;
  padding: 16px !important;
  margin: 0 !important;
  font-size: 17px !important;
  font-family: inherit;
  line-height: 1.9;
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* 短くあるべき欄（郵便番号・セキュリティコード） */
#lp-form input[name*="zip"],
#lp-form input[id*="zip"],
#lp-form input[name*="postal"] {
  display: inline-block !important;
  width: 11em !important;
  vertical-align: middle;
}
#lp-form input[name*="security"],
#lp-form input[name*="cvv"],
#lp-form input[id*="security"] {
  display: inline-block !important;
  width: 8em !important;
}
/* ゴーストテキスト（例：山田 花子） */
#lp-form input::placeholder,
#lp-form textarea::placeholder {
  color: #b9b19e !important;
  font-size: 15px !important;
  letter-spacing: 0.05em;
}


/* ==========================================================
   8. 入力中の欄の強調（下線が金色に）
   ========================================================== */
#lp-form input:focus,
#lp-form select:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 1px 0 0 var(--gold) !important;
}
#lp-form textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px var(--gold) !important;
}


/* ==========================================================
   9. セレクトボックス ── 下線＋右端に小さな▼
   ========================================================== */
#lp-form select {
  display: inline-block;
  height: var(--field-h) !important;
  width: auto;
  min-width: 9em;
  max-width: 100%;
  padding: 0 36px 0 2px !important;
  margin: 0 !important;
  font-size: 17px !important;
  font-family: inherit;
  letter-spacing: 0.04em;
  color: var(--ink) !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 10px) 55% !important;
  background-size: 6px 6px !important;
  background-repeat: no-repeat !important;
}
/* 行の中で1つだけのセレクトは全幅に */
#lp-form td > select:only-child {
  display: block;
  width: 100% !important;
}
/* セレクトが並ぶ行（生年月日など）は横並びで均等割り */
#lp-form td:has(select + select) {
  display: flex !important;
  gap: 20px;
  align-items: center;
}
#lp-form td:has(select + select) select {
  flex: 1;
  min-width: 0;
}


/* ==========================================================
   10. ラジオボタン・チェックボックス
   ========================================================== */
#lp-form input[type="radio"],
#lp-form input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--ink);
  cursor: pointer;
  vertical-align: -4px;
  margin: 0 8px 0 0 !important;
}
#lp-form td label {
  margin: 4px 24px 4px 0;
  cursor: pointer;
  display: inline-block;
  line-height: 2.2;
  font-size: 1rem;
}


/* ==========================================================
   11. 利用規約の同意ブロック
   ========================================================== */
#lp-form .agreement,
#lp-form p:has(input[type="checkbox"]),
#lp-form div:has(> input[type="checkbox"]) {
  background: transparent !important;
  border: none !important;
  padding: 0;
  margin: 56px 0 0;
  font-size: 0.9rem;
  line-height: 2.1;
  color: var(--ink);
}
#lp-form a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}
#lp-form a:hover {
  color: var(--gold);
  opacity: 1;
}


/* ==========================================================
   12. 申し込むボタン ── サイトのゴールド（★SVG埋め込み方式）
   ----------------------------------------------------------
   「申し込む」の文字をSVG画像としてCSSの背景に敷いています。
   文字ではなく「文字の絵」なので、ボタンが文字データを
   持っていなくても必ずラベルが表示されます。
   ・background-color = 下地の金
   ・background-image = 「申し込む」のSVG（濃茶文字） ＋ 金のグラデ
   ・color:transparent = 本物の文字が入っていても透明にし二重表示を防ぐ保険
   ========================================================== */
#lp-form input[type="submit"],
#lp-form button[type="submit"] {
  display: block;
  width: 100% !important;
  max-width: 320px;
  height: 64px !important;
  margin: 56px auto 0;
  color: transparent !important;
  background-color: #e3c67e !important;   /* 明るめの金 */
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64'%3E%3Ctext x='160' y='35' fill='%23332a12' font-size='19' font-family='serif' text-anchor='middle' dominant-baseline='central' letter-spacing='7'%3E%E7%94%B3%E3%81%97%E8%BE%BC%E3%82%80%3C/text%3E%3C/svg%3E"),
    linear-gradient(180deg, #f4e4ad, #e3c67e 55%, #cfa955) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
  background-size: 320px 64px, 100% 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 20px rgba(160,120,40,.24) !important;
  cursor: pointer;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* ホバー時は少しだけ深い金に（文字はそのまま） */
#lp-form input[type="submit"]:hover,
#lp-form button[type="submit"]:hover {
  background-color: #d5b46a !important;
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64'%3E%3Ctext x='160' y='35' fill='%23332a12' font-size='19' font-family='serif' text-anchor='middle' dominant-baseline='central' letter-spacing='7'%3E%E7%94%B3%E3%81%97%E8%BE%BC%E3%82%80%3C/text%3E%3C/svg%3E"),
    linear-gradient(180deg, #ecd794, #d5b46a 55%, #bd9a44) !important;
}
/* 画像タイプの申込ボタンの場合（こちらは元の画像のまま） */
#lp-form input[type="image"] {
  display: block;
  width: 100% !important;
  max-width: 320px;
  height: auto !important;
  margin: 56px auto 0;
  cursor: pointer;
}


/* ==========================================================
   13. 補足の小さな文字・説明画像
   ========================================================== */
#lp-form small,
#lp-form .note,
#lp-form td .example {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--ink-sub);
  letter-spacing: 0.04em;
  line-height: 2;
  margin-top: 8px;
}
#lp-form td img {
  max-width: 220px;
  width: auto;
  margin-top: 12px;
  border: 1px solid var(--line);
}


/* ==========================================================
   14. 広い画面での上限 ── 読みやすい幅に整える
   ========================================================== */
@media (min-width: 769px) {
  #lp-form table,
  #lp-form h4,
  .Cta_form h4,
  #lp-form p {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }
  #lp-form tr {
    margin-bottom: 56px;
  }
}


/* ==========================================================
   15. アクセシビリティ配慮
   「視差効果を減らす」設定の方には、滑らかスクロールも
   含めてアニメーションを止めます。
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .Cta_form *,
  #lp-form * {
    transition: none !important;
    animation: none !important;
  }
}