@charset "UTF-8";.interactive-section{margin-bottom:30px}.interactive-section .clip-path-preview{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;max-width:350px;aspect-ratio:1/1;background-color:#fff;border:2px dashed #ccc;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:20px;margin-left:auto;margin-right:auto}.interactive-section .clip-path-preview .preview-box{width:100%;height:100%;background:url(../../img/common/tsutenkaku.jpg) no-repeat center/cover;-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:1}.interactive-section .clip-path-preview .points-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}.interactive-section .clip-path-preview .points-container .point,.interactive-section .clip-path-preview .points-container .trigger{pointer-events:auto}.interactive-section .clip-path-preview .points-container .point{width:14px;height:14px;background-color:#f0f;border:2px solid #fff;border-radius:50%;position:absolute;cursor:pointer;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2}.interactive-section .clip-path-preview .points-container .point.active{background-color:#0f0}.interactive-section .clip-path-preview .points-container .trigger{width:10px;height:10px;background-color:#0ff;border:2px solid #fff;border-radius:50%;position:absolute;pointer-events:none;opacity:0;z-index:1}.interactive-section .clip-path-preview .points-container .trigger.active{opacity:1}.interactive-section .buttons-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:20px;margin-top:40px}.interactive-section .buttons-group .button{padding:10px 20px;border-radius:4px;border:1px solid #ccc}.interactive-section .buttons-group .control-button{color:#fff;border:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:20px 20px;border:1px solid #ccc;background:0 0;color:#fff;border-radius:4px}.interactive-section .buttons-group .control-button div{width:50px;height:50px;background-color:#235180}.interactive-section .buttons-group .control-button.active{-webkit-box-shadow:0 0 5px rgba(0,0,0,.17);box-shadow:0 0 5px rgba(0,0,0,.17)}.interactive-section .buttons-group .control-button.triangle-button div{-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%)}.interactive-section .buttons-group .control-button.square-button div{-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.interactive-section .buttons-group .control-button.pentagon-button div{-webkit-clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}.interactive-section .buttons-group .control-button.hexagon-button div{-webkit-clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}.interactive-section .buttons-group .control-button.trapezoid-button div{-webkit-clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.interactive-section .buttons-group .control-button.parallelogram-button div{-webkit-clip-path:polygon(25% 0,100% 0,75% 100%,0 100%);clip-path:polygon(25% 0,100% 0,75% 100%,0 100%)}.interactive-section .buttons-group .control-button.circle-button div{-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%)}.html-code-section{margin-bottom:30px}.html-code-section .code-display{background:-webkit-linear-gradient(315deg,#0f2027,#203a43,#2c5364);background:-o-linear-gradient(315deg,#0f2027,#203a43,#2c5364);background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);color:#fff;font-size:16px;letter-spacing:.05em;width:100%;padding:20px;border:1px solid #ccc;border-radius:8px;overflow:auto;white-space:pre-wrap;word-wrap:break-word;-webkit-box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:0 4px 6px rgba(0,0,0,.1);font-size:16px!important}.html-code-section .copy-button{margin-top:10px;width:100%;height:50px;padding:8px 16px;background-color:#235180;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:700;-webkit-transition:background-color .3s ease;-o-transition:background-color .3s ease;transition:background-color .3s ease}.html-code-section .copy-button:hover{background-color:#3e6093}.html-code-section .copy-button:disabled{background-color:#9e9e9e;cursor:not-allowed}@media (max-width:600px){.clip-path-preview{width:100%;aspect-ratio:1/1}.clip-path-preview .preview-box{width:100%;height:100%}.buttons-group .control-button{width:40px;height:40px}.html-code-section .code-display{height:200px;padding:15px;font-size:.9em}}