:root{--ink:#092c3a;--green:#11877f;--green-dark:#08736c;--pale:#eef8f7;--line:#d9e7e6;--muted:#64757b;--shadow:0 10px 30px rgba(14,64,70,.12);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;color:var(--ink);background:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input{font:inherit}button,a{touch-action:manipulation}.site-header{height:76px;padding:0 max(4vw,24px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1f1;background:rgba(255,255,255,.94);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.brand{font-size:29px;font-weight:800;letter-spacing:.04em;color:var(--green-dark);text-decoration:none}.site-header nav{display:flex;gap:42px}.site-header nav a{color:#25373c;text-decoration:none;font-weight:600}.hero{min-height:640px;display:grid;grid-template-columns:minmax(360px,1fr) minmax(540px,670px);gap:7vw;align-items:center;padding:34px max(4vw,54px)}.hero-copy{padding-bottom:10px}.eyebrow{display:none}.hero h1{font-size:clamp(46px,4.2vw,66px);line-height:1.26;letter-spacing:.03em;margin:0 0 25px}.lead{font-size:28px;color:var(--green);font-weight:700;letter-spacing:.04em;margin:0 0 38px}.primary-button{display:flex;align-items:center;justify-content:center;max-width:495px;min-height:98px;border-radius:15px;background:linear-gradient(135deg,#15958c,#087c75);box-shadow:0 10px 24px rgba(10,130,121,.22);color:#fff;text-decoration:none;font-weight:800;font-size:29px}.primary-button span{margin-right:16px}.privacy-note{font-size:19px;color:#384d54;margin:28px 0 0 26px}.privacy-note span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;margin-right:12px}.purpose-panel{border:1px solid #e3ebeb;border-radius:22px;padding:27px 25px 16px;box-shadow:var(--shadow);background:#fff}.purpose-panel h2{text-align:center;color:var(--green-dark);font-size:23px;margin:0 0 22px}.purpose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.purpose-card{min-height:155px;border:2px solid #d7e9e7;border-radius:17px;background:#fff;color:#162f36;cursor:pointer;padding:16px 8px;transition:.2s}.purpose-card:hover,.purpose-card.selected{border-color:var(--green);background:#f7fcfb;box-shadow:0 7px 16px rgba(15,106,103,.12)}.purpose-card strong,.purpose-card small{display:block}.purpose-card strong{font-size:18px;margin-top:10px}.purpose-card small{color:var(--muted);margin-top:4px}.purpose-icon{font-size:41px;color:var(--green)}.hero-preview{border-top:1px solid var(--line);margin-top:21px;padding:22px 13% 10px;display:flex;justify-content:center;gap:28px}.sample-photo{width:138px;height:185px;background:linear-gradient(#e5f4fa,#f6fbfd);position:relative;overflow:hidden;border:1px solid #d9e7e9;border-radius:5px}.sample-head{position:absolute;width:62px;height:73px;border-radius:48% 48% 44% 44%;background:#ffd4b4;top:38px;left:38px;border-top:22px solid #4a3d38}.sample-body{position:absolute;width:120px;height:90px;background:#263e50;border-radius:60px 60px 0 0;bottom:-23px;left:9px}.sample-sheet{width:200px;height:185px;border:1px solid #dce7e7;border-radius:8px;background-color:white;background-image:linear-gradient(#eef5f5 1px,transparent 1px),linear-gradient(90deg,#eef5f5 1px,transparent 1px);background-size:50% 50%;position:relative}.sample-sheet:after{content:"6枚をL判に配置";position:absolute;inset:auto 0 12px;text-align:center;color:var(--green-dark);font-size:13px;font-weight:700}.quality-note{text-align:center;background:var(--pale);padding:12px;border-radius:11px;margin:10px 0 0;color:#385158}.quality-note span{color:var(--green);font-weight:800}.steps{background:linear-gradient(90deg,#f7fbfb,#eaf7f6,#f7fbfb);padding:30px 8% 35px}.steps h2{text-align:center;margin:0 0 27px;font-size:26px}.steps h2 em{color:var(--green);font-style:normal;font-size:36px}.steps ol{list-style:none;margin:0 auto;padding:0;display:flex;max-width:1100px;justify-content:space-between}.steps li{display:flex;align-items:center;gap:14px;color:#263d43}.steps li span,.maker h3 span{display:inline-grid;place-items:center;background:var(--green);color:#fff;border-radius:50%;font-weight:800}.steps li span{width:42px;height:42px;font-size:20px}.maker{padding:80px max(4vw,54px)}.section-heading{text-align:center;margin-bottom:40px}.section-heading p{color:var(--green);font-weight:800;margin:0}.section-heading h2{font-size:40px;margin:8px 0}.section-heading span{color:var(--muted)}.maker-layout{display:grid;grid-template-columns:260px minmax(360px,540px) minmax(280px,400px);gap:30px;justify-content:center;align-items:start}.maker-layout>aside,.editor-area{border:1px solid var(--line);border-radius:18px;padding:24px;background:#fff;box-shadow:0 6px 22px rgba(14,64,70,.07)}.maker h3{font-size:18px;margin:0 0 18px;display:flex;align-items:center;gap:9px}.maker h3:not(:first-child){margin-top:30px}.maker h3 span{width:27px;height:27px;font-size:14px}.option-list{display:grid;gap:9px}.option{border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px;text-align:left;cursor:pointer}.option.selected{border:2px solid var(--green);background:var(--pale)}.option b,.option small{display:block}.option small{color:var(--muted);margin-top:3px}.upload-button,.generate-button,.download-button{display:block;width:100%;border:0;border-radius:10px;padding:15px;text-align:center;font-weight:800;cursor:pointer}.upload-button,.generate-button{background:var(--green);color:#fff}.download-button{background:var(--ink);color:#fff;margin-top:10px}.generate-button{margin-top:18px}.generate-button:disabled,.download-button:disabled{background:#c9d4d4;cursor:not-allowed}.file-help,.print-note,.gesture-help{font-size:12px;color:var(--muted);text-align:center}.canvas-wrap{width:min(100%,360px);aspect-ratio:3/4;margin:auto;position:relative;overflow:hidden;background:#edf3f3;touch-action:none;border-radius:6px}#editorCanvas{width:100%;height:100%;display:block}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6c7c80;gap:8px}.empty-state span{font-size:40px}.empty-state small{font-size:12px}.editor-controls{display:flex;align-items:center;gap:10px;margin-top:18px}.editor-controls input{flex:1;accent-color:var(--green)}.editor-controls button{border:0;background:none;color:var(--green-dark);font-size:12px;cursor:pointer}.result-placeholder,#resultCanvas{width:100%;aspect-ratio:1500/1051;border:1px dashed #b9cbcb;border-radius:5px}.result-placeholder{display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px;padding:20px;background:#f7fafa}#resultCanvas{height:auto;background:#fff}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:20px max(6vw,60px) 80px}.info-grid article{background:var(--pale);padding:28px;border-radius:14px}.info-grid h2{font-size:19px}.info-grid p{color:#4d6268;line-height:1.8}.site-footer{text-align:center;background:var(--ink);color:#fff;padding:42px 20px}.footer-brand{color:#fff;text-decoration:none;font-size:24px;font-weight:800}.site-footer p,.site-footer small{opacity:.7}.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 30px;margin:24px 0}.footer-links a{color:#fff;text-decoration:none;font-size:14px;opacity:.86}.footer-links a:hover{text-decoration:underline;opacity:1}
@media(max-width:900px){.site-header{height:62px;padding:0 20px}.brand{font-size:23px}.site-header nav{display:none}.hero{display:block;padding:42px 20px 35px;min-height:0}.eyebrow{display:block;color:var(--green);font-weight:700}.hero h1{font-size:37px;line-height:1.3}.lead{font-size:20px;margin-bottom:25px}.primary-button{min-height:68px;font-size:20px}.privacy-note{text-align:center;font-size:14px;margin:18px 0 40px}.purpose-panel{padding:22px 14px 14px}.purpose-panel h2{font-size:19px}.purpose-grid{gap:8px}.purpose-card{min-height:124px;padding:10px 4px}.purpose-icon{font-size:29px}.purpose-card strong{font-size:14px}.purpose-card small{font-size:10px}.hero-preview{display:none}.quality-note{font-size:13px;margin-top:15px}.steps{padding:28px 20px}.steps ol{display:grid;gap:18px}.steps li{font-size:15px}.maker{padding:55px 16px}.section-heading h2{font-size:32px}.maker-layout{display:flex;flex-direction:column}.maker-layout>*,.editor-area{width:100%}.option-list{grid-template-columns:repeat(3,1fr)}.option{padding:10px 7px}.option b{font-size:13px}.option small{font-size:10px}.maker-options h3:not(:first-child){margin-top:24px}.info-grid{grid-template-columns:1fr;padding:10px 16px 60px}}
@media(max-width:390px){.hero h1{font-size:32px}.purpose-card strong{font-size:12px}.option-list{grid-template-columns:1fr}.option b{font-size:14px}.option small{font-size:11px}}

/* Informational pages */
.content-page{min-height:calc(100vh - 76px);background:#f7fbfb;padding:64px 20px 88px}
.content-card{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(14,64,70,.08);padding:52px 60px}
.content-card h1{font-size:36px;margin:0 0 12px}
.content-card .page-lead{color:var(--muted);font-size:16px;margin:0 0 42px}
.content-card h2{font-size:22px;color:var(--green-dark);margin:38px 0 12px}
.content-card p,.content-card li{color:#40565d;line-height:1.9}
.content-card ul{padding-left:1.4em}
.content-card a{color:var(--green-dark)}
.content-card .contact-box{background:var(--pale);border-radius:12px;padding:24px;margin-top:24px}
.content-card .updated{border-top:1px solid var(--line);padding-top:24px;margin-top:42px;color:var(--muted);font-size:14px}
@media(max-width:900px){.content-page{min-height:calc(100vh - 62px);padding:32px 14px 56px}.content-card{padding:34px 22px;border-radius:14px}.content-card h1{font-size:28px}.content-card h2{font-size:20px}.footer-links{flex-direction:column;gap:14px}}

/* Hero process illustration */
.hero-preview{display:block;margin:21px 0 0;padding:18px 8px 3px;gap:0}
.hero-preview img{display:block;width:100%;max-height:255px;object-fit:contain;border-radius:12px}
.hero-preview figcaption{text-align:center;color:#566b70;font-size:13px;font-weight:600;margin-top:7px}

@media(max-width:900px){
  .hero-preview{display:block;padding-top:14px}
  .hero-preview img{max-height:210px}
  .hero-preview figcaption{font-size:12px}
  .quality-note{margin-top:12px}
}