/* 案件登録マニュアル：体験デモの deck.css に追加する部品 */

/* ---------- 右側：登録の流れ（いまここ）と「ここがポイント」 ---------- */
.hfx-steps { padding: 18px 20px 14px; border-radius: 22px; background: rgba(255,255,255,.88); border: 1px solid rgba(0,25,158,.10); box-shadow: 0 18px 44px rgba(20,30,90,.10); }
.hfx-steps-title { font-size: 16px; font-weight: 800; color: #3b4470; letter-spacing: .12em; margin-bottom: 8px; }
.hfx-stepi { margin-top: 6px; height: 34px; border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 16px; font-weight: 700; box-sizing: border-box; color: #8a90ac; }
.hfx-stepi.on { color: #3b4470; background: #f2f4fb; }
.hfx-stepi.done { color: #3b4470; background: #f2f4fb; }
.hfx-stepi.done::before { content: "✓"; color: #2f9e57; font-weight: 800; }
.hfx-stepi.now { color: #fff; background: linear-gradient(135deg, #d77bcb, #a43f98); box-shadow: 0 8px 20px rgba(164,63,152,.35); }
.hfx-stepi.now::before { content: "▶"; font-size: 12px; }
.hfx-card-h { display: inline-block; margin-bottom: 10px; padding: 4px 14px; border-radius: 999px; background: #fff3c4; color: #8a5a00; font-size: 16px !important; font-weight: 800; letter-spacing: .08em; }
.hfx-card-h::before { content: "💡 "; }
.hfx-card .t { font-size: 24px !important; }
.hfx-card .s { font-size: 18px !important; }

/* ---------- 画面のヒント（実画面の ℹ️ の文言） ---------- */
.hfx-tip { position: absolute; left: 0; top: 0; z-index: 47; width: 440px; padding: 14px 18px; border-radius: 12px; background: #141a3a; color: #fff; opacity: 0; pointer-events: none;
  box-shadow: 0 16px 40px rgba(0,0,0,.30); box-sizing: border-box; }
.hfx-tip-h { display: block; font-size: 14px; font-weight: 800; color: #f4b6eb; letter-spacing: .06em; margin-bottom: 4px; }
.hfx-tip-b { display: block; font-size: 17px; font-weight: 600; line-height: 1.65; }

/* ---------- 画面の上に重ねる説明 ---------- */
.hfx-over { position: absolute; inset: 0; z-index: 44; display: none; align-items: center; justify-content: center; background: rgba(20,28,80,.42); }
.hfx-over.on { display: flex; }
.hfx-compare { display: flex; gap: 26px; }
.hfx-cmp { width: 520px; padding: 24px 28px; border-radius: 18px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.30); box-sizing: border-box; }
.hfx-cmp .h { font-size: 20px; font-weight: 800; }
.hfx-cmp.bad .h { color: #c0392b; }
.hfx-cmp.good .h { color: #1f7a45; }
.hfx-cmp.bad { border: 3px solid #f2b8b0; }
.hfx-cmp.good { border: 3px solid #9fd8b3; }
.hfx-cmp .ttl { margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: #f5f7fc; font-size: 22px; font-weight: 800; color: #141a3a; }
.hfx-cmp p { margin: 12px 0 0; font-size: 19px !important; line-height: 1.75; color: #24294a; }
.hfx-cmp p b { color: #a43f98; font-size: inherit !important; }
.hfx-flowcard { width: 1120px; padding: 30px 34px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.30); box-sizing: border-box; }
.hfx-fc-row { display: flex; align-items: stretch; gap: 14px; }
.hfx-fc-step { flex: 1; padding: 18px 20px; border-radius: 14px; border: 2px solid #d7dcef; text-align: center; }
.hfx-fc-step.main { border-color: #a43f98; background: #fdf1fb; }
.hfx-fc-step .n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #00199E; color: #fff; font-size: 18px; font-weight: 800; }
.hfx-fc-step.main .n { background: #a43f98; }
.hfx-fc-step b { display: block; margin-top: 8px; font-size: 24px; font-weight: 800; color: #141a3a; }
.hfx-fc-step p { margin: 8px 0 0; font-size: 18px !important; line-height: 1.6; color: #3b4166; }
.hfx-fc-arrow { align-self: center; font-size: 30px; color: #5d6386; }
.hfx-fc-warn { margin-top: 20px; padding: 14px 20px; border-radius: 12px; background: #fff7e6; border: 2px solid #f5c26b; font-size: 21px; font-weight: 800; color: #6b4300; }
.hfx-fc-note { margin-top: 12px; font-size: 15px; color: #6b7280; }

/* ---------- 実画面の再現（STGのCSSにない部品・ページ内の追加スタイル） ---------- */
.hfx-page .mk-header-menu a.is-current { background: #1d2a8f !important; color: #fff !important; border-radius: 999px; }
.hfx-dealhead { display: flex; align-items: center; justify-content: space-between; }
.hfx-inc-link { display: inline-block; padding: 8px 18px; border-radius: 999px; background: #1d2a8f; color: #fff !important; font-size: 14px; font-weight: 700; }
.owner-sale-intent-banner { margin-top: 14px; border-left: 5px solid #c2185b; background: #fdeef4; border-radius: 4px; }
.owner-sale-intent-banner__label { display: flex; gap: 18px; align-items: flex-start; padding: 18px 22px; cursor: pointer; }
.owner-sale-intent-banner__checkbox { width: 24px; height: 24px; accent-color: #c2185b; margin: 2px 0 0; }
.owner-sale-intent-banner__content { display: flex; flex-direction: column; gap: 6px; }
.owner-sale-intent-banner__title { font-size: 17px; font-weight: 800; color: #222; }
.owner-sale-intent-banner__note { font-size: 13px; line-height: 1.7; color: #444; }
.hfx-tmp { display: block; font-size: 12px; color: #888; }
.hfx-page .help { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.hfx-page .help img { width: 18px; height: 18px; }
.hfx-oc { display: inline-flex; align-items: center; gap: 10px; align-self: flex-end; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: #222; }
.hfx-oc input { width: 22px; height: 22px; }
.hfx-unit { margin-left: 8px; font-size: 15px; color: #444; align-self: flex-end; }
.hfx-radios { display: flex; gap: 22px; height: 46px; align-items: center; font-size: 15px; }
.hfx-radios label { display: inline-flex; gap: 6px; align-items: center; }
.hfx-map { position: relative; height: 300px; border-radius: 8px; overflow: hidden; background: #eef0e6; border: 1px solid #d8dbe6; }
.hfx-road { position: absolute; background: #fff; box-shadow: 0 0 0 1px #d9d9d0; }
.hfx-road.h1 { left: 0; right: 0; top: 90px; height: 16px; }
.hfx-road.h2 { left: 0; right: 0; top: 210px; height: 10px; }
.hfx-road.v1 { top: 0; bottom: 0; left: 380px; width: 18px; }
.hfx-road.v2 { top: 0; bottom: 0; left: 820px; width: 10px; }
.hfx-park { position: absolute; left: 900px; top: 20px; width: 220px; height: 150px; border-radius: 10px; background: #cfe8c4; }
.hfx-mappin { position: absolute; left: 560px; top: 130px; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: #e5484d; transform: rotate(-45deg); box-shadow: 0 6px 12px rgba(0,0,0,.25); }
.hfx-mappin::after { content: ""; position: absolute; left: 11px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.hfx-dl { margin-left: 8px; font-size: 13px; color: #666; }
.hfx-photo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; min-height: 120px; align-content: start; }
.hfx-photo { height: 96px; border-radius: 8px; display: flex; align-items: flex-end; padding: 6px 8px; box-sizing: border-box; }
.hfx-photo span { padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; font-weight: 700; }
.hfx-nophoto { font-size: 14px; color: #888; }
.hfx-page .hfx-attached { margin: 0; }
.hfx-bottom-btns { justify-content: center; margin: 40px 0 360px; }

/* 右下に固定表示される期限パネル（画面の拡大縮小に連動させない） */
.hfx-floatwrap { position: absolute; right: 14px; bottom: 14px; z-index: 42; transform: scale(.87); transform-origin: 100% 100%; pointer-events: none; }
.hfx-floatwrap .proposal-deadline { position: static !important; inset: auto !important; margin: 0 !important; }

/* ---------- 説明の場面 ---------- */
.hfx-prep { margin-top: 44px; display: grid; grid-template-columns: repeat(5, 300px); gap: 22px; }
.hfx-prep-item { padding: 28px 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(0,25,158,.1); box-shadow: 0 16px 40px rgba(20,30,90,.1); text-align: left; }
.hfx-prep-item .ic { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: #fdf1fb; font-size: 28px; color: #a43f98; font-weight: 800; }
.hfx-prep-item b { display: block; margin-top: 16px; font-size: 25px; font-weight: 800; color: #141a3a; line-height: 1.4; }
.hfx-prep-item p { margin: 10px 0 0; font-size: 19px !important; line-height: 1.65; color: #3b4166; }

.hfx-bans { margin-top: 40px; display: flex; gap: 26px; }
.hfx-ban-card { position: relative; width: 470px; padding: 34px 30px 28px; border-radius: 22px; background: #fff; border: 2.5px solid #f2b8b0; box-shadow: 0 16px 40px rgba(20,30,90,.1); text-align: left; opacity: 0; box-sizing: border-box; }
.hfx-ban-card .no { position: absolute; left: -14px; top: -14px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #c0392b; color: #fff; font-size: 24px; font-weight: 800; }
.hfx-ban-card b { display: block; font-size: 32px; font-weight: 800; color: #c0392b; }
.hfx-ban-card b::before { content: "✕ "; }
.hfx-ban-card p { margin: 12px 0 0; font-size: 22px !important; line-height: 1.65; color: #24294a; }
.hfx-ban-card small { font-size: 18px !important; color: #6b7280; }
.hfx-ok { margin-top: 34px; padding: 22px 34px; border-radius: 20px; background: #f1fbf4; border: 2.5px solid #9fd8b3; opacity: 0; }
.hfx-route { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hfx-route .who { padding: 10px 20px; border-radius: 12px; font-size: 22px; font-weight: 800; color: #fff; }
.hfx-route .who.o { background: #2f9e57; }
.hfx-route .who.y { background: linear-gradient(135deg, #d77bcb, #a43f98); }
.hfx-route .who.m { background: #00199E; }
.hfx-route .arr { font-size: 20px; font-weight: 800; color: #1f6b35; }
.hfx-ok p { margin: 14px 0 0; font-size: 25px !important; color: #24294a; }
.hfx-ok b { color: #1f6b35; font-size: inherit !important; }

.hfx-q-lead { margin: 14px 0 0; font-size: 22px; color: #4b5170; }
.hfx-qs { margin-top: 30px; display: flex; gap: 26px; }
.hfx-q { position: relative; width: 470px; min-height: 300px; padding: 28px 28px 24px; border-radius: 22px; border: 2px solid rgba(0,25,158,.14); background: #fff; cursor: pointer; text-align: left;
  box-shadow: 0 16px 40px rgba(20,30,90,.1); display: flex; flex-direction: column; justify-content: space-between; font-family: "Noto Sans JP", sans-serif; }
.hfx-q:hover { border-color: #a43f98; }
.hfx-q-t { font-size: 23px; font-weight: 700; line-height: 1.6; color: #141a3a; }
.hfx-q-ans { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding: 14px 18px; border-radius: 14px; font-size: 26px; font-weight: 800; opacity: 0; }
.hfx-q-ans i { font-style: normal; font-size: 40px; line-height: 1; }
.hfx-q-ans small { width: 100%; font-size: 19px !important; font-weight: 700; }
.hfx-q-ans.ok { background: #f1fbf4; color: #1f7a45; }
.hfx-q-ans.ng { background: #fdf0ee; color: #c0392b; }
.hfx-q-foot { margin: 28px 0 0; max-width: 1300px; font-size: 22px !important; line-height: 1.7; color: #3b4166; opacity: 0; }
.hfx-q-foot b { color: #a43f98; font-size: inherit !important; }

.hfx-after { margin-top: 40px; display: flex; gap: 40px; text-align: left; }
.hfx-status, .hfx-check { width: 720px; padding: 32px 38px; border-radius: 24px; background: #fff; border: 1px solid rgba(0,25,158,.1); box-shadow: 0 20px 50px rgba(20,30,90,.1); box-sizing: border-box; }
.hfx-after h3 { margin: 0 0 14px; font-size: 28px; font-weight: 800; color: #141a3a; }
.hfx-st { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.hfx-st .b { flex-shrink: 0; width: 130px; padding: 8px 0; border-radius: 999px; text-align: center; color: #fff; font-size: 20px; font-weight: 800; }
.hfx-st .s1 { background: #2f9e57; } .hfx-st .s2 { background: #e08a00; } .hfx-st .s3 { background: #00199E; }
.hfx-st p { margin: 0; font-size: 20px !important; line-height: 1.5; color: #24294a; }
.hfx-st-note { margin: 18px 0 0; font-size: 17px !important; color: #6b7280; }
.hfx-check ul { margin: 0; padding: 0; list-style: none; }
.hfx-check li { position: relative; margin-top: 14px; padding-left: 44px; font-size: 22px; line-height: 1.5; color: #24294a; list-style: none; }
.hfx-check li::before { content: "☑"; position: absolute; left: 0; top: -2px; font-size: 28px; color: #a43f98; }

.hfx-pageno { padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 18px; font-weight: 800; color: #3b4470; }
.hfx-demo-tag { font-size: 15px !important; }

/* 修正：期限パネルを実画面と同じ横長に。説明の邪魔になる場面では出さない */
.hfx-floatwrap .proposal-deadline { width: 470px !important; box-sizing: border-box; }
.hfx-floatwrap .proposal-deadline .c-form-group { display: block !important; width: 100% !important; }
.hfx-floatwrap .deadline-display { display: flex !important; align-items: baseline; justify-content: center; gap: 6px; white-space: nowrap; width: 100% !important; box-sizing: border-box; }
.hfx-floatwrap .date-info { width: 100% !important; margin-top: 8px; }
.hfx-floatwrap.is-hidden { display: none; }
.hfx-prep { grid-template-columns: repeat(5, 334px); gap: 18px; }
.hfx-q-foot { max-width: 1480px; }

/* 修正：実画面と同じ薄い紫の地に、白い入力欄 */
.hfx-page, .hfx-page .mk-main, .hfx-page .mk-body, .hfx-page .mk-wrapper, .hfx-page .mk-property-registration { background: #eef0fa !important; }
.hfx-page .mk-header { background: transparent !important; }
.hfx-page .c-form-input { background-color: #fff !important; border: 1px solid #dfe3f0 !important; border-radius: 6px; }
.hfx-page textarea.c-form-input { min-height: 150px; }
.hfx-page .disclosure-items__item input { width: 22px; height: 22px; background: #fff; }
.hfx-page .doc-filebox, .hfx-page .photos-dz { background: #fff !important; }
.hfx-page .deal-card { background: #fff; }
.hfx-page .hfx-radios input { appearance: auto !important; -webkit-appearance: radio !important; width: 18px !important; height: 18px !important; margin: 0 !important; position: static !important; opacity: 1 !important; }
.hfx-page .hfx-radios label { white-space: nowrap; font-size: 15px; color: #222; }

/* 監査対応（2026-10-13）：語の途中や1文字だけの改行を防ぐ */
.hfx, .hfx-card, .hfx-tip-b, .hfx-prep-item p, .hfx-ban-card p, .hfx-q-t, .hfx-q-foot, .hfx-fc-step p, .hfx-fc-warn, .hfx-check li, .hfx-st p, .hfx-cmp p { word-break: auto-phrase; text-wrap: pretty; line-break: strict; }
.hfx-card .t, .hfx-q-foot { text-wrap: balance; }
.nw { white-space: nowrap; }
/* 字幕は右下のボタンにかからない幅で、長いときは2行まで */
.hfx-caption { width: 1120px !important; }
.hfx-caption span { white-space: normal !important; max-width: 1100px; text-align: center; line-height: 1.45; }
/* 選択欄の文字が途中で切れないよう、長い選択肢の欄は広げる */
.hfx-page #g-f-rel, .hfx-page #g-f-name, .hfx-page #g-f-owner { min-width: 380px; }
.hfx-page select.c-form-input { text-overflow: ellipsis; padding-right: 34px !important; }
/* 収益物件のチェック欄に枠を付ける */
.hfx-oc input { appearance: auto !important; -webkit-appearance: checkbox !important; border: 1px solid #9aa3c0; opacity: 1 !important; position: static !important; }
/* 添付ファイル名は1行で */
.hfx-attached { white-space: nowrap; }
.hfx-page .doc-filebox__inner .hfx-attached { font-size: 13px; padding: 8px 10px; }
/* 公開の流れ図：いま説明している手順を強調 */
.hfx-fc-step { transition: none; }
.hfx-check, .hfx-status { width: 760px; }
.hfx-check li { font-size: 21px; }
/* 再監査対応：告知事項のチェックが暗い中でも見えるように／期限パネルを少し小さく */
.hfx-page .disclosure-items__item input { appearance: auto !important; -webkit-appearance: checkbox !important; accent-color: #a43f98; opacity: 1 !important; position: static !important; }
.hfx-floatwrap { transform: scale(.78); }
/* 最終監査対応：注釈を選択肢の文字のすぐ右に付けるため、文字の幅だけの箱にする */
.hfx-page .disclosure-items__item > span { display: inline !important; flex: none !important; width: auto !important; }
.nw { font-size: inherit !important; font-weight: inherit; }
/* 画面再現のうち「リーガル確認中のため仮置き」の注記は、利用者向けの動画では出さない */
.hfx-tmp { display: none !important; }

/* 場面の終わりの合図（ナレーションが終わったら表示） */
.hfx-endcue { position: absolute; right: 40px; bottom: 136px; z-index: 101; display: none; padding: 14px 24px; border-radius: 16px; background: #141a3a; color: #fff;
  font-size: 22px; font-weight: 700; box-shadow: 0 16px 40px rgba(20,30,90,.35); }
.hfx-endcue.on { display: block; }
.hfx-endcue b { color: #ffd76a; font-size: inherit !important; }
.hfx-endcue::after { content: ""; position: absolute; right: 70px; bottom: -10px; border: 10px solid transparent; border-bottom: 0; border-top-color: #141a3a; }
.hfx-navbtn.is-next.is-cue { animation: hfx-cue 1.1s ease-in-out infinite; }
@keyframes hfx-cue { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,106,.9); transform: scale(1); } 50% { box-shadow: 0 0 0 12px rgba(255,215,106,0); transform: scale(1.06); } }

/* 謄本のどこを見るか（建物情報） */
.hfx-touhon { width: 900px; padding: 26px 32px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.3); box-sizing: border-box; }
.hfx-touhon .hd { font-size: 26px; font-weight: 800; color: #141a3a; margin-bottom: 12px; }
.hfx-touhon .row { display: flex; gap: 18px; align-items: baseline; padding: 12px 0; border-top: 1px solid #e6e9f5; }
.hfx-touhon .k { flex-shrink: 0; width: 120px; padding: 6px 0; border-radius: 999px; background: #fdf1fb; color: #a43f98; font-size: 19px; font-weight: 800; text-align: center; }
.hfx-touhon .v { font-size: 21px !important; line-height: 1.6; color: #24294a; }
.hfx-touhon .v b { color: #a43f98; font-size: inherit !important; }

/* 依頼背景の3つ */
.hfx-bgpanel { width: 1080px; padding: 26px 32px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.3); box-sizing: border-box; }
.hfx-bgpanel .hd { font-size: 28px; font-weight: 800; color: #141a3a; }
.hfx-bgpanel .hd b { color: #a43f98; font-size: inherit !important; }
.hfx-bgpanel .three { display: flex; gap: 16px; margin-top: 16px; }
.hfx-bgpanel .it { flex: 1; padding: 16px 18px; border-radius: 14px; border: 2px solid #e7b3df; background: #fdf7fc; }
.hfx-bgpanel .it .n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #a43f98; color: #fff; font-size: 17px; font-weight: 800; }
.hfx-bgpanel .it b { margin-left: 8px; font-size: 23px; font-weight: 800; color: #141a3a; }
.hfx-bgpanel .it p { margin: 8px 0 0; font-size: 18px !important; line-height: 1.6; color: #3b4166; }
.hfx-bgpanel .ex { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.hfx-bgpanel .ex1 { padding: 10px 16px; border-radius: 10px; background: #f5f7fc; font-size: 20px; font-weight: 700; color: #24294a; }
.hfx-bgpanel .map { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hfx-bgpanel .map span { padding: 8px 18px; border-radius: 999px; background: #eef1fb; font-size: 20px; font-weight: 700; color: #24294a; }
.hfx-bgpanel .map b { color: #00199E; font-size: inherit !important; }
.hfx-bgpanel .map em { font-style: normal; font-size: 19px; font-weight: 700; color: #1f6b35; }
.hfx-prep-item.is-now { border: 2.5px solid #d77bcb; box-shadow: 0 18px 44px rgba(164,63,152,.22); }
/* 4体監査の反映：合図の吹き出しは右の列に収め、ボタンの光は常に見える輪＋拡大縮小 */
.hfx-endcue { max-width: 450px; font-size: 20px !important; line-height: 1.5; }
.hfx-endcue.is-last::after { display: none; }
.hfx-navbtn.is-next.is-cue { box-shadow: 0 0 0 4px #ffd76a, 0 8px 20px rgba(20,30,90,.2) !important; }
@keyframes hfx-cue { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.hfx-q.is-reading { border-color: #a43f98; box-shadow: 0 0 0 4px rgba(215,123,203,.35), 0 16px 40px rgba(20,30,90,.12); }
.hfx-bgpanel .exh { font-size: 18px; font-weight: 800; color: #6b7280; }
.hfx-bgpanel .ex1 i { display: inline-block; margin-right: 12px; padding: 2px 12px; border-radius: 999px; background: #a43f98; color: #fff; font-style: normal; font-size: 16px; font-weight: 800; }
.hfx-bgpanel .map em:first-child { color: #a43f98; }
.hfx-q.is-reading { border-width: 3px; transform: translateY(-6px); box-shadow: 0 0 0 6px rgba(215,123,203,.45), 0 22px 50px rgba(164,63,152,.25); }
.hfx-pin .lb { white-space: nowrap; }
/* デモの物件は戸建：実画面と同じく、戸建では出ない資料欄（レントロール・管理資料）は表示しない */
.hfx-page #doc-rent, .hfx-page #doc-mng { display: none !important; }
/* 物件種別ごとの資料欄の早見表 */
.hfx-docs { width: 1120px; padding: 24px 30px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.3); box-sizing: border-box; }
.hfx-docs .hd { font-size: 26px; font-weight: 800; color: #141a3a; margin-bottom: 12px; }
.hfx-docs .hd b { color: #a43f98; font-size: inherit !important; }
.hfx-docs table { width: 100%; border-collapse: collapse; }
.hfx-docs th, .hfx-docs td { padding: 10px 12px; border-top: 1px solid #e6e9f5; text-align: left; vertical-align: top; font-size: 18px !important; line-height: 1.5; color: #24294a; }
.hfx-docs thead th { background: #f5f7fc; font-size: 15px !important; color: #4b5170; }
.hfx-docs tbody th { width: 280px; font-weight: 800; }
.hfx-docs tbody th small { display: block; font-size: 13px !important; font-weight: 600; color: #6b7280; }
.hfx-docs td b { display: inline-block; margin: 0 6px 4px 0; padding: 2px 10px; border-radius: 999px; background: #fdf1fb; color: #a43f98; font-size: 16px !important; font-weight: 800; }
.hfx-docs .rr { display: block; margin-top: 4px; font-size: 15px !important; color: #6b7280; }
.hfx-docs .rr.on { color: #00199E; font-weight: 800; }
.hfx-docs tbody tr.on { background: #fff6d6; box-shadow: inset 4px 0 0 #e0a800; }
.hfx-docs .nt { margin: 10px 0 0; font-size: 14px !important; color: #6b7280; }
/* 表紙＝サムネイル（全面）。押すと再生開始。表紙では下のボタン類を出さない */
.hfx-thumbbtn { position: absolute; inset: 0; width: 1920px; height: 1080px; padding: 0; margin: 0; border: 0; background: #fff; cursor: pointer; z-index: 5; }
.hfx-thumbbtn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hfx-thumbbtn:hover img { filter: brightness(1.03); }
body.on-cover .hfx-nav, body.on-cover .hfx-progress { display: none; }
.hfx-docs tbody tr.on th { background: #fff6d6; }
/* 6ページ目：禁止物件のカードは文字を中央寄せにして、カードの高さをそろえる */
.hfx-ban-card { text-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 230px; }
.hfx-ban-card p { margin-left: auto; margin-right: auto; max-width: 380px; }
/* クイズは2問：カードを大きめに中央へ */
.hfx-qs { justify-content: center; }
.hfx-q { width: 560px; }
/* 禁止物件カード：見出しの高さをそろえる（上寄せ）。緑枠を少し上げて終わりの吹き出しと重ならないように */
.hfx-ban-card { justify-content: flex-start; padding-top: 44px; min-height: 200px; }
.hfx-ok { margin-top: 26px; margin-bottom: 70px; }