/* 生成物：port-h3d.py が確認用の3Dの家から作る。ここは直さない */
.h3d *{box-sizing:border-box}
.h3d .h3-stage{position:relative;width:100%;aspect-ratio:1/1.06;max-height:80vh;overflow:hidden;border-radius:16px;background:radial-gradient(110% 85% at 50% 38%,#3a3a40 0,#1a1a1d 78%);touch-action:pan-y}
@media (min-width:700px){.h3d .h3-stage{aspect-ratio:4/3}}
.h3d .h3-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.h3d .h3-labs{position:absolute;inset:0;transition:opacity .25s}
.h3d .h3-labs svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.h3d .h3-stage.h3-go .h3-labs{opacity:0;pointer-events:none}
.h3d .h3-fuda{position:absolute;left:0;top:0;background:rgba(22,22,24,.86);color:#EDE9E2;border:1px solid rgba(237,233,226,.4);border-radius:999px;padding:5px 11px;font:700 13px/1.3 "Noto Sans JP",sans-serif;cursor:pointer;white-space:nowrap}
@media (max-width:480px){.h3d .h3-fuda{font-size:12px;padding:3px 8px}}
.h3d .h3-fuda:active{background:#781030}
.h3d .h3-ph{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;background:#111}
.h3d .h3-ph.h3-on{opacity:1;pointer-events:auto}
.h3d .h3-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h3d .h3-ph .h3-a{opacity:0;transition:opacity .8s}
.h3d .h3-ph.h3-wipe .h3-a{opacity:1;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.4,0,.2,1)}
.h3d .h3-ph.h3-after .h3-a{opacity:1}
.h3d .h3-ph.h3-wipe.h3-after .h3-a{clip-path:inset(0 0 0 0)}
.h3d .h3-ph .h3-tag{position:absolute;top:14px;right:14px;background:rgba(22,22,24,.8);color:#EDE9E2;font:700 14px/1 "Noto Sans JP",sans-serif;padding:8px 12px;border-radius:8px;letter-spacing:.08em}
.h3d .h3-ph.h3-after .h3-tag{background:#781030}
.h3d .h3-ba{position:absolute;left:14px;bottom:14px;display:flex;border-radius:10px;overflow:hidden;border:1px solid rgba(237,233,226,.45)}
.h3d .h3-ba button{min-width:64px;min-height:44px;border:0;background:rgba(22,22,24,.8);color:#EDE9E2;font:700 15px "Noto Sans JP",sans-serif;cursor:pointer}
.h3d .h3-ba button[aria-pressed=true]{background:#781030}
.h3d .h3-ph.h3-gl{background:transparent;pointer-events:none}
.h3d .h3-ph.h3-gl img,.h3d .h3-ph.h3-gl .h3-err{display:none!important}
.h3d .h3-ph.h3-gl .h3-ba,.h3d .h3-ph.h3-gl .h3-tag{pointer-events:auto}
.h3d .h3-ph .h3-err{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:#ABA69E;font-size:14px}
.h3d .h3-back{position:absolute;left:12px;top:12px;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid rgba(237,233,226,.45);background:rgba(22,22,24,.8);color:#EDE9E2;font:700 15px "Noto Sans JP",sans-serif;cursor:pointer;display:none;z-index:3}
.h3d .h3-stage.h3-go .h3-back{display:block}
.h3d .h3-sheet{margin-top:14px;padding:16px;border:1px solid rgba(237,233,226,.22);border-radius:14px;background:#161618}
.h3d .h3-sheet .h3-ln{margin:0;color:#931d3f;font-weight:700;font-size:15px}
.h3d .h3-sheet h3{margin:2px 0 10px;font-size:22px}
.h3d .h3-sheet dl{display:grid;grid-template-columns:5.5em 1fr;gap:4px 10px;margin:0 0 10px;font-size:15px}
.h3d .h3-sheet dt{color:#ABA69E}
.h3d .h3-sheet dd{margin:0}
.h3d .h3-sheet .h3-pr{font-size:20px;font-weight:700}
.h3d .h3-sheet small{color:#ABA69E}
.h3d .h3-sheet a.h3-lk{color:#EDE9E2;font-weight:700}
.h3d .h3-cta{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.h3d .h3-cta a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;border-radius:12px;text-decoration:none;font-weight:700;font-size:17px;color:#EDE9E2;border:1px solid rgba(237,233,226,.35)}
.h3d .h3-cta a.h3-ai{background:#781030;border-color:#781030}
.h3d .h3-cta a small{font-weight:400;font-size:12px;color:#eadfe2}
.h3d .h3-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.h3d .h3-pick button{min-height:44px;border:1px solid rgba(237,233,226,.3);background:transparent;color:#EDE9E2;border-radius:10px;font:700 15px "Noto Sans JP",sans-serif;cursor:pointer}
.h3d .h3-pick button[aria-pressed=true]{background:#781030;border-color:#781030}
.h3d .h3-ph .h3-err{text-shadow:0 1px 3px rgba(0,0,0,.8)}
@media (prefers-reduced-motion:reduce){.h3d .h3-ph,.h3d .h3-ph .h3-a,.h3d .h3-labs{transition:none!important}}
.h3d .h3-nogl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ABA69E;font-size:14px;padding:20px;text-align:center}
.h3d{margin:0 0 4px}
.h3d .h3-stage{background:url(img/p/h3d-home-m.webp) center/cover no-repeat,radial-gradient(110% 85% at 50% 38%,#3a3a40 0,#1a1a1d 78%)}
@media (min-width:700px){.h3d .h3-stage{background-image:url(img/p/h3d-home-d.webp),radial-gradient(110% 85% at 50% 38%,#3a3a40 0,#1a1a1d 78%)}}
.h3d .h3-stage.h3-ready{background-image:radial-gradient(110% 85% at 50% 38%,#3a3a40 0,#1a1a1d 78%)}
#h25 .h3d .h3-pick button{background:#fff;color:#1d1916;border-color:#d8d1c8}
#h25 .h3d .h3-pick button[aria-pressed=true]{background:#781030;border-color:#781030;color:#fff}
#h25 .h3d .h3-sheet{background:#fff;border-color:#e3ded6;color:#1d1916}
#h25 .h3d .h3-sheet h3,#h25 .h3d .h3-sheet dd,#h25 .h3d .h3-sheet .h3-pr,#h25 .h3d .h3-sheet b{color:#1d1916}
#h25 .h3d .h3-sheet dt,#h25 .h3d .h3-sheet small{color:#5b534c}
#h25 .h3d .h3-sheet .h3-ln,#h25 .h3d .h3-sheet a.h3-lk{color:#781030}
#h25 .h3d .h3-cta a{background:#fff;color:#1d1916;border-color:#cfc8bf}
#h25 .h3d .h3-cta a.h3-ai{background:#781030;border-color:#781030;color:#fff}
#h25 .h3d .h3-cta a.h3-ai small{color:#f3e6ea}
#h25 .h3d .h3-more{display:none;margin:12px auto 0;border:1px solid #d8d1c8;background:#fff;color:#1d1916;border-radius:999px;padding:10px 18px;min-height:44px;font:700 14px "Noto Sans JP",sans-serif;cursor:pointer}
#h25 .h3d.h3-live .h3-more{display:block}
#h25 .h3d.h3-live .h3-pick{display:none}
#h25 .h3d.h3-live.h3-open .h3-pick{display:grid;margin-top:10px}
@supports not (aspect-ratio:1/1){.h3d .h3-stage{height:0;padding-top:106%;max-height:none}}
@media (min-width:700px){@supports not (aspect-ratio:1/1){.h3d .h3-stage{padding-top:75%}}}
