@charset "UTF-8";html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:100px}@media(max-width:768px){html{font-size:14px}}img{object-fit:contain;display:block;border-radius:10px}body{margin:0;line-height:1.7}ul{padding:0}li{list-style:none}section{width:100%;padding:25px;max-width:1e3px;margin:0 auto 20px;box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0 0 1em}a{text-decoration:none;color:#a06bb5}p{margin:0 0 1em}.column-2{display:flex}button{background-color:initial;border:none;cursor:pointer;outline:none;padding:0;appearance:none}a:hover{color:#a06bb5}footer{text-align:center;padding:10px}summary{cursor:pointer}pre{border-radius:5px;overflow-x:auto;padding:10px;box-sizing:border-box;white-space:pre}blockquote{background-color:#f0f0f0;padding:10px 20px;margin:0 0 20px}header{padding:25px}header img{width:200px;margin:0 auto}header p{font-size:.8em;text-align:center}.display-sp{display:none}@media(max-width:768px){.display-sp{display:block}}.display-pc{display:block}@media(max-width:768px){.display-pc{display:none}}.txt-red{color:red!important}.txt-bold{font-weight:700!important}.come{border:2px solid #f0f0f0;padding:0 20px;border-radius:10px}.come ul{padding-left:20px}.come ul li{position:relative;margin-bottom:5px}.come ul li:before{content:"\f06a";font-family:"font awesome 7 free";position:absolute;left:-25px;color:#a06bb5}.check{border:2px solid #f0f0f0;padding:0 20px;border-radius:10px}.check ul{padding-left:20px}.check ul li{position:relative;margin-bottom:5px}.check ul li:before{content:"\f058";font-family:"font awesome 7 free";position:absolute;left:-25px;color:#a06bb5}.fade-in{opacity:0;transform:translateY(20px);transition:opacity .8s ease-out,transform .8s ease-out}.fade-in.is-visible{opacity:1;transform:translateY(0)}.template-container{display:flex;align-items:flex-start;padding:20px;max-width:1e3px;margin:0 auto}@media(max-width:768px){.template-container{flex-direction:column;padding:0}}.template-container h2{background:#f0f0f0;width:100%;text-align:center;padding:20px;box-sizing:border-box;border-radius:10px;margin-bottom:20px}.template-container h3{padding:1rem;border-top:3px solid #333;border-bottom:3px solid #333}.template-container h4{border-bottom:1px solid #888;padding-bottom:5px;display:inline-block}.template-container h5{font-size:1em;margin-bottom:0;position:relative;padding-left:20px}.template-container h5:before{position:absolute;left:0;content:"\f0c8";font-family:"font awesome 7 free"}.template-container .side{position:sticky;top:20px;width:250px}@media(max-width:768px){.template-container .side{position:static;width:100%}}.template-detail{width:100%;flex:1;min-width:0}.detail-header{margin-bottom:0}.detail-links{display:flex;flex-direction:column;font-size:1.2em;gap:20px;margin:50px 0}.detail-links a{padding:13px 20px;border:1px solid;border-radius:50px;line-height:1;text-align:center;color:#333}.detail-links a:hover{color:#a06bb5}.file-tree{font-family:monospace;background:#f8f9fa;padding:20px;border-radius:5px;overflow-x:auto;white-space:nowrap;margin-bottom:20px}.file-tree div{display:grid;grid-template-columns:200px 1fr;align-items:center;position:relative;padding-left:25px;margin:5px 0}.file-tree div::before{position:absolute;left:0;top:3px;font-family:"font awesome 7 free";font-weight:900}.file-tree div div{grid-column:1/3;margin-left:15px;padding-left:20px}.file-tree .folder::before{content:"\f07b";color:#f3d36e}.file-tree .file::before{content:"\f15b";color:#999}.file-tree .file-html::before{content:"\f2d0";color:#e34c26}.file-tree .note{grid-column:2;color:#888;font-size:.85rem;font-family:sans-serif;padding-left:10px}.file-tree .note::before{content:"--- ";opacity:.5}.how-to-container{display:flex;align-items:flex-start;padding:20px;max-width:1e3px;margin:0 auto}@media(max-width:768px){.how-to-container{flex-direction:column;padding:0}}.how-to-container .side{position:sticky;top:20px;width:250px}@media(max-width:768px){.how-to-container .side{position:static;width:100%}}.how-to-container h2{background:#f0f0f0;width:100%;text-align:center;padding:20px;box-sizing:border-box;border-radius:10px}.how-to-detail{width:100%;flex:1;min-width:0}.how-to-detail a{color:#333}.how-to-detail a:hover{color:#a06bb5}.side{width:200px;color:#333;background-color:#fff;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,9%);padding:20px;box-sizing:border-box}@media(max-width:768px){.side{width:100%}}.side h4{text-align:center;margin:40px 0 20px;position:relative;line-height:1}.side h4::before{content:"";width:50px;height:2px;background-color:#ccc;position:absolute;top:50%;transform:translateY(-50%);left:0;font-size:.6em}.side h4::after{content:"";width:50px;height:2px;background-color:#ccc;position:absolute;top:50%;transform:translateY(-50%);right:0;font-size:.6em}@media(max-width:768px){.side h4{width:150px;margin:40px auto 20px;font-size:1.2em}}.side h5{font-size:16px;margin-bottom:5px}.side-menu{font-size:.8em;font-weight:700;display:grid;align-content:start;gap:15px}@media(max-width:768px){.side-menu{justify-items:center}}.side-menu a{display:block;width:100%;color:#333}.side-menu a:hover{color:#a06bb5}.filter-section{display:flex;flex-direction:column;margin-bottom:20px}.filter-section label{cursor:pointer}.tag-wrap summary{list-style:none;background-color:#f0f0f0;border-radius:8px;padding:5px 10px;font-size:.8em;font-weight:700;position:relative}.tag-wrap summary:after{position:absolute;top:50%;transform:translateY(-50%);right:10px;content:"\f107";font-family:"font awesome 7 free";transition:transform .2s ease}.tag-wrap details[open] summary:after{transform:translateY(-50%)rotate(180deg)}.tag-wrap div{display:flex;flex-direction:column;gap:5px;margin-top:5px}.news-wrap{background-color:#f0f0f0}.news-wrap h2{position:relative;line-height:1}.news-wrap h2::before{content:"";width:50px;height:2px;background-color:#ccc;position:absolute;top:50%;transform:translateY(-50%);left:-60px;font-size:.6em}.news-list{display:flex;flex-direction:column;gap:10px}.news-list li{display:flex;flex-direction:column;padding:10px;background:#fff;border-radius:10px}.news-list a{transition:transform .3s ease}.news-list a:hover{transform:translateY(-2px)}.news-list .date{font-size:.8em;color:#888}.new-template{display:flex;flex-direction:row-reverse;gap:30px}.new-template h2{position:relative;line-height:1}.new-template h2::before{content:"";width:50px;height:2px;background-color:#ccc;position:absolute;top:50%;transform:translateY(-50%);left:-60px;font-size:.6em}.new-template h3{text-align:center;margin:10px 0}@media(max-width:768px){.new-template{flex-direction:column}}.template-wrap{width:100%;flex:1}.template-grid{display:grid;grid-template-columns:repeat(auto-fit,340px);justify-content:center;justify-items:center;gap:20px;margin-bottom:32px}.template-meta{display:flex;flex-direction:column;gap:5px;background:#f0f0f0;padding:10px;border-radius:10px}.meta-group{display:grid;grid-template-columns:50px 1fr;align-items:center;column-gap:10px;row-gap:5px}.meta-group p{margin:0}.meta-group div{display:flex;flex-wrap:wrap;gap:5px}.meta-item{font-size:.8em;border:1px solid;border-radius:30px;padding:2px 10px;background:#fff;text-decoration:none;color:inherit}.js-tag-self{cursor:pointer;user-select:none}.js-tag-self.is-active{background:#333;color:#fff}button#js-filter-clear-btn{margin-top:10px;cursor:pointer;border:1px solid;border-radius:30px;padding:10px 20px;background:#fff;text-decoration:none;color:inherit;line-height:1}.thumb img{display:block;margin:0 auto}.template-card{width:300px;padding:20px}.template-card a{display:block;position:relative;overflow:hidden;text-decoration:none;color:inherit;-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate}.template-card a .thumb{line-height:0}.template-card a .thumb img{width:100%;height:auto;transition:transform .4s ease}.template-card a .card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:2;border-radius:10px}.template-card a .overlay-text{color:#fff;font-weight:700;border:1px solid #fff;padding:10px 20px;font-size:.9rem;letter-spacing:.1em;transform:translateY(10px);transition:transform .3s ease}.template-card a:hover{border-radius:10px}.template-card a:hover .card-overlay{opacity:1;border-radius:10px}.template-card a:hover .overlay-text{transform:translateY(0)}