/* 間取りを3Dで見る（assets/plan3d-view.js）の見た目。/3d と、間取り診断の結果画面で共通（2026-10-22） */
.p3 { display: grid; gap: 10px; }
.p3-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.p3-bar2 { justify-content: center; }
.p3-seg { display: inline-flex; border: 1px solid var(--line, #E7E5E0); border-radius: 99px; overflow: hidden; background: #fff; }
.p3-seg button, .p3-bar2 button { font: inherit; font-size: 13px; font-weight: 700; border: 0; background: #fff; color: var(--text, #2B2F33); padding: 7px 13px; cursor: pointer; }
.p3-seg button + button { border-left: 1px solid var(--line, #E7E5E0); }
.p3-seg button[aria-pressed="true"] { background: var(--main, #1F7F73); color: #fff; }
.p3-bar2 button { border: 1px solid var(--line, #E7E5E0); border-radius: 99px; }
.p3-bar2 button:active { background: var(--main-soft, #E6F4F1); }
.p3-stage { position: relative; width: 100%; aspect-ratio: 4 / 3.4; border-radius: 14px; overflow: hidden; border: 1px solid var(--line, #E7E5E0); background: #F1F5F4; }
.p3-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.p3-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted, #6B6F76); }
.p3-wait { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 36px 16px; border: 1px solid var(--line, #E7E5E0); border-radius: 14px; background: #F7FAF9; }
.p3-wait p { margin: 0; font-size: 14px; font-weight: 700; }
.p3-wait small { font-size: 12px; color: var(--muted, #6B6F76); }
.p3-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #D5E7E3; border-top-color: var(--main, #1F7F73); animation: p3spin 1s linear infinite; }
@keyframes p3spin { to { transform: rotate(360deg); } }
.p3-err { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FFF4E8; color: #8A4B12; font-size: 13.5px; line-height: 1.6; }
/* 結果画面の入口と、開いたときの枠 */
.p3-open { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; padding: 14px 16px; border: 1px solid var(--line, #E7E5E0); border-radius: 14px; background: #fff; cursor: pointer; color: var(--text, #2B2F33); }
.p3-open:hover { border-color: var(--main, #1F7F73); }
.p3-open .p3-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--main-soft, #E6F4F1); display: grid; place-items: center; }
.p3-open .p3-ic svg { width: 26px; height: 26px; }
.p3-open b { display: block; font-size: 15px; }
.p3-open small { display: block; font-size: 12px; color: var(--muted, #6B6F76); margin-top: 2px; }
.p3-open .p3-go { margin-left: auto; color: var(--main, #1F7F73); font-weight: 900; }
.p3-sheet { overscroll-behavior: contain; position: fixed; inset: 0; z-index: 60; background: rgba(28, 33, 36, .55); display: flex; align-items: flex-end; justify-content: center; }
.p3-sheet-in { width: 100%; max-width: 640px; max-height: 94vh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 18px 18px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.p3-sheet-h { display: flex; align-items: center; gap: 10px; }
.p3-sheet-h b { flex: 1; font-size: 16px; }
.p3-sheet-h button { border: 0; background: #F1F1EE; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; }
@media (min-width: 700px) { .p3-sheet { align-items: center; } .p3-sheet-in { border-radius: 18px; } }
.nd-card .p3-open { margin-top: 12px; }
/* 壁だけ先に出しているあいだの「AIが読んでいます」 */
.p3-pending { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--main, #1F7F73); font-weight: 700; }
.p3-spin-s { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #D5E7E3; border-top-color: var(--main, #1F7F73); animation: p3spin 1s linear infinite; }
/* AI の読み取りが届いて作り直すとき：前の絵を上に重ねて、ゆっくり消す */
.p3-fade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 1; transition: opacity .8s ease; }
.p3-done { color: var(--main, #1F7F73); }
/* 部屋を直す・マイページに保存 */
.p3-bar3 { justify-content: center; }
.p3-bar3 button { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--main, #1F7F73); color: var(--main, #1F7F73); background: #fff; border-radius: 99px; padding: 7px 14px; cursor: pointer; }
.p3-bar3 button[disabled] { opacity: .5; }
.p3-saved { margin: 0; text-align: center; font-size: 13px; color: var(--main, #1F7F73); font-weight: 700; }
.p3-ed { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line, #E7E5E0); border-radius: 14px; background: #FBFAF7; }
.p3-ed-h b { display: block; font-size: 15px; }
.p3-ed-h small { display: block; font-size: 12px; color: var(--muted, #6B6F76); margin-top: 2px; line-height: 1.6; }
.p3-ed-cv { display: block; max-width: 100%; margin: 0 auto; border-radius: 8px; background: #fff; touch-action: manipulation; cursor: pointer; }
.p3-ed-merge, .p3-ed-shapemsg { margin: 0; padding: 8px 10px; border-radius: 10px; background: #FFF4E8; color: #8A4B12; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.p3-ed-merge[hidden], .p3-ed-shapemsg[hidden] { display: none; }
.p3-ed-merge button, .p3-ed-shapemsg button { font: inherit; font-size: 12px; border: 1px solid #E2C9A8; background: #fff; border-radius: 99px; padding: 4px 10px; }
.p3-ed-panel { display: grid; gap: 8px; }
.p3-ed-hint { margin: 0; font-size: 13px; color: var(--muted, #6B6F76); text-align: center; }
.p3-ed-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.p3-ed-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.p3-ed-row select, .p3-ed-row input { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line, #E7E5E0); border-radius: 8px; background: #fff; max-width: 9em; }
.p3-ed-tat input { width: 4.5em; }
.p3-ed-size { font-size: 13px; color: var(--muted, #6B6F76); }
.p3-ed-row button { font: inherit; font-size: 13px; border: 1px solid var(--line, #E7E5E0); background: #fff; border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.p3-ed-foot { display: flex; gap: 8px; justify-content: flex-end; }
.p3-ed-foot button { font: inherit; font-size: 14px; font-weight: 700; border-radius: 99px; padding: 9px 16px; border: 1px solid var(--line, #E7E5E0); background: #fff; cursor: pointer; }
.p3-ed-foot .p3-ed-ok { background: var(--main, #1F7F73); color: #fff; border-color: var(--main, #1F7F73); }
.p3-ed-list { display: flex; flex-wrap: wrap; gap: 6px; }
.p3-ed-list button { font: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line, #E7E5E0); background: #fff; color: #2B2F33; cursor: pointer; min-height: 40px; }
.p3-ed-list button i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.p3-ed-list button small { font-size: 11px; font-weight: 500; color: var(--muted, #6B6F76); }
.p3-ed-list button.q { color: #B5541B; border-style: dashed; }
.p3-ed-list button[aria-pressed="true"] { background: var(--main, #1F7F73); color: #fff; border-color: var(--main, #1F7F73); }
.p3-ed-list button[aria-pressed="true"] small { color: #E6F2EF; }
.p3-ed-more { font-size: 12px; color: var(--muted, #6B6F76); align-self: center; }
.p3-ed-tip { margin: 0; font-size: 12px; color: var(--muted, #6B6F76); line-height: 1.6; }
.p3-ed-tip b { color: var(--main, #1F7F73); }
.p3-ed-add { display: flex; gap: 8px; flex-wrap: wrap; }
.p3-ed-add button { font: inherit; font-size: 13px; font-weight: 700; border: 1px dashed var(--main, #1F7F73); color: var(--main, #1F7F73); background: #fff; border-radius: 99px; padding: 7px 14px; cursor: pointer; }
.p3-ed-addmsg { margin: 0; padding: 8px 10px; border-radius: 10px; background: #FFF4E8; color: #8A4B12; font-size: 13px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p3-ed-addmsg[hidden] { display: none; }
.p3-ed-addmsg span { flex: 1 1 100%; }
.p3-ed-addmsg select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid #E2C9A8; border-radius: 8px; background: #fff; }
.p3-ed-addmsg button { font: inherit; font-size: 12px; border: 1px solid #E2C9A8; background: #fff; border-radius: 99px; padding: 4px 10px; }
.p3-ed-simple { margin: 0; font-size: 12px; color: var(--muted, #6B6F76); line-height: 1.7; }
.p3-ed-simple[hidden] { display: none; }
.p3-ed-simple button { font: inherit; font-size: 12px; font-weight: 700; color: var(--main, #1F7F73); border: 1px solid var(--main, #1F7F73); background: #fff; border-radius: 99px; padding: 3px 10px; cursor: pointer; }
/* パース：外観・中に入る（2026-10-23） */
.p3-modes { justify-content: center; }
.p3-modes .p3-seg button { padding: 8px 14px; }
.p3-hint { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.88); font-size: 12px; font-weight: 700; color: var(--text, #2B2F33); text-align: center; pointer-events: none; }
.p3-rooms { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.p3-rooms::-webkit-scrollbar { display: none; }
.p3-rooms button { flex: none; font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--line, #E7E5E0); background: #fff; border-radius: 99px; padding: 6px 12px; cursor: pointer; color: var(--text, #2B2F33); }
.p3-rooms button small { font-size: 10.5px; color: var(--muted, #6B6F76); margin-right: 4px; }
.p3-rooms button[aria-pressed="true"] { background: var(--main, #1F7F73); border-color: var(--main, #1F7F73); color: #fff; }
.p3-rooms button[aria-pressed="true"] small { color: #E6F4F1; }
.p3-rooms span { font-size: 12px; color: var(--muted, #6B6F76); }
/* マウスのパソコンでは横に流せない（スクロールバーを隠しているため）ので、折り返して全部見せる（2026-11 利用者の声） */
@media (hover: hover) and (pointer: fine) { .p3-rooms { flex-wrap: wrap; overflow-x: visible; } }

.p3-ed-add .p3-ed-undo { margin-left: auto; border-style: solid; border-color: #CFCBC3; color: #555; }
.p3-ed-add .p3-ed-undo:disabled { opacity: .4; cursor: default; }
/* 2026-10-23：hidden を付けた帯・ボタンは出さない（.p3-bar の display:flex が hidden に勝っていた。ミニチュアで壁の高さのボタンが出たまま効かなかった） */
.p3-bar[hidden], .p3-seg[hidden], .p3-rooms[hidden], .p3-furn[hidden], .p3 button[hidden] { display: none !important; }
/* 部屋の名前・家具を動かす：押すと色が付く切りかえボタン */
.p3-tg, .p3-bar2 .p3-fbtn { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--line, #E7E5E0); background: #fff; color: var(--text, #2B2F33); border-radius: 99px; padding: 7px 13px; cursor: pointer; }
.p3-tg[aria-pressed="true"] { background: var(--main-soft, #E6F4F1); border-color: var(--main, #1F7F73); color: var(--main, #1F7F73); }
.p3-bar2 .p3-fbtn { border-color: var(--main, #1F7F73); color: var(--main, #1F7F73); }
.p3-bar2 .p3-fbtn[aria-pressed="true"] { background: var(--main, #1F7F73); color: #fff; }
/* 家具を動かすときの帯 */
.p3-furn { display: grid; gap: 10px; padding: 12px; border: 1px solid #F2C9A9; background: #FFF8F2; border-radius: 14px; }
.p3-fsel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted, #6B6F76); }
.p3-fsel b { font-size: 14px; color: var(--text, #2B2F33); margin-right: 4px; }
.p3-fadd { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.p3-fadd span { font-size: 12px; font-weight: 800; color: #B85A1E; width: 100%; }
.p3-furn button { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--line, #E7E5E0); background: #fff; color: var(--text, #2B2F33); border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.p3-fadd button { font-size: 12px; padding: 5px 10px; }
.p3-fend { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.p3-furn .p3-fdone { background: var(--main, #1F7F73); border-color: var(--main, #1F7F73); color: #fff; padding: 7px 22px; }
/* 2026-10-23：ボタンの端をそろえる（ユーザー：ボタンががたがた）。上の切りかえは横いっぱい・同じ幅、下のボタンは2列 */
.p3-modes .p3-seg, .p3-mbar [data-g="floor"], .p3-minibar .p3-seg { flex: 1 1 100%; display: flex; }
.p3-modes .p3-seg button, .p3-mbar .p3-seg button, .p3-minibar .p3-seg button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; text-align: center; }
.p3-mbar [data-g="wall"] { flex: 2 1 0; display: flex; }
.p3-mbar .p3-tg { flex: 1 1 0; white-space: nowrap; }
.p3-bar2, .p3-bar3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p3-bar2 button, .p3-bar3 button { width: 100%; text-align: center; white-space: nowrap; }
.p3-bar2 .p3-fbtn, .p3-bar2 .p3-io { grid-column: 1 / -1; }
.p3-minibar .p3-seg button { font-size: 12px; letter-spacing: 0; }

/* 「間取りをつくる」へ（2026-10-25） */
.p3-bar3 .p3-tk { grid-column: 1 / -1; }
.p3-bar3 .p3-tk[hidden] { display: none; }

/* 間取りをつくるの3D：壁の高さ・色の組み合わせは出さない（mount の simple） */
.p3-simple .p3-mbar [data-g="wall"], .p3-simple .p3-minibar { display: none !important; }

/* 診断の結果画面の3D（2026-10-26）：直すのは「間取りをつくる」に一本化 */
.p3-bar-tk { display: grid; gap: 4px; justify-items: center; }
.p3-bar-tk .p3-tk-main { font: inherit; font-size: 15px; font-weight: 800; color: #fff; background: var(--main, #1F7F73); border: 0; border-radius: 12px; padding: 12px 18px; width: 100%; max-width: 420px; min-height: 48px; cursor: pointer; }
.p3-bar-tk small { font-size: 11.5px; color: var(--muted, #6B6F76); text-align: center; }
/* 診断の結果画面：3Dで見る｜自分で直してみる（2026-10-26） */
.p3-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p3-duo .p3-open { padding: 12px; gap: 10px; }
.p3-duo .p3-open .p3-ic { width: 38px; height: 38px; font-size: 20px; }
.p3-duo .p3-open b { font-size: 14px; }
.p3-duo .p3-open small { font-size: 11px; }
.p3-open-tk { border-color: var(--main, #1F7F73); background: #F1F8F5; }
@media (max-width: 420px) { .p3-duo .p3-go { display: none; } }
.tk-try { border: 1.5px dashed var(--main, #1F7F73); border-radius: 14px; background: #F7FBF9; padding: 14px; display: grid; gap: 6px; margin: 4px 0 10px; }
.tk-try b { font-size: 15px; }
.tk-try small { font-size: 12.5px; color: var(--muted, #6B6F76); line-height: 1.7; }
.tk-try .btn { justify-self: start; }
.tk-life-row { display: flex; gap: 8px; overflow-x: auto; margin: 2px -14px; padding: 2px 14px 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tk-life-row::-webkit-scrollbar { display: none; }
.tk-life { flex: 0 0 140px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 2px; padding: 5px 5px 8px; border: 1px solid #E3E8E5; border-radius: 11px; background: #fff; font: inherit; text-align: left; color: #222; cursor: pointer; }
.tk-life img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; background: #F4F2EE; margin-bottom: 3px; }
.tk-life b { font-size: 12.5px !important; line-height: 1.35; padding: 0 2px; }
.tk-life small { font-size: 11px !important; line-height: 1.4 !important; padding: 0 2px; }
.tk-try small.tk-life-note { font-size: 11px; line-height: 1.5; }
.tk-cmp { border: 1.5px solid var(--main, #1F7F73); }
.tk-cmp-big { display: flex; align-items: baseline; gap: 10px; margin: 4px 0; font-variant-numeric: tabular-nums; }
.tk-cmp-big span { font-size: 22px; color: var(--muted, #6B6F76); font-weight: 700; }
.tk-cmp-big i { font-style: normal; color: var(--muted, #6B6F76); }
.tk-cmp-big b { font-size: 34px; font-weight: 900; }
.tk-cmp-big em { font-style: normal; font-weight: 800; font-size: 15px; border-radius: 99px; padding: 2px 10px; background: #EEE; }
.tk-cmp-big em.up, .tk-cmp-cats b.up { color: #1F7F73; } .tk-cmp-big em.up { background: #DDF0EA; }
.tk-cmp-big em.down, .tk-cmp-cats b.down { color: #B5532B; } .tk-cmp-big em.down { background: #FBE6DA; }
.tk-cmp-cats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 13px; }
.tk-cmp-cats li { display: flex; justify-content: space-between; border-bottom: 1px dotted #E2E0DA; padding: 3px 0; }
.tk-cmp-tried, .tk-cmp-note { margin: 6px 0 0; font-size: 12px; color: var(--muted, #6B6F76); line-height: 1.6; }
/* 日当たり（2026-10-26） */
.p3-bar2 .p3-sunbtn { grid-column: 1 / -1; border-color: #E0A23A; color: #9A5B00; }
.p3-bar2 .p3-sunbtn[aria-pressed="true"] { background: #F3A93A; border-color: #F3A93A; color: #fff; }
.p3-bar2 .p3-walkbtn, .p3-bar2 .p3-rbtn, .p3-bar2 .p3-paintbtn, .p3-bar2 .p3-elecbtn { grid-column: 1 / -1; }
.p3-bar2 .p3-elecbtn { border-color: #E07B39; color: #B4561B; }
.p3-bar2 .p3-elecbtn[aria-pressed="true"] { background: #FFF1E6; }
.p3-bar2 .p3-paintbtn { border-color: #E3A04A; color: #9A5B00; }
.p3-bar2 .p3-paintbtn[aria-pressed="true"] { background: #FFF4E2; border-color: #F3A93A; color: #9A5B00; }
.p3-stage.p3-painting canvas { cursor: crosshair; }
.p3-stage.p3-painting { box-shadow: inset 0 0 0 2px #F3A93A; }
.p3-bar2 .p3-rbtn { border-color: #8C6FD1; color: #5B3FA8; }
.p3-bar2 .p3-walkbtn:disabled { opacity: .7; cursor: progress; }
.p3-sunbar[hidden] { display: none !important; }
.p3-sunbar { margin: 8px 0 0; padding: 12px; border: 1px solid #F1D9AE; background: #FFF8EC; border-radius: 14px; display: grid; gap: 8px; }
.p3-sunbar .p3-seg { display: flex; width: 100%; }
.p3-sunbar .p3-seg button { flex: 1; }
.p3-sunbar .p3-seg button[aria-pressed="true"] { background: #F3A93A; color: #fff; }
.p3-sunrow { display: flex; align-items: center; gap: 10px; }
.p3-sunplay { flex: none; width: 38px; height: 38px; border-radius: 99px; border: 0; background: #F3A93A; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.p3-sunt { flex: 1; min-width: 0; accent-color: #E8912A; }
.p3-sunclk { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.p3-sunlbl { margin: 0; font-size: 13px; line-height: 1.6; }
.p3-sunlbl small { display: block; color: #7A6A55; font-size: 12px; }
.p3-sunlock { margin: 6px 0 0; font-size: 12px; color: #B4561B; }
.p3-sunlock[hidden] { display: none; }
.p3-sunreg { font-size: 12px; color: #6B6255; display: flex; align-items: center; gap: 6px; }
.p3-sunreg select { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid #E5D6BC; border-radius: 8px; background: #fff; }
.p3-sunnote { margin: 0; font-size: 11px; color: #8A7E6E; line-height: 1.6; }

/* 結果画面の「あなたの間取りを、立体にすると」（2026-10-28。押す前から3Dの絵を見せる） */
.p3-prev { display: block; width: 100%; margin-top: 14px; padding: 12px 12px 10px; border: 1px solid var(--line, #E7E5E0); border-radius: 16px; background: linear-gradient(180deg, #F4FAF8, #fff); cursor: pointer; font: inherit; color: var(--text, #2B2F33); text-align: center; }
.p3-prev:hover { border-color: var(--main, #1F7F73); }
.p3-prev-k { display: block; font-size: 13px; font-weight: 700; color: var(--main, #1F7F73); letter-spacing: .04em; }
.p3-prev-img { display: grid; place-items: center; margin: 8px auto 6px; width: 100%; aspect-ratio: 6 / 5; max-height: 360px; border-radius: 12px; overflow: hidden; background: #E8EEEE; }
.p3-prev-img img { width: 100%; height: 100%; object-fit: contain; display: block; animation: p3PrevIn .5s ease; }
.p3-prev-img { position: relative; }
.p3-prev-note { display: none; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.9); font-size: 11.5px; color: var(--muted, #6B6F76); white-space: nowrap; }
.p3-prev.is-reading .p3-prev-note { display: block; }
.p3-prev-wait { font-size: 12px; color: var(--muted, #6B6F76); }
.p3-prev.is-loading .p3-prev-img { background: linear-gradient(100deg, #E9EEEE 30%, #F5F8F8 50%, #E9EEEE 70%); background-size: 200% 100%; animation: p3Shine 1.4s linear infinite; }
.p3-prev-go { display: inline-block; font-size: 14px; font-weight: 900; color: var(--main, #1F7F73); }
.p3-prev.is-loading .p3-prev-go { opacity: .4; }
@keyframes p3Shine { to { background-position: -200% 0; } }
@keyframes p3PrevIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.p3-prev + .p3-duo, .p3-prev + .p3-open { margin-top: 8px; }
.p3-duo.one { grid-template-columns: 1fr; }
.p3-open[hidden] { display: none; }

/* 結果画面の「この間取りで、試せること」（2026-10-28。マドつくの内装・日当たり・歩く動画への入口） */
.p3-feat { margin-top: 12px; text-align: left; }
.p3-feat-k { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text, #2B2F33); }
.p3-feat-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.p3-feat-row button { grid-column: span 2; }
.p3-feat-row button.wide { grid-column: span 3; flex-direction: row; justify-content: center; gap: 8px; padding: 11px 6px; }
.p3-feat-row button.wide .p3-feat-t { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.p3-feat-row button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 9px; border: 1px solid var(--line, #E7E5E0); border-radius: 12px; background: #fff; font: inherit; color: var(--text, #2B2F33); cursor: pointer; text-align: center; }
.p3-feat-row button:hover { border-color: var(--main, #1F7F73); }
.p3-feat-ic { font-size: 22px; line-height: 1.2; }
.p3-feat-row b { font-size: 12.5px; line-height: 1.35; }
.p3-feat-row small { font-size: 10.5px; color: var(--muted, #6B6F76); line-height: 1.35; }
.p3-feat + .p3-duo, .p3-feat + .p3-open { margin-top: 10px; }
/* 中に入るときの小さな地図（どこから見ているか。2026-11-01） */
.p3-mm { position: absolute; top: 8px; right: 8px; width: 34%; max-width: 200px; min-width: 120px; pointer-events: auto; }
.p3-mm[hidden], .p3-mmopen[hidden] { display: none; }
.p3-mm canvas { display: block; width: 100%; height: auto; cursor: pointer; }
.p3-mm button { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.p3-mmopen { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(0,0,0,.15); font-size: 18px; cursor: pointer; }
/* /3d：日当たりの方角を先に聞く・内装の着せかえ（2026-11-01） */
.p3-sunask[hidden], .p3-sunmain[hidden], .p3-paintbox[hidden] { display: none !important; }
.p3-sunmain { display: grid; gap: 8px; }
.p3-sunask { display: grid; gap: 8px; }
.p3-sunask b { font-size: 14px; }
.p3-sunask small { color: #7A6A55; font-size: 12px; line-height: 1.6; }
.p3-sunnorth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 320px; }
.p3-sunnorth button { min-height: 40px; border: 1px solid #E8C78F; background: #fff; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 700; color: #7A4A00; cursor: pointer; }
.p3-sunnorth button:hover { background: #FFF1D9; }
.p3-sunnchg { display: inline; margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: #9A5B00; text-decoration: underline; cursor: pointer; }
.p3-paintbox { margin: 8px 0 0; padding: 12px; border: 1px solid #F1D9AE; background: #FFFBF4; border-radius: 14px; display: grid; gap: 8px; }
.p3-pmsg { margin: 0; font-size: 13px; line-height: 1.6; }
.p3-psw { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.p3-psw button { display: grid; justify-items: center; gap: 3px; padding: 6px 4px; border: 1px solid #E6E1D8; background: #fff; border-radius: 10px; font: inherit; font-size: 11px; color: #4A4540; cursor: pointer; }
.p3-psw button[aria-pressed="true"] { border-color: #E3A04A; box-shadow: 0 0 0 2px #F7D49A inset; }
.p3-psw i { width: 30px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); }
.p3-pscope { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.p3-pscope button { min-height: 34px; padding: 0 10px; border: 1px solid #E3A04A; background: #fff; border-radius: 99px; font: inherit; font-size: 12px; font-weight: 700; color: #9A5B00; cursor: pointer; }
.p3-pscope button[aria-pressed="true"] { background: #FFF1D9; }
/* 屋根・外壁・照明（2026-11-04。/3d・結果画面の3D） */
.p3-lookbox[hidden] { display: none !important; }
.p3-lookbox { margin: 8px 0 0; padding: 12px; border: 1px solid #DCE9E5; background: #F6FBF9; border-radius: 14px; display: grid; gap: 10px; }
.p3-lrow { display: grid; gap: 6px; }
.p3-lrow > b { font-size: 13px; color: #1F2A2E; }
.p3-lrow > small { font-size: 11.5px; color: #6B6B75; line-height: 1.5; }
.p3-lch { display: flex; flex-wrap: wrap; gap: 6px; }
.p3-lch button { font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid #D9D5CC; border-radius: 999px; background: #fff; color: #3B3A36; cursor: pointer; }
.p3-lch button[aria-pressed="true"] { border-color: #1F7F73; background: #E6F3EF; color: #1F7F73; font-weight: 700; }
.p3-lch .p3-lsw { width: 30px; height: 30px; padding: 3px; border-radius: 50%; }
.p3-lch .p3-lsw i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.p3-lch .p3-lsw[aria-pressed="true"] { border: 2px solid #1F7F73; background: #fff; }