/* ========================================================================= フォーム（/download/ /contact/）と完了ページ（/download/thanks/ /contact/thanks/） 正典: 資料ダウンロードフォーム / お問い合わせフォーム / 資料ダウンロード完了 / お問い合わせ完了（.dc.html） 値はプロトタイプの inline style を転記。アクセントは既定の赤（data-plan なし）。 1. ページの骨組み（フッターを最下部に寄せる） 2. パンくず（リンク先・ラベルは form.js が ?from= / referrer から差し替える） 3. フォーム（カード・入力欄・同意・reCAPTCHA・送信ボタン） 4. 完了ページ ========================================================================= */ /* フォーム系ページだけで使う色・影（共有トークンに無いもの） */ .page--form { --form-line: #eeeef1; /* カード・画像の枠 */ --form-shadow: 0 16px 48px rgba(20, 22, 30, .08); /* カード・画像の影 */ --form-agree-bg: var(--border-inner); /* 同意ボックス #f0f0f2 */ --form-agree-text: #2a2c34; /* 「同意する」 */ --form-note: #9b9ea8; /* フォーム下の注記 */ } /* ------------------------------------------------------------------------- 1. 骨組み: プロトタイプのページルート（min-height:100vh / flex 縦並び / main が伸びる） ------------------------------------------------------------------------- */ .page--form { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); } .page--form > main { flex: 1; background: var(--surface); } /* ------------------------------------------------------------------------- 2. パンくず ------------------------------------------------------------------------- */ .form-crumb { max-width: 1200px; margin: 0 auto clamp(28px, 4vw, 44px); padding: 0 clamp(18px, 5vw, 48px); font-size: 12px; color: var(--ink-faint); } /* タップ領域 44px（padding＋負の margin。行の高さは変えない） */ .form-crumb a { display: inline-block; padding: 13px 4px; margin: -13px -4px; color: var(--ink-faint); text-decoration: none; transition: color .2s; } .form-crumb__sep { margin: 0 8px; } .form-crumb b { color: var(--ink-body); font-weight: 700; } @media (hover: hover) { .form-crumb a:hover { color: var(--accent); } } /* ------------------------------------------------------------------------- 3. フォーム ------------------------------------------------------------------------- */ .form-main { padding: 14px 0 clamp(40px, 6vw, 72px); } .form-shell { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 48px); } /* 資料請求: 左=資料の表紙 / 右=フォーム（1カラムが 320px を切ると縦積み） */ .form-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(28px, 4vw, 48px); align-items: center; } /* お問い合わせ: 中央1カラム */ .form-single { max-width: 560px; margin: 0 auto; } /* 資料の表紙（プロトタイプの image-slot id="form-visual"。slot state なし＝src の cover-2026.png） */ .form-visual { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--form-line); border-radius: 20px; box-shadow: var(--form-shadow); background: var(--surface); } .form-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .form-card { background: var(--surface); border: 1px solid var(--form-line); border-radius: 20px; padding: clamp(24px, 3.5vw, 38px); box-shadow: var(--form-shadow); display: flex; flex-direction: column; gap: 20px; } .form-card__title { font-size: clamp(18px, 2vw, 22px); font-weight: 900; letter-spacing: -.01em; color: var(--ink-heading); margin: 0 0 4px; text-align: center; } .form-card__lead { font-size: 13px; color: var(--ink-secondary); line-height: 1.8; margin: 0 0 4px; text-align: center; } /* 姓 / 名 */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* 入力欄（ラベル非表示・placeholder で項目名） */ .f-input { width: 100%; font-family: inherit; font-size: 14.5px; line-height: normal; color: var(--ink-body); padding: 13px 15px; border: 1.5px solid var(--input-border); border-radius: 11px; background: var(--surface); outline: none; transition: border-color .2s, box-shadow .2s; } .f-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); } /* textarea は display を既定（inline-block）のまま。block にするとベースライン分の隙間が消えて プロトタイプより下が詰まる */ .f-input--area { resize: vertical; min-height: 132px; line-height: 1.7; } .f-link { color: var(--accent); text-decoration: underline; cursor: pointer; transition: color .2s; } @media (hover: hover) { .f-link:hover { color: var(--accent-hover); } } /* 同意 ＋ reCAPTCHA */ .form-agree-group { display: flex; flex-direction: column; gap: 16px; } .form-agree { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--form-agree-bg); border-radius: 10px; padding: 16px 18px; } .form-agree__text { font-size: 13px; color: var(--ink-secondary); line-height: 1.75; margin: 0; } .form-agree__check { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; font-size: 14px; color: var(--form-agree-text); white-space: nowrap; } .form-agree__check input { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; } /* reCAPTCHA v2（チェックボックス）。デザインの「私はロボットではありません」ダミー枠（304×74）を Google の本物のウィジェット（304×78 固定の iframe）に置き換えている。form.js が explicit 描画する。 ここでは枠の確保と中央寄せだけ（枠線・背景はウィジェット側） */ .recaptcha { align-self: center; width: 304px; height: 78px; } /* 送信ボタン（プロトタイプは