article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,picture,img{display:block}input,button,textarea,select{font:inherit}ol,ul{margin:0;padding:0;list-style:none}blockquote,q{quotes:none}table{border-collapse:collapse;border-spacing:0}img{pointer-events:none;-webkit-user-select:none;user-select:none;max-width:100%}*,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,p,figure,picture,blockquote,dl,dd{margin:0;padding:0}h1,h2,h3,h4,h5{font-weight:400}ul[role=list],ol[role=list]{list-style:none}a:not([class]){-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}button{touch-action:manipulation;background-color:#0000;border:none;padding:0}button:disabled{opacity:.3;pointer-events:none;-webkit-user-select:none;user-select:none;transition:all .2s}a,button{color:var(--dark);text-decoration:none}input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:textfield;margin:0}input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:textfield;margin:0}:root{--ff:"Noto Sans JP", sans-serif;--dark:#333;--vw160:clamp(100px, calc(80 / 375 * 100vw), 160px);--vw120:clamp(80px, calc(80 / 375 * 100vw), 120px);--vw100:clamp(50px, calc(80 / 375 * 100vw), 100px);--vw80:clamp(40px, calc(40 / 375 * 100vw), 80px);--vw60:clamp(30px, calc(30 / 375 * 100vw), 50px);--fz28:2.8rem;--fz24:2.4rem;--fz18:1.8rem;--fz16:1.6rem;--fz15:1.5rem;--fz14:1.4rem;--fz12:1.2rem;--base-lh:1.7;--fz24sp:clamp(2.2rem, calc(22 / 375 * 100vw), 2.4rem);--fz15sp:clamp(1.4rem, calc(14 / 375 * 100vw), 1.5rem)}html{font:62.5% var(--ff), "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif}body{text-rendering:optimizespeed;-webkit-font-smoothing:antialiased;scroll-behavior:auto;font-family:var(--ff);font-optical-sizing:auto;font-style:normal;font-weight:400;font-size:var(--fz15);color:var(--dark);background-color:#eee;margin:0;padding:0;line-height:1}.block{background-color:#fff;border-radius:5px;flex-direction:column;gap:30px;width:100%;max-width:1000px;margin:80px auto;padding:80px 40px;display:flex}.block .h1{flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.block .h1 h1{font-size:3rem}.block .h1 #resetTable{color:#fff;background-color:#e45555;width:160px;min-height:40px;font-weight:700;transition:all .4s}.block .h1 #resetTable:hover{opacity:.5}.block hr{border:none;border-bottom:1px solid #ccc;width:100%;margin:0}.block .preview{background-color:#f8f8f8;flex-direction:column;gap:20px;width:100%;padding:40px;display:flex}.block .preview .mask{width:100%;overflow:auto}.block .grid{grid-template-columns:repeat(var(--cols), 1fr);background-color:#fff;border-top:1px solid #888;border-right:1px solid #888;width:fit-content;display:grid}.block .grid .cell{z-index:1;overflow-wrap:anywhere;border-bottom:1px solid #888;border-left:1px solid #888;justify-content:center;align-items:center;min-width:200px;min-height:45px;font-size:16px;line-height:1.4;display:flex;position:relative}.block .grid .cell:before{content:"";z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none;border:1px solid #0000;width:100%;height:100%;transition:all .2s;position:absolute;inset:0}.block .grid .cell textarea{appearance:none;resize:none;background-color:#0000;border:none;width:100%;height:100%;padding:5px 15px;display:none}.block .grid .cell textarea:focus{outline:none}.block .grid .cell span{-webkit-line-clamp:3;-webkit-box-orient:vertical;width:100%;height:auto;padding:5px 15px;display:-webkit-box;overflow:hidden}.block .grid .cell.th{background:#ffe08a}.block .grid .cell.td{background:0 0}.block .grid .cell.selected{background-color:#cce5ff}.block .grid .cell.editing{background-color:#dbebc4;width:400px;min-height:80px}.block .grid .cell.editing span{display:none}.block .grid .cell.editing textarea{display:block}.block .increase-decrease{flex-wrap:wrap;gap:15px 40px;padding:0 40px;display:flex}.block .increase-decrease>div{align-items:center;gap:16px;display:flex}.block .increase-decrease>div button{background-color:#f0f0f0;border:1px solid #ccc;padding:10px;transition:all .4s}.block .increase-decrease>div button:hover{background-color:var(--dark);color:#fff;border-color:var(--dark)}.block .increase-decrease>div p{grid-template-columns:auto 1fr;align-items:center;gap:8px;display:grid}.block .increase-decrease>div p input{appearance:none;background-color:#f8f8f8;border:none;border-radius:5px;width:fit-content;padding:3px 6px}.block .tool-area{flex-wrap:wrap;align-items:center;gap:15px 40px;padding:0 40px;display:flex}.block .tool-area button{background-color:#f0f0f0;border:1px solid #ccc;justify-content:center;align-items:center;gap:8px;width:fit-content;height:auto;padding:10px 30px;transition:all .4s;display:flex}.block .tool-area button:hover{background-color:var(--dark);color:#fff;border-color:var(--dark)}.block #generateBtn{color:#fff;background-color:#003f8e;border:1px solid #003f8e;width:100%;min-height:50px;transition:all .4s}.block #generateBtn:hover{color:#003f8e;background-color:#fff}#code{width:100%;max-width:1000px;margin:0 auto 120px}#code .box{z-index:1;position:relative}#code .box pre{margin:0}#code #copyBtn{z-index:2;color:var(--dark);background-color:#fff;border-radius:5px;padding:10px;transition:all .4s;position:absolute;top:20px;right:20px}#code #copyBtn:hover{opacity:.5}#code .attention{display:none}#code.different .attention{background-color:#fff;border-radius:5px;width:100%;height:auto;margin-bottom:10px;padding:10px 30px;display:block}#code.different .attention p{grid-template-columns:auto 1fr;gap:8px;line-height:1.4;display:grid}@media screen and (width<=768px){.block{gap:15px;padding:60px 15px}.block .h1 h1{font-size:2.6rem}.block .h1 #resetTable{width:120px;min-height:35px}.block .preview{padding:40px 15px}.block .increase-decrease{flex-direction:column;align-items:center}.block .increase-decrease>div{justify-content:space-between;min-width:260px}.block .increase-decrease>div p{min-width:150px}.block .tool-area{flex-direction:column;align-items:center}.block .tool-area button{min-width:260px}}