:root{color:#243d4b;font-synthesis:none;text-rendering:optimizelegibility;background:#f3f7f8;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans JP,sans-serif}*{box-sizing:border-box}html{background:#f3f7f8;min-width:320px}body{min-width:320px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}#root{min-height:100vh}.app-shell{width:min(960px,100% - 32px);margin:0 auto;padding:56px 0 72px}.hero{text-align:center;max-width:760px;margin:0 auto 32px}.hero-logo{filter:drop-shadow(0 10px 20px #1f806c2e);width:88px;height:88px;margin:0 auto 18px;display:block}.eyebrow{color:#1f6f5f;letter-spacing:.08em;margin:0 0 10px;font-size:.9rem;font-weight:800}.hero h1{color:#172b3a;margin:0;font-size:clamp(2rem,6vw,3.4rem);line-height:1.15}.hero p:not(.eyebrow){color:#526574;margin:20px auto 0;line-height:1.85}.card,.privacy-card{background:#fff;border:1px solid #dbe4ea;border-radius:20px;box-shadow:0 18px 50px #1b344614}.card{padding:28px}.section-heading{align-items:center;gap:12px;margin-bottom:18px;display:flex}.section-heading span{color:#1f6f5f;background:#e8f5f1;border-radius:999px;padding:5px 9px;font-size:.75rem;font-weight:800}.section-heading h2{margin:0;font-size:1.35rem}.drop-zone{cursor:pointer;color:#243d4b;background:#f7fafb;border:2px dashed #9eb5c2;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:9px;width:100%;min-height:190px;transition:all .2s;display:flex}.drop-zone:hover,.drop-zone.is-dragging{background:#edf8f5;border-color:#1f806c;transform:translateY(-1px)}.drop-zone strong{font-size:1.08rem}.drop-zone span{color:#687b88;font-size:.9rem}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.error-message{color:#9b2525;background:#fff0f0;border-radius:10px;margin:16px 0 0;padding:12px 14px;font-weight:700}.preview-grid{grid-template-columns:minmax(0,1.45fr) minmax(240px,.55fr);gap:24px;margin-top:28px;display:grid}.preview-frame{background-color:#0000;background-image:linear-gradient(45deg,#eef3f6 25%,#0000 25%),linear-gradient(-45deg,#eef3f6 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#eef3f6 75%),linear-gradient(-45deg,#0000 75%,#eef3f6 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border-radius:14px;place-items:center;min-height:280px;display:grid;overflow:hidden}.preview-frame img{object-fit:contain;width:100%;max-height:520px;display:block}.file-panel{background:#f6f9fa;border-radius:14px;padding:20px}.file-panel h3{margin:0 0 10px}.file-panel dl{margin:0}.file-panel dl div{border-bottom:1px solid #dce5ea;padding:12px 0}.file-panel dt{color:#6a7c88;font-size:.78rem}.file-panel dd{overflow-wrap:anywhere;margin:4px 0 0;font-weight:700}.secondary-button{cursor:pointer;color:#243d4b;background:#fff;border:1px solid #b7c6ce;border-radius:10px;width:100%;margin-top:18px;padding:11px 14px;font-weight:700}.secondary-button:hover{background:#edf2f4}.privacy-card{gap:16px;margin-top:24px;padding:23px 26px;display:flex}.privacy-icon{color:#166b58;background:#def4ec;border-radius:50%;flex:none;place-items:center;width:38px;height:38px;font-weight:900;display:grid}.privacy-card h2{margin:0;font-size:1.05rem}.privacy-card p{color:#5b6e7a;margin:7px 0 0;line-height:1.7}@media (width<=720px){.app-shell{padding-top:34px}.card{padding:20px}.preview-grid{grid-template-columns:1fr}}@media (width<=480px){.app-shell{width:min(100% - 20px,960px)}.drop-zone{min-height:155px;padding:18px}.privacy-card{padding:20px}}.settings-section{border-top:1px solid #dbe4ea;margin-top:32px;padding-top:30px}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.field{display:block}.field>span{color:#314b5a;margin-bottom:8px;font-weight:800;display:block}.field input,.field select{color:#203844;background:#fff;border:1px solid #b8c8d0;border-radius:10px;width:100%;min-height:46px;padding:10px 12px}.field input:focus,.field select:focus{border-color:#1f806c;outline:3px solid #1f806c2e}.input-with-unit{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px;display:grid}.input-with-unit>span{color:#627783;min-width:32px;font-weight:800}.fit-options{border:0;gap:12px;margin:24px 0 0;padding:0;display:grid}.fit-options legend{color:#314b5a;margin-bottom:10px;font-weight:800}.fit-options label{cursor:pointer;background:#f8fbfb;border:1px solid #d7e1e6;border-radius:12px;gap:12px;padding:15px 16px;display:flex}.fit-options label:has(input:checked){background:#edf8f5;border-color:#56a997}.fit-options input{width:18px;height:18px;margin-top:2px}.fit-options strong,.fit-options small{display:block}.fit-options small{color:#60737f;margin-top:4px;line-height:1.55}.next-note{color:#705d16;background:#fff8df;border-radius:11px;gap:10px;margin-top:24px;padding:13px 15px;line-height:1.55;display:flex}@media (width<=620px){.settings-grid{grid-template-columns:1fr}.next-note{flex-direction:column}}.primary-button{cursor:pointer;color:#fff;background:#1f806c;border:0;border-radius:12px;width:min(100%,360px);margin:26px auto 0;padding:14px 20px;font-weight:800;display:block;box-shadow:0 10px 22px #1f806c33}.primary-button:hover:not(:disabled){background:#176b5b}.primary-button:disabled{cursor:not-allowed;opacity:.58}.result-section{border-top:1px solid #dbe4ea;margin-top:34px;padding-top:30px}.result-grid{grid-template-columns:minmax(0,1.45fr) minmax(240px,.55fr);gap:24px;display:grid}.result-preview{min-height:260px}.result-panel{align-self:start}.size-status{border-radius:10px;margin:18px 0 0;padding:12px 13px;font-size:.9rem;font-weight:700;line-height:1.55}.success-status{color:#176b58;background:#eaf7f2}.warning-status{color:#75560f;background:#fff4db}.download-preview-link{color:#176b58;text-align:center;background:#fff;border:1px solid #9eb8ad;border-radius:10px;margin-top:14px;padding:11px 14px;font-weight:800;text-decoration:none;display:block}.download-preview-link:hover{background:#edf8f5}@media (width<=720px){.result-grid{grid-template-columns:1fr}}.ratio-display{color:#35534c;background:#f3faf8;border:1px solid #d7e5e1;border-radius:11px;justify-content:space-between;align-items:center;gap:14px;margin-top:18px;padding:13px 15px;display:flex}.ratio-display strong{color:#176b58;font-size:1.15rem}.crop-editor{background:#f8fbfb;border:1px solid #cfe0dc;border-radius:14px;margin-top:24px;padding:20px}.crop-editor-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.crop-editor-heading h3{margin:0}.crop-editor-heading button{cursor:pointer;color:#285a4e;background:#fff;border:1px solid #a9beb8;border-radius:9px;padding:8px 12px;font-weight:700}.crop-editor>p{color:#5a6e77;margin:10px 0 16px;line-height:1.65}.crop-stage-wrap{background:#19252b;border-radius:12px;justify-content:center;padding:10px;display:flex;overflow:auto}.crop-stage{-webkit-user-select:none;user-select:none;touch-action:none;max-width:100%;line-height:0;display:inline-block;position:relative}.crop-stage>img{pointer-events:none;width:auto;max-width:100%;max-height:560px;display:block}.crop-shade{z-index:1;pointer-events:none;background:#00000094;position:absolute}.crop-shade-top{width:100%;top:0;left:0}.crop-shade-bottom{bottom:0;left:0;right:0}.crop-shade-left{left:0}.crop-shade-right{right:0}.crop-box{z-index:2;cursor:move;touch-action:none;border:2px solid #fff;position:absolute;box-shadow:0 0 0 1px #145849cc}.crop-grid-line{pointer-events:none;background:#ffffff8c;position:absolute}.crop-grid-v1,.crop-grid-v2{width:1px;top:0;bottom:0}.crop-grid-v1{left:33.333%}.crop-grid-v2{left:66.666%}.crop-grid-h1,.crop-grid-h2{height:1px;left:0;right:0}.crop-grid-h1{top:33.333%}.crop-grid-h2{top:66.666%}.crop-handle{cursor:nwse-resize;touch-action:none;background:#1f806c;border:3px solid #fff;border-radius:50%;width:28px;height:28px;position:absolute;bottom:-12px;right:-12px;box-shadow:0 2px 8px #00000059}body.is-cropping{cursor:grabbing;-webkit-user-select:none;user-select:none}@media (width<=620px){.ratio-display,.crop-editor-heading{flex-direction:column;align-items:flex-start}.crop-editor{padding:15px}}.quality-status{margin-top:10px}.section-heading-with-action{justify-content:space-between}.section-heading-main{align-items:center;gap:12px;display:flex}.inline-secondary-button{cursor:pointer;color:#285a4e;background:#fff;border:1px solid #a9beb8;border-radius:9px;padding:9px 13px;font-weight:800}.inline-secondary-button:hover{background:#edf8f5}@media (width<=620px){.section-heading-with-action{flex-direction:column;align-items:stretch}.inline-secondary-button{width:100%}}.crop-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px;display:grid}.crop-metrics>div{background:#fff;border:1px solid #d7e5e1;border-radius:10px;padding:12px 13px}.crop-metrics span,.crop-metrics strong{display:block}.crop-metrics span{color:#667982;margin-bottom:5px;font-size:.78rem;font-weight:700}.crop-metrics strong{color:#24473f;font-size:.95rem;line-height:1.45}@media (width<=720px){.crop-metrics{grid-template-columns:1fr}}.mobile-crop-controls{display:none}@media (width<=720px){.mobile-crop-controls{z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#f8fbfbf7;border:1px solid #b9d2cb;border-radius:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:0 0 12px;padding:10px;display:grid;position:sticky;top:8px;box-shadow:0 8px 20px #1f403724}.mobile-crop-controls label>span,.mobile-ratio>span{color:#526b64;margin-bottom:4px;font-size:.72rem;font-weight:800;display:block}.mobile-input-with-unit{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;display:grid}.mobile-input-with-unit input{color:#203844;background:#fff;border:1px solid #aebfc6;border-radius:8px;width:100%;min-width:0;height:40px;padding:7px 8px;font-size:16px}.mobile-input-with-unit input:focus{border-color:#1f806c;outline:3px solid #1f806c2e}.mobile-input-with-unit span{color:#60756e;font-size:.78rem;font-weight:800}.mobile-ratio{background:#fff;border:1px solid #d7e5e1;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;min-height:40px;padding:7px 10px;display:flex}.mobile-ratio>span{margin:0}.mobile-ratio strong{color:#176b58}.mobile-crop-controls>button{cursor:pointer;color:#285a4e;background:#fff;border:1px solid #a9beb8;border-radius:8px;min-height:40px;padding:7px 10px;font-weight:800}}@media (width<=380px){.mobile-crop-controls{gap:6px;padding:8px}.mobile-ratio,.mobile-crop-controls>button{font-size:.84rem}}.preset-panel{background:#f6fbfa;border:1px solid #d7e5e1;border-radius:12px;grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr);align-items:end;gap:18px;margin-bottom:20px;padding:16px;display:grid}.preset-panel p{color:#60737f;margin:0 0 2px;font-size:.92rem;line-height:1.55}.preset-field select{color:#203844;background:#fff;border:1px solid #9fbdb5;border-radius:10px;width:100%;min-height:48px;padding:10px 12px;font-weight:700}.preset-field select:focus{border-color:#1f806c;outline:3px solid #1f806c2e}@media (width<=720px){.preset-panel{grid-template-columns:1fr;align-items:stretch}}.preset-panel.is-disabled{background:#f4f6f7;border-color:#d7dfe3}.preset-panel.is-disabled select{cursor:not-allowed;color:#7b898f;background:#e9edef}.preset-panel.is-disabled p{color:#5f7078}.section-heading-description{color:#627783;margin:6px 0 0;font-size:.94rem;line-height:1.6}.quality-options{border:0;margin:22px 0 0;padding:0}.quality-options legend{color:#314b5a;margin-bottom:10px;font-weight:800}.quality-option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.quality-option-grid label{cursor:pointer;background:#f8fbfb;border:1px solid #d7e1e6;border-radius:12px;gap:11px;padding:14px 15px;display:flex}.quality-option-grid label:has(input:checked){background:#edf8f5;border-color:#56a997}.quality-option-grid input{width:18px;height:18px;margin-top:2px}.quality-option-grid strong,.quality-option-grid small{display:block}.quality-option-grid small{color:#60737f;margin-top:4px;line-height:1.5}.capacity-field{background:#f3faf8;border:1px solid #cfe0dc;border-radius:12px;width:min(100%,440px);margin-top:16px;padding:15px}.quality-help{color:#5f707a;margin:12px 0 0;font-size:.9rem;line-height:1.6}@media (width<=620px){.quality-option-grid{grid-template-columns:1fr}}.guide-card,.info-card,.faq-card{background:#fff;border:1px solid #dce6ea;border-radius:18px;margin-top:24px;padding:28px;box-shadow:0 10px 30px #1c37430f}.content-heading{margin-bottom:20px}.content-heading h2{color:#203844;margin:0}.content-heading p:last-child{color:#627783;margin:8px 0 0;line-height:1.7}.guide-steps{counter-reset:guide;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.guide-steps li{counter-increment:guide;background:#f7fbfa;border:1px solid #d7e5e1;border-radius:14px;padding:20px 18px 18px;position:relative}.guide-steps li:before{content:counter(guide);color:#fff;background:#1f806c;border-radius:999px;place-items:center;width:30px;height:30px;margin-bottom:12px;font-weight:800;display:grid}.guide-steps strong,.guide-steps span{display:block}.guide-steps span{color:#5f737e;margin-top:7px;line-height:1.65}.format-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.format-guide-grid article{background:#f7f9fa;border-radius:14px;padding:18px}.format-guide-grid h3{color:#285467;margin:0 0 8px}.format-guide-grid p{color:#5f737e;margin:0;line-height:1.7}.faq-list{gap:10px;display:grid}.faq-list details{background:#fbfcfd;border:1px solid #dce6ea;border-radius:12px}.faq-list summary{cursor:pointer;color:#284451;padding:16px 18px;font-weight:800}.faq-list p{color:#5f737e;margin:0;padding:0 18px 18px;line-height:1.75}.site-footer{text-align:center;color:#6b7e87;margin-top:28px;padding:22px 10px 10px;font-size:.9rem}.site-footer p{margin:4px 0}@media (width<=760px){.guide-card,.info-card,.faq-card{padding:22px 18px}.guide-steps,.format-guide-grid{grid-template-columns:1fr}}.feature-grid,.usecase-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.feature-grid article,.usecase-list article{background:#f9fbfb;border:1px solid #dce6ea;border-radius:14px;padding:18px}.feature-grid h3,.usecase-list h3{color:#285467;margin:0 0 8px;font-size:1rem}.feature-grid p,.usecase-list p{color:#5f737e;margin:0;line-height:1.75}.related-guides{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;display:grid}.related-guides a{color:#176b58;background:#f3faf8;border:1px solid #cfe0dc;border-radius:12px;padding:16px;text-decoration:none;display:block}.related-guides a:hover{background:#eaf6f2}.related-guides strong,.related-guides span{display:block}.related-guides span{color:#5f737e;margin-top:6px;line-height:1.6}.site-footer nav{justify-content:center;gap:16px;margin-bottom:12px;display:flex}.site-footer a{color:#176b58;font-weight:700}@media (width<=760px){.feature-grid,.usecase-list,.related-guides{grid-template-columns:1fr}.site-footer nav{flex-direction:column;gap:8px}}.result-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;display:grid}.result-actions .download-preview-link{margin-top:0}.share-preview-button{cursor:pointer;color:#166b58;min-height:46px;font:inherit;background:#fff;border:1px solid #1f7a67;border-radius:10px;padding:11px 14px;font-weight:800}.share-preview-button:hover{background:#edf8f4}.share-help{color:#52656f;margin:10px 0 0;font-size:.86rem;line-height:1.6}@media (width<=560px){.result-actions{grid-template-columns:1fr}}.footer-groups{text-align:left;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:760px;margin:0 auto 20px;display:grid}.site-footer .footer-group{background:#f8fbfa;border:1px solid #dce6ea;border-radius:14px;align-content:start;gap:8px;padding:18px;display:grid}.site-footer .footer-group h2{color:#284451;margin:0 0 4px;font-size:.95rem}.site-footer .footer-group a{width:fit-content;font-weight:700;text-decoration:none}.site-footer .footer-group a:hover{text-decoration:underline}.footer-meta{border-top:1px solid #dce6ea;padding-top:14px}@media (width<=760px){.footer-groups{grid-template-columns:1fr}}