*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--c-bg: #f5f0e8;--c-surface: rgba(255, 255, 255, .7);--c-text: #1a1a2e;--c-text-sub: #8b7355;--c-accent: #c9a96e;--c-accent-hover: #d4b87a;--c-accent-light: rgba(201, 169, 110, .12);--c-accent-secondary: #8b7355;--c-accent-gold: #C9A96E;--c-border: #e8d5b7;--c-border-focus: #c9a96e;--radius: 14px;--radius-sm: 10px;--shadow: 0 2px 8px rgba(201,169,110,.08), 0 1px 3px rgba(0,0,0,.04);--shadow-lg: 0 8px 24px rgba(201,169,110,.12), 0 2px 6px rgba(0,0,0,.04);--transition: .2s ease;--max-w: 960px}html{font-size:16px;scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;background:var(--c-bg);color:var(--c-text);line-height:1.6;letter-spacing:-.01em;min-height:100dvh;display:flex;flex-direction:column}::selection{background:#c9a96e33;color:var(--c-text)}a{color:var(--c-accent);text-decoration:none;transition:opacity var(--transition)}a:hover{opacity:.8}.header{padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;max-width:var(--max-w);width:100%;margin:0 auto}.header__title{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;background:linear-gradient(135deg,#c9a96e,#8b7355,#1a1a2e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header__subtitle{font-size:.75rem;color:var(--c-text-sub);margin-left:.75rem}.lang-switch{font-size:.8125rem;padding:.375rem .75rem;border:1.5px solid var(--c-border);border-radius:100px;background:var(--c-surface);color:var(--c-text-sub);cursor:pointer;transition:all var(--transition);margin-left:.375rem}.lang-switch:hover{border-color:var(--c-accent);color:var(--c-text)}.lang-switch.active{background:linear-gradient(135deg,#c9a96e,#8b7355);color:#fff;border-color:transparent;font-weight:600}.main{flex:1;max-width:var(--max-w);width:100%;margin:0 auto;padding:0 1.5rem 3rem}.type-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem;list-style:none}.type-tab{position:relative;padding:.5rem 1.125rem;border:1.5px solid var(--c-border);border-radius:100px;background:var(--c-surface);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all var(--transition);color:var(--c-text-sub);white-space:nowrap}.type-tab:after{content:"";position:absolute;bottom:4px;left:50%;transform:translate(-50%) scaleX(0);width:60%;height:2px;background:var(--c-accent);border-radius:1px;transition:transform .3s ease}.type-tab:hover:after{transform:translate(-50%) scaleX(1)}.type-tab.active:after{display:none}.type-tab:hover{background:#c9a96e0f;transform:translateY(-1px);box-shadow:var(--shadow);color:var(--c-text)}.type-tab.active{background:linear-gradient(135deg,#c9a96e,#8b7355);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 2px 8px #c9a96e4d}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}.form-panel{background:#fff9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.6)}.form-group{margin-bottom:1rem}.form-group:last-child{margin-bottom:0}.form-label{display:block;font-size:.8125rem;font-weight:500;color:var(--c-text-sub);margin-bottom:.375rem;transition:color var(--transition)}.form-group:has(.form-input:focus) .form-label,.form-group:has(.form-select:focus) .form-label,.form-group:has(.form-textarea:focus) .form-label{color:var(--c-accent)}.form-input,.form-select,.form-textarea{width:100%;padding:.625rem .875rem;border:1.5px solid var(--c-border);border-radius:var(--radius-sm);font-size:.9375rem;font-family:inherit;color:var(--c-text);background:var(--c-surface);transition:border-color var(--transition),box-shadow var(--transition);outline:none}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px #c9a96e26}.form-textarea{resize:vertical;min-height:80px}.form-checkbox-row{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.form-checkbox-row input[type=checkbox]{width:1.125rem;height:1.125rem;accent-color:var(--c-accent)}.preview-panel{background:#fff9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.6);display:flex;flex-direction:column;align-items:center;gap:1.25rem;position:sticky;top:1.5rem}#qr-canvas{display:flex;justify-content:center;align-items:center;min-height:300px;padding:1rem;background:radial-gradient(circle at center,#fff6,#c9a96e0f);border-radius:var(--radius-sm);width:100%;box-shadow:inset 0 0 0 2px #c9a96e1a,inset 0 0 0 2px #8b73550d}#qr-canvas canvas,#qr-canvas svg{border-radius:var(--radius-sm)}.dl-buttons{display:flex;gap:.75rem;width:100%}.btn{flex:1;padding:.75rem 1rem;border:none;border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition);text-align:center}.btn-primary{background:linear-gradient(135deg,#c9a96e,#8b7355);color:#fff;position:relative;overflow:hidden}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#d4b87a,#a08850);transform:translateY(-1px);box-shadow:0 4px 12px #c9a96e4d,0 0 8px #c9a96e1a}.btn-primary:focus-visible{box-shadow:0 0 0 3px #c9a96e33}.btn-primary:active:not(:disabled){transform:scale(.96) translateY(1px)}.btn-secondary{background:var(--c-surface);color:var(--c-text);border:1.5px solid var(--c-border)}.btn-secondary:hover:not(:disabled){border-color:var(--c-accent);transform:translateY(-1px)}.btn-secondary:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}.customize-toggle{width:100%;padding:.75rem 0;background:none;border:none;border-top:1.5px solid var(--c-border);font-size:.875rem;font-weight:600;color:var(--c-text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:inherit}.customize-toggle:after{content:"\25be";transition:transform var(--transition);color:var(--c-accent)}.customize-toggle[aria-expanded=true]:after{transform:rotate(180deg)}.customize-panel{padding-top:1rem}.customize-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.customize-row:last-child{margin-bottom:0}.customize-label{font-size:.8125rem;color:var(--c-text-sub);min-width:4.5rem}.dot-styles{display:flex;gap:.5rem}.dot-style-btn{width:2.5rem;height:2.5rem;border:2px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.dot-style-btn:hover{border-color:var(--c-accent);transform:translateY(-1px)}.dot-style-btn.active{border-color:var(--c-accent);background:var(--c-accent-light)}.dot-style-btn .dot-preview{width:.75rem;height:.75rem;background:var(--c-text)}.dot-style-btn[data-dot-style=square] .dot-preview{border-radius:0}.dot-style-btn[data-dot-style=rounded] .dot-preview{border-radius:50%}.dot-style-btn[data-dot-style=classy-rounded] .dot-preview{border-radius:3px}.color-input{width:2.5rem;height:2.5rem;border:2px solid var(--c-border);border-radius:var(--radius-sm);padding:2px;cursor:pointer;background:var(--c-surface)}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:none;border-radius:6px}.logo-upload-btn{padding:.5rem 1rem;border:1.5px dashed var(--c-accent);border-radius:var(--radius-sm);background:var(--c-accent-light);font-size:.8125rem;cursor:pointer;color:var(--c-accent);transition:all var(--transition)}.logo-upload-btn:hover{background:#c9a96e26}.logo-remove-btn{padding:.375rem .75rem;border:none;border-radius:var(--radius-sm);background:#ef44441a;color:#ef4444;font-size:.75rem;cursor:pointer}.size-slider{flex:1;accent-color:var(--c-accent)}.size-value{font-size:.8125rem;color:var(--c-text-sub);min-width:3rem;text-align:right}.data-warning{font-size:.8125rem;color:#b45309;background:#fbbf241a;border:1px solid rgba(251,191,36,.3);padding:.625rem .875rem;border-radius:var(--radius-sm);text-align:center;width:100%}.privacy-note{text-align:center;font-size:1rem;color:var(--c-text-sub);margin-top:2rem;padding:.875rem;background:#c9a96e0f;border:1px solid rgba(201,169,110,.12);border-radius:var(--radius-sm)}.footer{padding:1.5rem;text-align:center;font-size:.8125rem;color:var(--c-text-sub);border-top:1.5px solid var(--c-border);margin-top:auto}.footer__links{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}.footer__links a{color:var(--c-text-sub);transition:color var(--transition)}.footer__links a:hover{color:var(--c-accent)}.page-content{max-width:640px;margin:2rem auto;padding:0 1.5rem}.page-content h1{font-size:1.5rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#c9a96e,#8b7355,#1a1a2e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.page-content h2{font-size:1.125rem;margin:1.5rem 0 .75rem}.page-content p{margin-bottom:1rem;color:var(--c-text-sub)}.page-content a.back-link{display:inline-block;margin-top:2rem;padding:.625rem 1.25rem;border:1.5px solid var(--c-border);border-radius:100px;color:var(--c-text);font-size:.875rem;transition:all var(--transition)}.page-content a.back-link:hover{border-color:var(--c-accent);transform:translateY(-1px)}.amazon-link-block{margin:2rem 0;padding:1rem 1.25rem;background:#ffffff80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);text-align:center}.amazon-link-block__label{display:block;font-size:.625rem;color:var(--c-text-sub);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.amazon-link-block__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--c-text)}.amazon-link-block__link:hover{color:var(--c-accent)}.amazon-link-block__arrow{font-size:.75rem}.content-sections{margin-top:3rem}.content-block{margin-bottom:3.5rem}.content-block:after{content:"";display:block;width:60%;height:1px;margin:3.5rem auto 0;background:linear-gradient(90deg,transparent,var(--c-accent),var(--c-accent-secondary),transparent)}.content-block:last-child:after{display:none}.content-block h2{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;margin-bottom:1.25rem;color:var(--c-text);position:relative;padding-bottom:.75rem}.content-block h2:after{content:"";position:absolute;bottom:0;left:0;width:40px;height:3px;background:linear-gradient(90deg,var(--c-accent),var(--c-accent-secondary));border-radius:2px}.content-block h3{font-size:.9375rem;font-weight:600;margin-bottom:.5rem;color:var(--c-text)}.content-block p{font-size:.875rem;color:var(--c-text-sub);line-height:1.8}.steps-grid,.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.qr-types-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.step-card,.feature-card,.qr-type-card{position:relative;overflow:hidden;background:#fff9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1)}.step-card:before,.feature-card:before,.qr-type-card:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 100%);border-radius:var(--radius) var(--radius) 0 0;opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.step-card:hover:before,.feature-card:hover:before,.qr-type-card:hover:before{opacity:1}.step-card:hover,.feature-card:hover,.qr-type-card:hover{transform:translateY(-4px);border-color:#c9a96e4d;box-shadow:0 8px 24px #c9a96e1f,0 0 0 1px #c9a96e26}.faq-list{margin-top:1.5rem}.faq-item{border:1.5px solid var(--c-border);border-radius:var(--radius-sm);margin-bottom:.75rem;background:var(--c-surface);overflow:hidden;transition:border-color var(--transition)}.faq-item:hover,.faq-item[open]{border-color:var(--c-accent)}.faq-question{padding:1rem 1.25rem;font-size:.9375rem;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;color:var(--c-text);transition:background var(--transition)}.faq-question:hover{background:#c9a96e0f}.faq-question:after{content:"\25be";color:var(--c-accent);transition:transform var(--transition);flex-shrink:0;margin-left:.75rem}.faq-item[open] .faq-question:after{transform:rotate(180deg)}.faq-question::-webkit-details-marker{display:none}.faq-answer{padding:0 1.25rem 1rem;font-size:.875rem;color:var(--c-text-sub);line-height:1.7}.logo-size-warning{font-size:.8125rem;color:#b45309;background:#fbbf241a;border:1px solid rgba(251,191,36,.3);padding:.625rem .875rem;border-radius:var(--radius-sm);text-align:center;width:100%}.articles-description{font-size:.9375rem;color:var(--c-text-sub);line-height:1.7;margin-bottom:1.5rem}.articles-grid{display:grid;grid-template-columns:1fr;gap:1rem}.article-card{display:block;background:#fff9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform var(--transition),box-shadow var(--transition)}.article-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);opacity:1}.article-card__title{font-size:1.0625rem;font-weight:600;color:var(--c-text);margin-bottom:.375rem}.article-card__desc{font-size:.875rem;color:var(--c-text-sub);line-height:1.6;margin-bottom:.5rem}.article-card__date{font-size:.75rem;color:var(--c-text-sub)}.article-content{max-width:720px}.article-meta{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;font-size:.8125rem;color:var(--c-text-sub)}.article-meta__date,.article-meta__reading-time{color:var(--c-text-sub)}.article-section{margin-bottom:2rem}.article-section h2{font-size:1.25rem;font-weight:700;margin-bottom:.75rem;color:var(--c-text)}.article-section h3{font-size:1.0625rem;font-weight:600;margin-bottom:.5rem;color:var(--c-text)}.article-section p{line-height:1.8;margin-bottom:1rem;color:var(--c-text-sub);font-size:.9375rem}.article-section ul,.article-section ol{margin-bottom:1rem;padding-left:1.5rem;color:var(--c-text-sub);font-size:.9375rem;line-height:1.8}.article-section li{margin-bottom:.375rem}.article-section code{font-size:.875em;background:#c9a96e14;padding:.125rem .375rem;border-radius:4px;font-family:SF Mono,Fira Code,Fira Mono,Roboto Mono,monospace}.article-nav{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:2rem}.amazon-inline-link{color:var(--c-accent);font-weight:500;text-decoration:underline;text-decoration-color:#c9a96e4d;text-underline-offset:2px;transition:text-decoration-color var(--transition)}.amazon-inline-link:hover{text-decoration-color:var(--c-accent);opacity:1}@keyframes ripple{to{transform:scale(4);opacity:0}}.ripple-wave{position:absolute;border-radius:50%;background:#ffffff4d;transform:scale(0);animation:ripple .6s ease-out;pointer-events:none}.btn-downloaded{pointer-events:none}.scroll-fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}.scroll-fade-in.is-visible{opacity:1;transform:translateY(0)}.scroll-fade-in:nth-child(2){transition-delay:.1s}.scroll-fade-in:nth-child(3){transition-delay:.2s}.scroll-fade-in:nth-child(4){transition-delay:.3s}.scroll-fade-in:nth-child(5){transition-delay:.4s}.scroll-fade-in:nth-child(6){transition-delay:.5s}@supports not (backdrop-filter: blur(24px)){.form-panel,.preview-panel,.step-card,.feature-card,.qr-type-card,.article-card{background:#fffffff2}}.illustration-area{display:flex;justify-content:center;margin-top:2rem}.illustration-area svg{width:100%;max-width:320px;height:auto}@keyframes dotFall{0%,to{transform:translateY(-30px);opacity:0}30%{opacity:1}50%,80%{transform:translateY(0);opacity:1}90%{transform:translateY(0);opacity:0}}.qr1-dot{animation:dotFall 4s ease-in-out infinite}@keyframes slideFromLeft{0%{transform:translate(-40px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideFromRight{0%{transform:translate(40px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideFromTop{0%{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideFromBottom{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.pz-l{animation:slideFromLeft 2s ease-out infinite alternate}.pz-r{animation:slideFromRight 2s ease-out infinite alternate}.pz-t{animation:slideFromTop 2s ease-out infinite alternate}.pz-b{animation:slideFromBottom 2s ease-out infinite alternate}@keyframes wobble{0%,to{transform:rotate(0) translateY(0)}15%{transform:rotate(8deg) translateY(-3px)}30%{transform:rotate(-6deg)}45%{transform:rotate(4deg) translateY(-2px)}60%{transform:rotate(-3deg)}75%{transform:rotate(2deg)}}.tool6{animation:wobble 2s ease-in-out infinite}@keyframes typeIn{0%,to{opacity:0}20%,80%{opacity:1}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.type7-dot{animation:typeIn 3s ease-in-out infinite}.cursor7{animation:blink .8s step-end infinite}@keyframes spiralIn{0%,to{transform:rotate(0) translate(50px);opacity:0}20%{opacity:1}50%,80%{transform:rotate(720deg) translate(0);opacity:1}90%{opacity:0}}.spiral9{animation:spiralIn 5s ease-in-out infinite}@keyframes printLayer{0%{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes scanLine{0%{transform:translateY(80px)}to{transform:translateY(0)}}.print10{animation:printLayer 4s linear infinite}.scan10{animation:scanLine 4s linear infinite}@keyframes hankoPress{0%{transform:translateY(-40px) scale(1.15) rotate(-5deg);opacity:0}25%{transform:translateY(0) scale(1) rotate(0);opacity:1}35%{transform:scale(1.03)}45%,to{transform:scale(1);opacity:1}}@keyframes inkSplash{0%,20%{opacity:0;transform:scale(0)}30%{opacity:.6;transform:scale(1.1)}50%{opacity:.3;transform:scale(1.4)}to{opacity:0;transform:scale(1.6)}}.hanko11{animation:hankoPress 3.5s ease-out infinite}.ink11{animation:inkSplash 3.5s ease-out infinite}@keyframes kaleidoscope{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes kalePulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.kale19{animation:kaleidoscope 8s linear infinite}.kalePulse19{animation:kalePulse 4s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.scroll-fade-in{opacity:1;transform:none;transition:none}.scroll-fade-in:nth-child(2),.scroll-fade-in:nth-child(3),.scroll-fade-in:nth-child(4),.scroll-fade-in:nth-child(5),.scroll-fade-in:nth-child(6){transition-delay:0s}.ripple-wave{animation:none}.step-card,.feature-card,.qr-type-card{transition:none}.step-card:before,.feature-card:before,.qr-type-card:before{transition:none}.type-tab:after{transition:none}.illustration-area svg *{animation:none!important}}@media(max-width:768px){.workspace{grid-template-columns:1fr}.preview-panel{position:fixed;bottom:0;left:0;right:0;z-index:100;border-radius:var(--radius) var(--radius) 0 0;background:#fffc;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 -4px 20px #c9a96e1a;padding:1rem;gap:.75rem;max-height:45dvh;overflow-y:auto;border-bottom:none}#qr-canvas{min-height:160px;padding:.5rem}#qr-canvas canvas,#qr-canvas svg{max-width:160px;max-height:160px}.main{padding-bottom:280px}.header__subtitle{display:none}.type-tabs{gap:.375rem}.type-tab{padding:.4rem .75rem;font-size:.75rem;min-height:44px}.steps-grid,.features-grid,.qr-types-grid{grid-template-columns:1fr}.article-meta{flex-direction:column;align-items:flex-start;gap:.25rem}.article-nav{flex-direction:column;align-items:stretch}.article-nav .back-link{text-align:center}.step-card:hover,.feature-card:hover,.qr-type-card:hover{transform:none;border-color:#fff9;box-shadow:var(--shadow)}.step-card:hover:before,.feature-card:hover:before,.qr-type-card:hover:before{opacity:0}.step-card:active,.feature-card:active,.qr-type-card:active{transform:scale(.98)}.content-block{margin-bottom:2.5rem}.content-block:after{margin-top:2.5rem}}