:root {
  --page:#f8f3ee;
  --surface:rgba(255,253,250,.92);
  --text:#493e39;
  --muted:#756861;
  --line:rgba(89,68,58,.14);
  --accent:#9c7568;
  --accent-dark:#76564c;
  --green:#789273;
  --shadow:0 22px 60px rgba(77,57,48,.10);
  --radius-lg:32px;
  --radius-md:20px;
  --content:1180px;
  --font-body:"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-heading:"Kiwi Maru",serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-width:320px;color:var(--text);line-height:1.75;
  background:
    radial-gradient(circle at 15% 10%,rgba(237,211,201,.32),transparent 28rem),
    radial-gradient(circle at 95% 42%,rgba(201,220,197,.24),transparent 25rem),
    var(--page);
  font-family:var(--font-body);
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;
}
button,textarea,input{font:inherit} button,label{-webkit-tap-highlight-color:transparent} button{color:inherit} img{max-width:100%}
.skip-link{position:fixed;z-index:1000;top:12px;left:12px;padding:10px 16px;border-radius:999px;background:var(--text);color:#fff;text-decoration:none;transform:translateY(-160%);transition:.2s}
.skip-link:focus{transform:translateY(0)}
.site-header{position:sticky;z-index:30;top:0;border-bottom:1px solid rgba(84,65,56,.08);background:rgba(248,243,238,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.header-inner{width:min(calc(100% - 40px),var(--content));min-height:78px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:13px;color:inherit;text-decoration:none}
.brand-mark{width:48px;height:48px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(117,143,107,.18);border-radius:50%;background:#f5eee8}
.brand-mark img{width:88%;height:88%;object-fit:contain}
.brand-copy{display:grid;line-height:1.35}.brand-en{color:var(--green);font-family:var(--font-heading);font-size:.72rem;font-weight:500;letter-spacing:.18em}.brand-ja{font-family:var(--font-heading);font-size:.95rem;font-weight:500;letter-spacing:.04em}
.menu-area{position:relative}
.menu-toggle{width:46px;height:46px;padding:0;display:grid;place-content:center;gap:6px;border:1px solid rgba(89,68,58,.12);border-radius:50%;background:rgba(255,253,250,.86);color:var(--text);cursor:pointer;box-shadow:0 8px 22px rgba(77,57,48,.06)}
.menu-toggle span{display:block;width:19px;height:2px;border-radius:999px;background:currentColor;transition:transform .22s ease}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.header-menu{position:absolute;right:0;top:56px;width:min(250px,calc(100vw - 32px));padding:10px;display:none;border:1px solid var(--line);border-radius:20px;background:rgba(255,253,250,.98);box-shadow:var(--shadow)}
.header-menu.is-open{display:grid}
.header-menu a{padding:13px 14px;border-radius:13px;color:var(--muted);font-size:.78rem;font-weight:500;letter-spacing:.04em;text-decoration:none}
.header-menu a:hover{background:rgba(120,146,115,.08);color:var(--accent-dark)}
.hero{position:relative;overflow:hidden;padding:clamp(74px,10vw,130px) 20px clamp(72px,9vw,118px)}
.hero-inner{position:relative;z-index:2;width:min(900px,100%);margin:auto;text-align:center}
.hero-character{width:clamp(116px,14vw,160px);aspect-ratio:1;margin:0 auto 22px;display:grid;place-items:center;animation:float 5.5s ease-in-out infinite}
.hero-character img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(95,75,63,.10))}
.eyebrow{margin:0 0 18px;color:var(--green);font-family:var(--font-body);font-size:clamp(.7rem,2vw,.82rem);font-weight:700;letter-spacing:.22em}
.hero h1{margin:0;font-family:var(--font-heading);font-size:clamp(2rem,5.8vw,4.25rem);font-weight:500;letter-spacing:.05em;line-height:1.45}.hero h1 span{color:var(--accent-dark)}
.hero-text{margin:30px 0 0;color:var(--muted);font-size:clamp(.93rem,2vw,1.08rem);letter-spacing:.05em;line-height:2.1}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none}.hero-orb-one{width:440px;height:440px;top:5%;left:-220px;background:rgba(235,207,195,.27)}.hero-orb-two{width:330px;height:330px;right:-120px;bottom:2%;background:rgba(199,218,195,.24)}
.creator-section{padding:0 20px clamp(100px,12vw,160px)}
.creator-layout{width:min(100%,var(--content));margin:auto;display:grid;grid-template-columns:minmax(0,.96fr) minmax(380px,1.04fr);gap:28px;align-items:start}
.panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow)}
.composer{padding:clamp(26px,4vw,42px)}.preview-panel{position:sticky;top:104px;padding:clamp(26px,4vw,38px)}
.section-heading{display:flex;align-items:flex-start;gap:16px;margin-bottom:34px}.section-number{flex:0 0 auto;margin:2px 0 0;color:var(--accent);font-family:var(--font-body);font-size:.78rem;font-weight:400;letter-spacing:.16em}
.section-heading h2{margin:0 0 6px;font-family:var(--font-heading);font-size:clamp(1.28rem,3vw,1.68rem);font-weight:600;letter-spacing:.04em}.section-heading p:not(.section-number){margin:0;color:var(--muted);font-size:.83rem}
.field-group{margin:0 0 30px;padding:0;border:0}.field-group legend,.field-group label:not(.choice-card):not(.theme-choice){display:block;margin-bottom:12px;font-size:.92rem;font-weight:700;letter-spacing:.04em}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.label-row label{margin-bottom:12px}#character-count{color:var(--muted);font-size:.78rem}
textarea{width:100%;min-height:142px;resize:vertical;padding:18px 20px;border:1px solid rgba(92,72,62,.18);border-radius:var(--radius-md);outline:0;background:rgba(255,255,255,.72);color:var(--text);line-height:1.85;transition:.2s}textarea::placeholder{color:#a59992}textarea:hover{background:rgba(255,255,255,.92)}textarea:focus{border-color:rgba(156,117,104,.64);background:#fff;box-shadow:0 0 0 4px rgba(156,117,104,.10)}textarea[aria-invalid=true]{border-color:#a94f50}
.field-hint,.field-error{margin:8px 2px 0;font-size:.74rem;line-height:1.7}.field-hint{color:var(--muted)}.field-error{min-height:1.3em;color:#9e4244}
.choice-grid{display:grid;gap:10px}.mood-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice-card{position:relative;min-height:82px;padding:13px 8px;display:grid;place-items:center;align-content:center;gap:4px;cursor:pointer;border:1px solid rgba(92,72,62,.14);border-radius:17px;background:rgba(255,255,255,.56);color:var(--muted);font-size:.8rem;text-align:center;transition:.2s}.choice-card:hover{transform:translateY(-2px);border-color:rgba(156,117,104,.32);background:#fff}.choice-card input{position:absolute;opacity:0;pointer-events:none}.choice-card:has(input:checked){border-color:rgba(156,117,104,.56);background:#fff9f6;color:var(--accent-dark);box-shadow:0 8px 22px rgba(103,76,64,.08)}.choice-card:has(input:focus-visible){outline:3px solid rgba(156,117,104,.24);outline-offset:2px}.choice-icon{color:var(--accent);font-family:var(--font-body);font-size:1.12rem;font-weight:400}
.theme-grid{display:flex;flex-wrap:wrap;gap:14px}.theme-choice{position:relative;display:grid;justify-items:center;gap:6px;cursor:pointer;color:var(--muted);font-size:.7rem}.theme-choice input{position:absolute;opacity:0}.theme-swatch{width:44px;height:44px;display:block;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(83,65,57,.13),0 7px 15px rgba(83,65,57,.08);transition:.2s}.theme-choice:hover .theme-swatch{transform:translateY(-2px)}.theme-choice:has(input:checked){color:var(--accent-dark);font-weight:700}.theme-choice:has(input:checked) .theme-swatch{box-shadow:0 0 0 3px #fffdfa,0 0 0 5px var(--accent),0 8px 16px rgba(83,65,57,.10)}
.theme-swatch.peach{background:linear-gradient(145deg,#f8ece5,#e7c6bc)}.theme-swatch.mint{background:linear-gradient(145deg,#eef5ec,#bed5bd)}.theme-swatch.lavender{background:linear-gradient(145deg,#f3edf7,#d3c0df)}.theme-swatch.sky{background:linear-gradient(145deg,#edf6f8,#bad8df)}.theme-swatch.coffee{background:linear-gradient(145deg,#f1e8df,#c6aa96)}
.check-row{margin:4px 0 26px;display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:.82rem;line-height:1.6}.check-row input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent-dark)}.check-row small{display:block;color:var(--muted);font-size:.7rem}
.primary-button,.secondary-button,.download-button,.safety-dialog button{border:0;cursor:pointer;transition:.2s}.primary-button{width:100%;min-height:58px;padding:14px 22px;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;background:linear-gradient(135deg,#9d7769,#77584e);box-shadow:0 14px 28px rgba(119,88,78,.22);color:#fff;font-weight:700;letter-spacing:.06em}.primary-button:hover,.download-button:hover{transform:translateY(-2px);box-shadow:0 17px 32px rgba(119,88,78,.28)}
.privacy-note{margin-top:22px;padding:15px 17px;display:flex;align-items:flex-start;gap:11px;border-radius:17px;background:rgba(120,146,115,.08);color:#657061}.privacy-note p{margin:0;font-size:.72rem;line-height:1.8}
.canvas-wrap{position:relative;width:min(100%,460px);margin:auto;overflow:hidden;border:1px solid rgba(83,65,57,.10);border-radius:25px;background:#f6ebe5;box-shadow:0 18px 48px rgba(78,59,50,.13)}.canvas-wrap::after{position:absolute;inset:0;pointer-events:none;border:1px solid rgba(255,255,255,.56);border-radius:inherit;content:""}canvas{width:100%;height:auto;display:block}
.message-result{margin:23px auto 0;padding:19px 22px;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.58);text-align:center}.result-label{margin:0 0 7px;color:var(--accent);font-size:.67rem;font-weight:700;letter-spacing:.12em}#message-output{margin:0;font-family:var(--font-heading);font-size:clamp(1rem,3vw,1.19rem);line-height:1.8}
.preview-actions{margin-top:16px;display:grid;grid-template-columns:.9fr 1.1fr;gap:10px}.secondary-button,.download-button{min-height:50px;padding:11px 16px;border-radius:999px;font-size:.81rem;font-weight:700}.secondary-button{border:1px solid rgba(88,68,59,.16);background:rgba(255,255,255,.72);color:var(--muted)}.secondary-button:hover:not(:disabled){background:#fff;transform:translateY(-2px)}.download-button{background:var(--text);color:#fff;box-shadow:0 11px 22px rgba(73,62,57,.18)}button:disabled{cursor:not-allowed;opacity:.42;transform:none!important;box-shadow:none!important}
button:focus-visible,textarea:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid rgba(119,146,112,.30);outline-offset:3px}
.how-to{padding:clamp(85px,11vw,135px) 20px;border-top:1px solid rgba(84,65,56,.07);background:rgba(255,253,250,.55)}.content-width{width:min(960px,100%);margin:auto;text-align:center}.content-width h2{margin:0;font-family:var(--font-heading);font-size:clamp(1.6rem,4vw,2.45rem);font-weight:500;letter-spacing:.06em}.steps{margin-top:55px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.step{min-height:218px;padding:32px 22px;border:1px solid var(--line);border-radius:27px;background:rgba(255,255,255,.60)}.step-number{width:38px;height:38px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:rgba(120,146,115,.12);color:var(--green);font-family:var(--font-body);font-size:.83rem}.step h3{margin:0 0 10px;font-family:var(--font-heading);font-size:1.15rem;letter-spacing:.08em}.step p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.9}
.care-note{padding:0 20px 100px;background:rgba(255,253,250,.55)}.care-inner{width:min(760px,100%);margin:auto;padding:28px 34px;display:flex;align-items:center;gap:22px;border:1px solid rgba(120,146,115,.18);border-radius:25px;background:rgba(239,245,237,.70)}.care-clover{flex:0 0 auto;font-size:2rem}.care-inner h2{margin:0 0 7px;font-size:1rem;letter-spacing:.05em}.care-inner p{margin:0;color:#687265;font-size:.78rem;line-height:1.9}
.site-footer{padding:36px 20px 44px;color:#746a61;text-align:center;border-top:1px solid var(--line);background:rgba(255,253,247,.58);font-size:13px}
.footer-logo-area{margin-bottom:12px}
.footer-logo-link{display:inline-flex;align-items:center;justify-content:center}
.footer-logo-img{width:72px;height:72px;object-fit:contain}
.toast{position:fixed;z-index:80;right:22px;bottom:22px;max-width:min(390px,calc(100% - 44px));padding:13px 18px;border-radius:999px;background:rgba(63,55,51,.94);box-shadow:0 14px 35px rgba(48,40,36,.22);color:#fff;font-size:.8rem;opacity:0;pointer-events:none;transform:translateY(18px);transition:.25s}.toast.is-visible{opacity:1;transform:translateY(0)}
.safety-dialog{width:min(520px,calc(100% - 36px));padding:34px;border:0;border-radius:28px;background:#fffdfa;box-shadow:0 28px 80px rgba(55,44,39,.25);color:var(--text);text-align:center}.safety-dialog::backdrop{background:rgba(58,49,45,.44);backdrop-filter:blur(5px)}.dialog-mark{margin-bottom:12px;font-size:2.2rem}.safety-dialog h2{margin:0 0 14px;font-family:var(--font-heading);font-size:1.25rem}.safety-dialog p{margin:0;color:var(--muted);font-size:.8rem;line-height:2}.safety-dialog button{min-width:140px;margin-top:24px;padding:11px 22px;border-radius:999px;background:var(--text);color:#fff;font-weight:700}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@media(max-width:920px){.creator-layout{grid-template-columns:1fr}.preview-panel{position:static}.canvas-wrap{width:min(100%,520px)}}
@media(max-width:640px){.header-inner{width:min(calc(100% - 28px),var(--content));min-height:70px}.brand-mark{width:42px;height:42px}.brand-ja{font-size:.84rem}.menu-toggle{width:42px;height:42px}.hero{padding-top:62px}.hero-character{width:108px}.hero h1{font-size:clamp(1.72rem,8.1vw,2.35rem);line-height:1.58}.hero-text{font-size:.88rem}.creator-section{padding-inline:12px}.composer,.preview-panel{padding:25px 18px;border-radius:26px}.section-heading{margin-bottom:27px}.mood-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-card{min-height:76px}.theme-grid{justify-content:space-between;gap:12px 7px}.theme-swatch{width:40px;height:40px}.preview-actions{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:14px}.step{min-height:auto}.care-note{padding-inline:12px}.care-inner{padding:24px 20px;align-items:flex-start}.care-inner p br{display:none}.toast{right:14px;bottom:14px;max-width:calc(100% - 28px);border-radius:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}