h1{text-align:center;margin-bottom:10px}h2{margin:0 0 30px}.center{text-align:center;display:block}main.color-simulation{max-width:1113px;margin:0 auto;padding:30px 25px 100px;display:flex;justify-content:space-between}section.svg{width:60%}section.svg-group .svg-wrapper{display:none}section.svg-group .svg-wrapper.active{display:block}div.type-list{border-bottom:1px solid #333;margin-bottom:30px}div.type-selector{margin-top:10px;padding-bottom:10px;display:flex;flex-wrap:wrap;align-items:center}div.type-selector span{display:block}div.type-selector input{cursor:pointer}div.type-selector label{margin-right:20px;cursor:pointer}section.selector{width:40%;padding-left:60px}form{margin-top:60px}.parts-name{border-bottom:1px solid #333}.parts-name label{cursor:pointer}.parts-name input{cursor:pointer}div.parts-list{margin-bottom:30px}div.colorlist{display:grid;grid-template-columns:repeat(13,1fr);gap:10px;margin-top:20px;display:none}div.colorlist.active{display:grid}div.colorbox{width:100%}input[name=colorbox]{appearance:none;display:block;cursor:pointer;width:100%;height:100%;border-radius:0}div.colorbox.checked{outline:3px solid #6fd3fb}div.colorbox:after{padding-top:100%;content:'';display:block}canvas{display:none}div#outputBtn,div#form-button a{display:block;background-color:#333;color:#eee;text-align:center;padding:15px;font-size:12px;font-weight:600;border-radius:5px;cursor:pointer}div#outputBtn:hover{background-color:#555}div.form-notice{margin-top:15px}div#form-button{margin-top:40px}div#form-button a{background-color:#009dbf}div#form-button a:hover{text-decoration:none;background-color:#0ebce1}@media screen and (max-width:700px){h2{font-size:12px;margin-bottom:20px}main.color-simulation{display:block}section.svg{width:100%;height:45%;left:0;position:fixed;padding:20px;box-sizing:border-box;top:56px;background-color:#fff}section.svg svg{height:100%;width:auto;max-width:100%;margin:0 auto;display:block}.svg-wrapper{height:100%;margin:0 auto}form{margin-top:30px}div#form-button a:hover{background-color:#009dbf}div#outputBtn:hover{background-color:#333}section.selector{width:100%;padding:0 25px 30px;border-top:1px solid #ddd;position:fixed;box-sizing:border-box;bottom:0;height:35%;overflow-y:scroll;background-color:#fff;left:0;z-index:99999999}footer#footer{display:none}.whole-layout{z-index:999;position:relative;min-height:calc(100vh - 56px);min-height:calc(100dvh - 56px)}}div#target{display:none}div.target{width:1200px;padding:30px;max-width:100%;box-sizing:border-box}div.target .svg-output{width:80%;margin:0 auto;padding:30px 0}div.target svg{width:100%;height:auto;margin:0 auto;display:block}div.target ul.parts{list-style:none;padding:0}div.target ul.parts li{border-bottom:1px solid #333;display:flex;align-items:center}div.target ul.parts li h3{margin-right:30px}div.target ul.parts li .colors{display:flex;align-items:center}div.target ul.parts li .colors .color{width:20px;height:20px;margin-right:10px}