@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(5%)}to{transform:translate(0)}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}*{margin:0;padding:0;box-sizing:border-box}:root{font-size:62.5%}body{overflow:hidden;font:1.6em/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Hiragino Sans,Hiragino Kaku Gothic ProN,Hiragino Kaku Gothic Pro,Meiryo,sans-serif;color:#333}#app,body{background-color:#121212}#app{overflow:scroll;width:100vw;height:100vh}#app.init{overflow:auto;scrollbar-width:none}#app.init::-webkit-scrollbar{display:none}.scroll-body{width:100vw}button,input{-webkit-appearance:none;appearance:none;outline:none;background:none;border-radius:4px;border:none;box-shadow:none;color:inherit;font:inherit}button:disabled,input:disabled{opacity:.75;pointer-events:none}button{cursor:pointer}input[type=text],input[type=url]{height:28px;padding:0 .4em;border:2px solid hsla(0,0%,100%,.7);color:#fff;transition:all .15s}input[type=text]:focus,input[type=text]:hover,input[type=url]:focus,input[type=url]:hover{border-color:#9d92df}input[type=text]:focus,input[type=url]:focus{box-shadow:0 0 5px 0 rgba(157,146,223,.8)}img{border:none;vertical-align:bottom}::placeholder{color:hsla(0,0%,100%,.3)}.grid-wrapper{display:flex;align-items:center;justify-content:center;overflow:hidden;height:100vh}.start-block{position:relative;top:-30px;padding:15px 20px;background-color:hsla(0,0%,100%,.2);border-radius:10px;color:#fff;text-align:center;animation:fadeIn .4s forwards,slideIn .4s forwards}.start-block h1{font-size:3.2rem}.start-block p{margin:1em 0;font-size:1.6rem}.start-block .button-wrapper{position:absolute;bottom:-60px;left:0;right:0;text-align:center}.start-block .button-wrapper .layout{height:40px;padding:0 .75em 0 .5em;border:2px solid hsla(0,0%,100%,.7);background-color:hsla(0,0%,100%,.2);transition:opacity .15s;line-height:36px}.start-block .button-wrapper .layout:hover{opacity:.7}.start-block .button-wrapper .layout img{margin-right:1px}.start-block .button-wrapper img{height:100%}.grid-body{display:grid;grid-column-gap:0;grid-row-gap:0;counter-reset:column}.grid-column{position:relative;z-index:0;animation:scaleIn .2s forwards}.grid-column .column-inner{width:100%;height:100%;transform:opacity .2s}.grid-column .column-inner.drag-enter .move-block{background-color:rgba(101,92,152,.8)}.grid-column .column-inner.dragged{opacity:.4}.grid-column .empty{background-color:hsla(0,0%,100%,.8)}.grid-column .empty,.grid-column .frame-wrapper,.grid-column iframe{width:100%;height:100%}.grid-column iframe{display:block;border:none}.grid-column .url-block{display:flex;align-items:center;justify-content:center;flex-direction:column;position:absolute;top:0;right:0;bottom:0;left:0;z-index:10000;padding:0 20px;background-color:rgba(0,0,0,.7);border:2px dashed hsla(0,0%,100%,.5)}.grid-column .url-block.hidden{display:none}.grid-column .url-block p{color:#fff;font-size:1.3rem}.grid-column .url-block input{margin:10px 0;width:400px;max-width:100%;height:32px;font-size:1.4rem}.grid-column .url-block .button-wrapper{display:flex;align-items:center;justify-content:center}.grid-column .url-block button{display:block;width:96px;height:32px;margin:0 5px;font-size:1.4rem;transition:opacity .15s,background-color .15s,border-color .15s,box-shadow .08s}.grid-column .url-block button:active{box-shadow:inset 0 3px 5px rgba(0,0,0,.3)}.grid-column .url-block .btn-ok{background-color:rgba(157,146,223,.85);color:#fff;font-weight:600}.grid-column .url-block .btn-ok:active,.grid-column .url-block .btn-ok:focus,.grid-column .url-block .btn-ok:hover{background-color:#9d92df}.grid-column .url-block .btn-reset{border:2px solid #aaa;background-color:rgba(231,230,239,.85)}.grid-column .url-block .btn-reset:focus,.grid-column .url-block .btn-reset:hover{border-color:rgba(101,92,152,.8);background-color:#e7e6ef}.grid-column .url-block :invalid+.button-wrapper .btn-ok{opacity:.5;pointer-events:none}.grid-column .move-block{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:10001;background-color:rgba(0,0,0,.7);border:2px dashed hsla(0,0%,100%,.8);text-align:center;transition:background-color .2s;cursor:move}.grid-column .move-block:before{color:#fff;font-size:6rem;font-weight:600;counter-increment:column;content:counter(column)}.grid-column .move-block:after{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:url(../img/icon_move.09789b3a.svg) no-repeat 50% 50%/128px;opacity:.15;content:""}.grid-column .empty~.move-block{background-color:rgba(0,0,0,.5)}.move-active{-webkit-user-select:none;user-select:none}.move-active .grid-column .column-inner>:not(.move-block){pointer-events:none}.move-active .grid-column .move-block{display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}.grid-layout-1x1{grid-template-rows:1fr;grid-template-columns:1fr}.grid-layout-1x2{grid-template-rows:repeat(2,1fr);grid-template-columns:1fr}.grid-layout-2x1{grid-template-rows:1fr}.grid-layout-2x1,.grid-layout-2x3{grid-template-columns:repeat(2,1fr)}.grid-layout-2x3{grid-template-rows:repeat(3,1fr)}.grid-layout-2x3.grid-column-large :first-child{grid-area:1/1/3/3}.grid-layout-3x2{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr)}.grid-layout-3x2.grid-column-large :first-child{grid-area:1/1/3/3}.grid-layout-4x4{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr)}.grid-layout-4x4.grid-column-2x2 :first-child{grid-area:1/1/3/3}.grid-layout-4x4.grid-column-2x2 :nth-child(2){grid-area:1/3/3/5}.grid-layout-4x4.grid-column-2x2 :nth-child(3){grid-area:3/1/5/3}.grid-layout-4x4.grid-column-2x2 :nth-child(4){grid-area:3/3/5/5}.grid-layout-4x4.grid-column-2-t :first-child{grid-area:1/2/3/4}.grid-layout-4x4.grid-column-2-t :nth-child(2){grid-area:3/1/5/3}.grid-layout-4x4.grid-column-2-t :nth-child(3){grid-area:3/3/5/5}.grid-layout-4x4.grid-column-2-b :first-child{grid-area:1/1/3/3}.grid-layout-4x4.grid-column-2-b :nth-child(2){grid-area:1/3/3/5}.grid-layout-4x4.grid-column-2-b :nth-child(3){grid-area:3/2/5/4}.grid-layout-6x6{grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(6,1fr)}.grid-layout-6x6.grid-column-3x3 :first-child{grid-area:1/1/3/3}.grid-layout-6x6.grid-column-3x3 :nth-child(2){grid-area:1/3/3/5}.grid-layout-6x6.grid-column-3x3 :nth-child(3){grid-area:1/5/3/7}.grid-layout-6x6.grid-column-3x3 :nth-child(4){grid-area:3/1/5/3}.grid-layout-6x6.grid-column-3x3 :nth-child(5){grid-area:3/3/5/5}.grid-layout-6x6.grid-column-3x3 :nth-child(6){grid-area:3/5/5/7}.grid-layout-6x6.grid-column-3x3 :nth-child(7){grid-area:5/1/7/3}.grid-layout-6x6.grid-column-3x3 :nth-child(8){grid-area:5/3/7/5}.grid-layout-6x6.grid-column-3x3 :nth-child(9){grid-area:5/5/7/7}.grid-layout-6x6.grid-column-large :first-child{grid-area:1/1/5/5}.grid-layout-6x6.grid-column-large :nth-child(2){grid-area:1/5/3/7}.grid-layout-6x6.grid-column-large :nth-child(3){grid-area:3/5/5/7}.grid-layout-6x6.grid-column-large :nth-child(4){grid-area:5/1/7/3}.grid-layout-6x6.grid-column-large :nth-child(5){grid-area:5/3/7/5}.grid-layout-6x6.grid-column-large :nth-child(6){grid-area:5/5/7/7}@media (max-width:480px),(min-aspect-ratio:9/16){.grid-layout-1x1,.grid-layout-4x4,.grid-layout-6x6{width:100%;height:56.25vw}.grid-layout-1x2{width:88.88889vh;height:100%}.grid-layout-2x1{width:100%;height:28.125vw}.grid-layout-2x3{width:118.51852vh;height:100%}.grid-layout-3x2{width:100%;height:37.5vw}}@media (aspect-ratio:16/9),(min-aspect-ratio:16/9){.grid-layout-1x1,.grid-layout-4x4,.grid-layout-6x6{width:177.77778vh;height:100%}}@media (max-aspect-ratio:8/9){.grid-layout-1x2{width:100%;height:112.5vw}}@media (min-aspect-ratio:32/9){.grid-layout-2x1{width:355.55556vh;height:100%}}@media (max-aspect-ratio:32/27){.grid-layout-2x3{width:100%;height:84.375vw}}@media (min-aspect-ratio:8/3){.grid-layout-3x2{width:266.66667vh;height:100%}}.select-wrapper{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;z-index:-1;width:100vw;height:100vh;background-color:rgba(0,0,0,.5);opacity:0;visibility:hidden;pointer-events:none}.select-wrapper.show{z-index:10100;visibility:visible;pointer-events:auto;animation:fadeIn .3s forwards}.select-wrapper.show .select-body{animation:slideIn .3s forwards}.select-body{position:relative;width:920px;padding:15px 0;background-color:#fff;border-radius:10px;box-shadow:0 2px 6px 0 rgba(0,0,0,.2)}.select-body p{margin-bottom:10px;font-size:1.4rem;text-align:center}.select-body .button-wrapper{display:flex;align-items:center;justify-content:center;margin:10px 0 0}.select-body button{display:block;width:128px;height:32px;margin:0 5px;transition:background-color .15s,box-shadow .08s}.select-body button:active{box-shadow:inset 0 3px 5px rgba(0,0,0,.3)}.select-body .btn-ok{background-color:rgba(101,92,152,.85);color:#fff;font-size:1.6rem;font-weight:600}.select-body .btn-ok:active,.select-body .btn-ok:focus,.select-body .btn-ok:hover{background-color:#655c98}.select-layout{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;list-style:none}.select-layout li{margin:3px}.select-layout input{display:none}.select-layout label{display:flex;align-items:center;justify-content:center;width:142px;height:86px;padding:5px;background-color:#fff;border:2px solid #aaa;border-radius:4px;transition:all .15s;box-shadow:0 0 0 0;cursor:pointer;counter-reset:grids}.select-layout label div{display:grid;width:100%;height:100%;pointer-events:none}.select-layout label span{display:flex;align-items:center;justify-content:center;background-color:#f0f0f0;border:1px solid #ccc;transition:border-color .2s;counter-increment:grids}.select-layout label span:before{color:#666;font-size:1.25rem;font-weight:600;line-height:1.2;content:counter(grids)}.select-layout label:hover{background-color:#e7e6ef;border-color:rgba(101,92,152,.8)}.select-layout label:hover span{border-color:#aaa}.select-layout label .l-1{grid-template-rows:1fr;grid-template-columns:1fr}.select-layout label .l-2{width:50%;grid-template-rows:repeat(2,1fr);grid-template-columns:1fr}.select-layout label .l-3{height:50%;grid-template-rows:1fr;grid-template-columns:repeat(2,1fr)}.select-layout label .l-4{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr)}.select-layout label .l-4 :first-child{grid-area:1/2/3/4}.select-layout label .l-4 :nth-child(2){grid-area:3/1/5/3}.select-layout label .l-4 :nth-child(3){grid-area:3/3/5/5}.select-layout label .l-5{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr)}.select-layout label .l-5 :first-child{grid-area:1/1/3/3}.select-layout label .l-5 :nth-child(2){grid-area:1/3/3/5}.select-layout label .l-5 :nth-child(3){grid-area:3/2/5/4}.select-layout label .l-6{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.select-layout label .l-7{width:66.66667%;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr)}.select-layout label .l-8{height:66.66667%;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr)}.select-layout label .l-9{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr)}.select-layout label .l-10{width:66.66667%;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(2,1fr)}.select-layout label .l-10 :first-child{grid-area:1/1/3/3}.select-layout label .l-11{height:66.66667%;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr)}.select-layout label .l-11 :first-child{grid-area:1/1/3/3}.select-layout label .l-12{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr)}.select-layout label .l-12 :first-child{grid-area:1/1/3/3}.select-layout :checked+label{background-color:#e7e6ef;box-shadow:0 0 6px 0 rgba(101,92,152,.8)}.select-layout :checked+label,.select-layout :checked+label span{border-color:rgba(101,92,152,.8)}.controller-wapper{position:relative}.controller{display:flex;align-items:center;justify-content:center;list-style:none;height:60px;padding:10px 0;background-color:hsla(0,0%,100%,.2)}.controller li{position:relative;margin:0 5px}.controller li.is-ignore{opacity:.5;pointer-events:none}.controller .tooltip{display:block;position:absolute;top:0;left:50%;z-index:10001;padding:5px 8px;background-color:#444;border-radius:4px;color:#fff;font-size:1.2rem;text-align:center;white-space:nowrap;box-shadow:0 0 0 1px hsla(0,0%,100%,.4);transform:translate(-50%,calc(-100% - 15px)) scale(0);transform-origin:50% 100%;transition:transform .15s}.controller button{display:block;width:40px;height:40px;background-color:#333;border:2px solid hsla(0,0%,100%,.5);border-radius:4px;transition:background-color .15s}.controller button:focus,.controller button:hover{background-color:#555}.controller button:active{background-color:#444}.controller button:hover+.tooltip{transform:translate(-50%,calc(-100% - 15px)) scale(1)}.controller button img{width:80%;pointer-events:none}.move-float{position:fixed;top:15px;left:50%;z-index:6000;transform:translate(-50%);padding:10px 15px;border-radius:10px;background-color:hsla(0,0%,100%,.5);animation:fadeIn .2s}.move-float button{display:block;height:32px;padding:0 1em;margin:0 5px;background-color:#655c98;color:#fff;font-size:1.4rem;font-weight:600;transition:opacity .15s,background-color .15s,border-color .15s,box-shadow .08s}.move-float button:active{box-shadow:inset 0 3px 5px rgba(0,0,0,.3)}.move-float button:active,.move-float button:focus,.move-float button:hover{background-color:#655c98}.simplebar-track.simplebar-vertical{width:11px;transition:width .15s}.simplebar-dragging .simplebar-track.simplebar-vertical,.simplebar-track.simplebar-vertical.simplebar-hover{width:15px}.simplebar-scrollbar:before{border-radius:10px;background-color:#fff}@media (max-width:480px){body,html{height:100%}body{font-size:1.4rem}#app{height:100%}.scroll-body{width:100%;height:100%}.sp-none{display:none!important}.grid-wrapper{height:100%}.start-block{top:-50px;margin:0 20px;padding:15px 20px}.start-block h1{font-size:2rem}.start-block p{font-size:1.4rem;text-align:left}.start-block .button-wrapper{bottom:-50px}.start-block .button-wrapper button{height:36px;line-height:32px}.start-block .button-wrapper button:hover{opacity:.7}.start-block .button-wrapper img{height:100%;margin-right:1px}.grid-column .url-block{padding:0 15px}.grid-column .url-block p{display:none}.grid-column .url-block input{height:26px;font-size:1.6rem}.grid-column .url-block .button-wrapper{width:100%}.grid-column .url-block button{width:48%;height:24px;font-size:1.2rem}.select-body{width:calc(100% - 40px);margin:0 20px;padding:15px 20px}.select-layout{width:100%}.select-layout li{width:calc(33.33333% - 4px);margin:2px}.select-layout label{position:relative;width:100%;height:auto;padding:56.25% 0 0}.select-layout label div{position:absolute;top:2px;bottom:2px;left:2px;right:2px;width:auto;height:auto;margin:auto}.controller button{width:32px;height:32px}.simplebar-content,.simplebar-content-wrapper,.simplebar-mask,.simplebar-offset,.simplebar-wrapper{height:100%!important}.simplebar-height-auto-observer-wrapper{display:none}}