@import"https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;700;900&display=swap";:root{--bg0:#07140b;--bg1:#0b1f12;--panel:#0f2a18cc;--panelSolid:#0f2a18;--card:#0f2a18;--text:#eafff1;--muted:#bfe9cf;--line:#2a5a3f;--accent:#22c55e;--accent2:#16a34a;--danger:#ef4444;--shadow: 0 18px 50px rgba(0,0,0,.35);--radius:16px;--radius2:12px;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font);color:var(--text);background:linear-gradient(180deg,#07140b80,#0b1f128c),url(/img/BG.png) center / cover no-repeat fixed}code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(180deg,#07140beb,#07140ba6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(42,90,63,.55)}.brand{display:flex;gap:12px;align-items:center}.logoMark{width:40px;height:40px;border-radius:12px;background-color:#22c55e2e;background-image:url(/img/favicon.png);background-size:cover;background-position:center;box-shadow:0 10px 30px #22c55e2e}.brandName{font-weight:800;letter-spacing:.02em}.brandTag{font-size:12px;color:#bfe9cfe6}.topActions{display:flex;gap:10px;align-items:center}.app{max-width:1460px;margin:0 auto;padding:18px 18px 40px}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start;margin-top:10px}.heroCopy{padding:18px;border:1px solid rgba(42,90,63,.55);border-radius:var(--radius);background:linear-gradient(180deg,#0f2a18c7,#0f2a1894);box-shadow:var(--shadow)}.heroCopy h1{margin:0 0 8px;font-size:28px;line-height:1.25}.heroCopy p{margin:0 0 12px;color:#bfe9cff2;line-height:1.7}.note{font-size:13px;color:#eafff1eb;background:#07140b73;border:1px dashed rgba(42,90,63,.8);padding:10px 12px;border-radius:12px}.heroMedia{aspect-ratio:16 / 9;max-height:320px;border-radius:var(--radius);border:1px solid rgba(42,90,63,.55);background:radial-gradient(900px 500px at 30% 20%,rgba(34,197,94,.18),transparent 60%),linear-gradient(135deg,#0f2a188c,#0f2a1840);box-shadow:var(--shadow);position:relative;overflow:hidden}.hero-media-image{width:100%;height:100%;object-fit:cover;display:block}.heroMedia:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0000,#00000040)}.heroMedia:after{content:"ベース画像は img/hero.jpg を使用";position:absolute;left:14px;bottom:12px;font-size:12px;color:#eafff1d9;padding:6px 10px;border-radius:999px;background:#07140b8c;border:1px solid rgba(42,90,63,.6)}.workspace{margin-top:16px;display:grid;grid-template-columns:280px minmax(720px,1fr) 280px;gap:14px;align-items:start}.panel{border:1px solid rgba(42,90,63,.55);border-radius:var(--radius);background:linear-gradient(180deg,#0f2a18d1,#0f2a18a3);box-shadow:var(--shadow);overflow:hidden}.panel.isLocked{opacity:.6}.panelHeader{padding:14px 14px 10px;border-bottom:1px solid rgba(42,90,63,.45)}.panelHeader h2{margin:0;font-size:16px}.panelSub{margin-top:4px;font-size:12px;color:#bfe9cfe6}.panelFooter{padding:12px 14px;border-top:1px solid rgba(42,90,63,.45)}.hint{font-size:12px;color:#bfe9cfe6;line-height:1.6}kbd{display:inline-block;padding:2px 6px;border-radius:8px;border:1px solid rgba(42,90,63,.8);background:#07140b73}.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px}.tab{border:1px solid rgba(42,90,63,.7);background:#07140b40;color:#eafff1eb;padding:7px 10px;border-radius:999px;font-size:12px;cursor:pointer}.tab.isActive{border-color:#22c55ee6;box-shadow:0 0 0 3px #22c55e26 inset}.categoryFilter{display:grid;gap:6px;padding:12px 14px}.categorySelect{width:100%;border:1px solid rgba(42,90,63,.75);background:#07140b94;color:#eafff1f2;border-radius:10px;padding:8px 10px;font-size:13px}.palette{padding:0 14px 14px;display:grid;grid-template-columns:1fr;gap:10px;max-height:520px;overflow:auto}.itemCard{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;border:1px solid rgba(42,90,63,.6);background:#07140b75;cursor:grab;-webkit-user-select:none;user-select:none}.itemCard:active{cursor:grabbing}.itemIcon{width:44px;height:44px;border-radius:12px;border:1px solid rgba(42,90,63,.7);background:#0f2a188c;display:grid;place-items:center;flex:0 0 auto;overflow:hidden}.itemIcon img{width:100%;height:100%;object-fit:contain;display:block}.itemIcon span{display:grid;place-items:center;width:100%;height:100%}.itemMeta{min-width:0}.itemName{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.itemDesc{font-size:12px;color:#bfe9cfe6;margin-top:2px;line-height:1.35}.itemName ruby rt{font-size:10px}.canvasWrap{border:1px solid rgba(42,90,63,.55);border-radius:var(--radius);background:linear-gradient(180deg,#0f2a18bd,#0f2a188a);box-shadow:var(--shadow);overflow:hidden}.canvasHeader{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(42,90,63,.45)}.canvasTitle h2{margin:0;font-size:16px}.canvasSub{margin-top:4px;font-size:12px;color:#bfe9cfe6}.canvasTools{display:flex;gap:10px}.canvasVariantSwitch{display:grid;gap:6px;width:230px}.canvasVariantSwitch .categorySelect{padding:7px 10px}.stage{padding:14px}.stageInner{position:relative;width:100%;aspect-ratio:16 / 9;border-radius:16px;overflow:hidden;border:1px solid rgba(42,90,63,.65);background:#07140b75}.baseImage{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center;filter:var(--stage-filter, none);transform:translateZ(0)}.itemsLayer{position:absolute;top:0;right:0;bottom:0;left:0;filter:var(--stage-filter, none)}.stageOverlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.stageOverlay--grid{background-image:linear-gradient(to right,rgba(0,0,0,.32) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.32) 1px,transparent 1px);background-size:48px 48px;opacity:.45}.orderOverlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:99;display:grid;place-items:center;padding:16px}.orderCard{width:min(620px,100%);padding:16px;border-radius:14px;border:1px solid rgba(42,90,63,.9);background:radial-gradient(150% 130% at 0% 0%,#22c55e24,#22c55e00 40%),#07140beb;box-shadow:0 24px 60px #00000059}.orderTitle{font-weight:800;margin-bottom:8px}.orderBody{line-height:1.8;font-size:14px}.orderBody--pre{line-height:1.9;white-space:pre-line}.orderActions{display:flex;gap:8px;margin-top:12px}.orderPrimaryBtn{margin-top:12px}.orderCard--setup{border-color:#2a5a3fe6}.orderSetup{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;align-items:end}.orderSetupSide{display:flex;justify-content:flex-end;align-items:flex-end}.orderSetupImage{width:100%;max-width:210px;height:auto;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}.orderCard--main1{border-color:#f472b69e;background:radial-gradient(150% 130% at 0% 0%,#f472b638,#f472b600 42%),#1f0c15ed;font-family:Kiwi Maru,Hiragino Maru Gothic ProN,Yu Gothic UI,Meiryo,sans-serif}.orderCard--main1 .orderTitle{color:#fce7f3fa;letter-spacing:.01em}.orderCard--main2{border-color:#c4b5fd9e;background:radial-gradient(150% 130% at 0% 0%,#c4b5fd33,#c4b5fd00 42%),#11111eed;font-family:BIZ UDPMincho,Yu Mincho,Hiragino Mincho ProN,MS PMincho,serif}.orderCard--main2 .orderTitle{color:#e0e7fffa;letter-spacing:.04em}.orderCard--main3{border-color:#7dd3fca3;background:radial-gradient(150% 130% at 0% 0%,#38bdf83d,#38bdf800 42%),#091320ed;font-family:Zen Kaku Gothic New,Noto Sans JP,Yu Gothic UI,Meiryo,sans-serif;font-weight:500}.orderCard--main3 .orderTitle{color:#bae6fdfa;letter-spacing:.06em;font-weight:900}.bottomBar{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.9fr);gap:10px;align-items:stretch;padding:12px 14px;border-top:1px solid rgba(42,90,63,.45);background:#07140b7a}.bottomItem{min-width:0}.bottomItem .label{margin-bottom:8px}.label{font-size:12px;color:#bfe9cfe6;margin-bottom:6px}.small{font-size:12px;color:#bfe9cfe6}.filterRow{display:flex;flex-wrap:wrap;gap:8px}.filters .filterRow{flex-wrap:nowrap;overflow-x:hidden;gap:6px}.chip{border:1px solid rgba(42,90,63,.7);background:#07140b85;color:#eafff1eb;padding:6px 8px;border-radius:999px;font-size:10px;white-space:nowrap;cursor:pointer}.chip.isActive{border-color:#22c55ee6;box-shadow:0 0 0 3px #22c55e26 inset}.export{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px}.bottomBar>.bottomItem:nth-child(2){margin-left:36px}.export .btn{white-space:nowrap}.btn{border:1px solid rgba(42,90,63,.75);background:#07140b80;color:#eafff1f2;padding:9px 12px;border-radius:12px;cursor:pointer;font-weight:700}.btn:hover{border-color:#22c55ebf}.btn:disabled{background:#78807859!important;border-color:#7880788c!important;color:#dce4dcb3!important;cursor:not-allowed;box-shadow:none!important}.btn.primary:disabled{background:#6e766e73!important;color:#e6ece6b8!important}.btn.primary{border-color:#22c55ef2;background:linear-gradient(135deg,#22c55ef2,#16a34ad9);color:#05210f}.btn.ghost{background:transparent}.btn.danger{border-color:#ef4444e6;color:#ffe6e6f2}.btn.danger:hover{border-color:#ef4444}.btnNoWrap{white-space:nowrap}.props{padding:12px 14px 14px}.propGroup{padding:12px;border:1px solid rgba(42,90,63,.55);border-radius:14px;background:#07140b7a;margin-bottom:10px}.propTitle{font-weight:800;font-size:13px;margin-bottom:10px}.propRow{display:grid;grid-template-columns:52px minmax(0,1fr) 78px;gap:6px;align-items:center}.propRow>*{min-width:0}.propLabel{font-size:12px;color:#bfe9cfe6}output{font-size:12px;color:#eafff1eb;text-align:right}input[type=range]{width:100%}input[type=number]{width:100%;border:1px solid rgba(42,90,63,.75);background:#07140b8f;color:#eafff1f2;border-radius:8px;padding:6px 8px;text-align:right}.unitField{width:100%;min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden}.unitField input[type=number]{flex:1 1 auto;min-width:0}.unitField .unit{flex:0 0 auto;width:8px;font-size:12px;color:#bfe9cff2;text-align:center;line-height:1;pointer-events:none}.unitField input[type=number]::-webkit-outer-spin-button,.unitField input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.unitField input[type=number]{-moz-appearance:textfield}.propButtons{display:flex;flex-wrap:wrap;gap:10px}.opsGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.opsCenter{grid-column:1 / -1}.layerGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tips{margin:0;padding-left:18px;color:#bfe9cfeb;font-size:12px;line-height:1.6}.resultCard{border-color:#22c55e80;background:radial-gradient(140% 120% at 0% 0%,#22c55e29,#22c55e00 40%),linear-gradient(180deg,#07140bb8,#07140b8f)}.resultHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.scoreBadge{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:900;color:#05210f;background:linear-gradient(135deg,#6ee7b7f2,#22c55ef2);box-shadow:0 10px 22px #00000038}.resultComment{margin:10px 0 0;padding:10px 12px;font-size:13px;line-height:1.75;color:#eafff1fa;border:1px solid rgba(110,231,183,.35);border-radius:12px;background:#07140b8c;box-shadow:inset 0 0 0 1px #22c55e1f}.resultTips{margin-top:10px!important}.resultTips li::marker{color:#6ee7b7f2}.resultCard--main1{border-color:#f472b68c;background:radial-gradient(140% 120% at 0% 0%,#f472b633,#f472b600 42%),linear-gradient(180deg,#1e0c14bd,#160a1194);font-family:Kiwi Maru,Hiragino Maru Gothic ProN,Yu Gothic UI,Meiryo,sans-serif}.resultCard--main1 .scoreBadge{color:#2b0d1b;background:linear-gradient(135deg,#fbcfe8f2,#f472b6f2)}.resultCard--main1 .resultComment{border-color:#f472b66b;box-shadow:inset 0 0 0 1px #f472b62e}.resultCard--main1 .resultTips li::marker{color:#fbcfe8f2}.resultCard--main2{border-color:#c4b5fd80;background:radial-gradient(140% 120% at 0% 0%,#c4b5fd2e,#c4b5fd00 42%),linear-gradient(180deg,#12121ebd,#0c0c1894);font-family:BIZ UDPMincho,Yu Mincho,Hiragino Mincho ProN,MS PMincho,serif}.resultCard--main2 .scoreBadge{color:#141428;background:linear-gradient(135deg,#e0e7fff2,#c4b5fdf2)}.resultCard--main2 .resultComment{border-color:#c4b5fd66;box-shadow:inset 0 0 0 1px #c4b5fd29}.resultCard--main2 .resultTips li::marker{color:#e0e7fff2}.resultCard--main3{border-color:#7dd3fc8c;background:radial-gradient(140% 120% at 0% 0%,#38bdf833,#38bdf800 42%),linear-gradient(180deg,#0a1522bd,#08101c94);font-family:Zen Kaku Gothic New,Noto Sans JP,Yu Gothic UI,Meiryo,sans-serif;font-weight:500}.resultCard--main3 .scoreBadge{color:#092033;background:linear-gradient(135deg,#bae6fdf2,#38bdf8f2)}.resultCard--main3 .resultComment{border-color:#38bdf86b;box-shadow:inset 0 0 0 1px #38bdf829}.resultCard--main3 .resultTips li::marker{color:#bae6fdf2}.placed{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:140px;height:90px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.placed:active{cursor:grabbing}.placed .shape{width:100%;height:100%;border-radius:14px;border:1px solid rgba(0,0,0,.25);box-shadow:0 14px 30px #00000040;background:#ffffff1f}.placed[data-kind=fence] .shape{background:linear-gradient(180deg,#ffffff2e,#ffffff0f);border-color:#ffffff2e}.placed[data-kind=approach] .shape{background:linear-gradient(135deg,#94a3b859,#94a3b81f);border-color:#94a3b840}.placed[data-kind=object] .shape{background:linear-gradient(135deg,#facc1540,#facc1514);border-color:#facc1538}.placed[data-kind=planter] .shape{background:linear-gradient(135deg,#fb923c47,#fb923c1a);border-color:#fb923c38}.placed[data-kind=plant] .shape{background:linear-gradient(135deg,#22c55e4d,#22c55e1a);border-color:#22c55e38}.placed[data-kind=topiary] .shape{background:linear-gradient(135deg,#10b9814d,#10b9811a);border-color:#10b98138}.placed[data-kind=set] .shape{background:linear-gradient(135deg,#60a5fa47,#60a5fa1a);border-color:#60a5fa38}.placed .label{position:absolute;left:10px;bottom:8px;margin:0;font-size:12px;color:#eafff1f2;text-shadow:0 2px 10px rgba(0,0,0,.45)}.placed.isSelected{outline:2px solid rgba(34,197,94,.95);outline-offset:2px}.handle{position:absolute;width:14px;height:14px;border-radius:999px;border:1px solid rgba(234,255,241,.85);background:#22c55ee6;box-shadow:0 10px 20px #00000040;transform:translate(-50%,-50%);display:none}.placed.isSelected .handle{display:block}.handle-nw{left:0;top:0;cursor:nwse-resize}.handle-n{left:50%;top:0;cursor:ns-resize}.handle-ne{left:100%;top:0;cursor:nesw-resize}.handle-e{left:100%;top:50%;cursor:ew-resize}.handle-se{left:100%;top:100%;cursor:nwse-resize}.handle-s{left:50%;top:100%;cursor:ns-resize}.handle-sw{left:0;top:100%;cursor:nesw-resize}.handle-w{left:0;top:50%;cursor:ew-resize}.howto{margin-top:16px;padding:18px;border-radius:var(--radius);border:1px solid rgba(42,90,63,.55);background:#07140b2e}.howto h2{margin:0 0 12px;font-size:16px}.howtoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.howtoCard{display:flex;gap:12px;padding:12px;border-radius:14px;border:1px solid rgba(42,90,63,.55);background:#07140b2e}.howtoNum{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-weight:900;background:#22c55e2e;border:1px solid rgba(34,197,94,.35)}.howtoTitle{font-weight:900;margin-bottom:4px}.howtoCard p{margin:0;color:#bfe9cfeb;font-size:13px;line-height:1.6}.footer{margin-top:18px;padding:10px 2px;color:#bfe9cfd9}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:none;z-index:100}.modal[aria-hidden=false]{display:block}.modalBackdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c}.modalPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100% - 28px));border-radius:18px;border:1px solid rgba(42,90,63,.75);background:linear-gradient(180deg,#0f2a18eb,#07140beb);box-shadow:0 30px 90px #0000008c;overflow:hidden}.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(42,90,63,.55)}.modalTitle{font-weight:900}.iconBtn{border:1px solid rgba(42,90,63,.75);background:#07140b40;color:var(--text);border-radius:12px;width:38px;height:38px;cursor:pointer;font-size:18px;line-height:1}.modalBody{padding:14px}.modalList{margin:0;padding-left:18px;color:#eafff1eb;line-height:1.7}.modalSection+.modalSection{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(42,90,63,.65)}.modalSectionTitle{margin:0 0 8px;font-size:14px;font-weight:900;color:#eafff1fa}.modalNote{margin-top:12px;font-size:12px;color:#bfe9cfeb;border:1px dashed rgba(42,90,63,.75);background:#07140b40;padding:10px 12px;border-radius:14px}.modalFooter{padding:12px 14px;border-top:1px solid rgba(42,90,63,.55);display:flex;justify-content:flex-end}@media (max-width: 1100px){.workspace{grid-template-columns:300px 1fr;grid-template-areas:"left canvas" "right canvas"}.panel.left{grid-area:left}.canvasWrap{grid-area:canvas}.panel.right{grid-area:right}}@media (max-width: 860px){.hero,.workspace{grid-template-columns:1fr}.palette{max-height:260px}.howtoGrid{grid-template-columns:1fr}.canvasHeader{flex-wrap:wrap;gap:10px}.canvasVariantSwitch{width:100%}.bottomBar{grid-template-columns:1fr}.export{justify-content:space-between}.orderSetup{grid-template-columns:1fr}.orderSetupSide{justify-content:center}}.placed .shape{border:none!important;box-shadow:none!important;border-radius:0!important}.placed .label{display:none!important}