@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@700;900&display=swap');

:root { --ink:#292622; --sub:#756f67; --cream:#fffaf4; --paper:#fff; --orange:#f37a4c; --orange-dark:#dd6035; --yellow:#f5c84c; --line:#e9e0d6; --mint:#dcefe8; --shadow:0 18px 50px rgba(76,57,37,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Noto Sans JP",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
.site-header { height:76px; max-width:1120px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; text-decoration:none; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:white; background:var(--orange); transform:rotate(-4deg); }
.site-header p { font-size:12px; color:var(--sub); }
.app-shell,.share-shell { max-width:1120px; margin:auto; padding:70px 28px 0; }
.hero { min-height:680px; display:grid; grid-template-columns:1fr 440px; align-items:center; gap:90px; position:relative; }
.hero::before { content:""; position:absolute; width:360px; height:360px; border-radius:50%; background:#f8e4cf; filter:blur(2px); left:-220px; top:30px; z-index:-1; }
.eyebrow { margin:0 0 18px; color:var(--orange-dark); font-size:11px; font-weight:800; letter-spacing:.16em; }
.hero h1 { margin:0; font-family:"Zen Kaku Gothic New",sans-serif; font-size:clamp(45px,6vw,72px); line-height:1.2; letter-spacing:-.04em; }
.hero h1 em { color:var(--orange); font-style:normal; position:relative; }
.hero h1 em::after { content:""; height:8px; border-radius:8px; background:var(--yellow); position:absolute; left:0; right:0; bottom:-8px; transform:rotate(-1deg); opacity:.75; }
.hero-copy>p:last-child { margin:38px 0 0; color:var(--sub); line-height:2; font-size:15px; }
.draw-card,.share-card { background:rgba(255,255,255,.9); border:1px solid rgba(224,211,196,.85); border-radius:28px; padding:32px 38px; box-shadow:var(--shadow); backdrop-filter:blur(12px); }
.draw-card>label,.draw-card legend { display:block; margin:0 0 11px; font-size:13px; font-weight:700; }
.input-wrap { height:58px; display:flex; align-items:center; gap:11px; border:1.5px solid var(--line); border-radius:14px; padding:0 17px; background:#fff; transition:.2s; }
.input-wrap:focus-within { border-color:var(--orange); box-shadow:0 0 0 4px rgba(243,122,76,.1); }
.input-wrap span { color:var(--orange); }
.input-wrap input { border:0; outline:0; width:100%; color:var(--ink); background:transparent; }
.input-wrap input::placeholder { color:#b9b1a8; }
.hint,.microcopy { color:#9b9389; font-size:11px; }
.hint { margin:8px 2px 27px; }
.draw-card fieldset { border:0; padding:0; margin:0 0 26px; }
.segment { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:5px; border-radius:14px; background:#f5f1ec; }
.world-segment { grid-template-columns:repeat(3,1fr); }
.world-segment span { padding:0 7px; font-size:11px; text-align:center; }
.segment label { cursor:pointer; }
.segment input { position:absolute; opacity:0; }
.segment span { height:42px; display:grid; place-items:center; color:var(--sub); border-radius:10px; font-size:13px; font-weight:600; }
.segment input:checked+span { color:var(--ink); background:#fff; box-shadow:0 2px 8px rgba(62,47,33,.08); }
.output-options legend { width:100%; display:flex !important; align-items:center; justify-content:space-between; }
.output-options legend small { color:#a49c92; font-size:10px; font-weight:500; }
.toggle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.toggle-grid label { cursor:pointer; }
.toggle-grid input { position:absolute; opacity:0; pointer-events:none; }
.toggle-grid span { min-height:40px; display:flex; align-items:center; justify-content:center; gap:6px; border:1.5px solid var(--line); border-radius:11px; color:var(--sub); background:#fff; font-size:12px; font-weight:600; transition:.15s; }
.toggle-grid span::before { content:""; width:7px; height:7px; border-radius:50%; background:#d9d1c8; }
.toggle-grid input:checked+span { color:var(--orange-dark); border-color:#f1aa8d; background:#fff3ed; }
.toggle-grid input:checked+span::before { background:var(--orange); box-shadow:0 0 0 3px rgba(243,122,76,.12); }
.toggle-grid input:focus-visible+span { outline:3px solid rgba(243,122,76,.22); outline-offset:2px; }
.option-hint { margin:10px 0 0; color:#9b9389; font-size:10px; line-height:1.6; }
.primary-button,.outline-button { min-height:54px; border-radius:14px; border:0; cursor:pointer; font-weight:700; transition:transform .15s,box-shadow .15s,background .15s; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:22px; color:#fff; background:var(--orange); box-shadow:0 8px 22px rgba(230,103,57,.24); text-decoration:none; }
.primary-button:hover { background:var(--orange-dark); transform:translateY(-1px); }
.primary-button:disabled,button:disabled { cursor:wait; opacity:.58; }
.draw-button { width:100%; }
.draw-button b { font-size:20px; font-weight:400; }
.microcopy { text-align:center; margin:13px 0 0; }
.result-section { max-width:820px; margin:0 auto 100px; }
.result-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:10px 0 28px; }
.result-heading h2 { margin:0; font-family:"Zen Kaku Gothic New"; font-size:42px; line-height:1.25; }
.world-badge { display:inline-flex; margin:0 0 8px; padding:5px 10px; border-radius:999px; color:#735637; background:#f5eadc; font-size:10px; font-weight:700; letter-spacing:.04em; }
.outline-button { padding:0 22px; border:1.5px solid var(--line); color:var(--ink); background:#fff; }
.outline-button:hover { border-color:#c9bcad; transform:translateY(-1px); }
.prompt-card { overflow:hidden; border-radius:24px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.prompt-row { min-height:92px; display:grid; grid-template-columns:46px 1fr 44px; align-items:center; gap:17px; padding:18px 24px; border-bottom:1px solid #f0e9e1; }
.prompt-row.is-last-visible { border-bottom:0; }
.prompt-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--orange-dark); background:#fff0e7; font-size:20px; }
.prompt-row[data-type="location"] .prompt-icon { color:#47836f; background:var(--mint); }
.prompt-row[data-type="weather"] .prompt-icon { color:#4e79a7; background:#e6f0f9; }
.prompt-row[data-type="time"] .prompt-icon { color:#8b68a4; background:#f0e9f5; }
.prompt-row[data-type="scene"] .prompt-icon { color:#9a7920; background:#fcf1c9; }
.prompt-row[data-type="environment"] .prompt-icon { color:#a65b86; background:#f8e7f1; }
.prompt-row div { min-width:0; }
.prompt-row small { display:block; margin-bottom:5px; color:var(--sub); font-size:11px; font-weight:600; }
.prompt-row strong { display:block; font-size:16px; line-height:1.55; }
.prompt-row strong.muted { color:#aaa39b; font-weight:500; }
.prompt-row button { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; color:var(--sub); background:#fff; cursor:pointer; font-size:21px; transition:.2s; }
.prompt-row button:hover { color:var(--orange); border-color:var(--orange); transform:rotate(28deg); }
.result-actions { display:grid; grid-template-columns:1fr 1.35fr; gap:12px; margin-top:20px; }
.result-actions .primary-button { padding:0 22px; }
.share-box { margin-top:18px; padding:20px; border:1px solid #b9dacf; border-radius:16px; background:#edf8f4; }
.share-box p { margin:0 0 12px; color:#39715e; font-size:13px; font-weight:700; }
.share-box div { display:grid; grid-template-columns:1fr auto auto; gap:8px; }
.share-box input,.share-box button,.share-box a { height:42px; border:1px solid #c9ddd6; border-radius:9px; background:#fff; padding:0 12px; font-size:12px; }
.share-box input { min-width:0; }
.share-box button,.share-box a { display:grid; place-items:center; cursor:pointer; color:#39715e; font-weight:700; text-decoration:none; }
.ad-slot { min-height:110px; border:1px dashed #d7cec3; border-radius:16px; display:grid; place-items:center; color:#aaa198; background:rgba(255,255,255,.45); font-size:9px; letter-spacing:.18em; }
.result-ad { margin-top:24px; text-align:center; }
.result-ad p { margin:7px 0 0; color:#8f877f; font-size:12px; letter-spacing:.04em; }
.result-ad.is-new-impression { animation:ad-reveal .32s ease-out; }
@keyframes ad-reveal { from { opacity:.35; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .result-ad.is-new-impression { animation:none; } }
.how-it-works { margin:60px 0 120px; padding-top:80px; border-top:1px solid var(--line); }
.how-it-works>h2 { margin:0 0 48px; font-family:"Zen Kaku Gothic New"; font-size:34px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.steps article { padding:28px; border-radius:20px; background:#fff; border:1px solid var(--line); }
.steps b { color:var(--orange); font-size:11px; letter-spacing:.12em; }
.steps h3 { margin:19px 0 10px; font-size:17px; }
.steps p { margin:0; color:var(--sub); font-size:13px; line-height:1.8; }
dialog { width:min(420px,calc(100% - 36px)); padding:0; border:0; border-radius:24px; color:var(--ink); box-shadow:0 30px 100px rgba(32,24,18,.25); }
dialog::backdrop { background:rgba(38,31,25,.5); backdrop-filter:blur(4px); }
dialog form { padding:35px; text-align:center; }
.dialog-icon { width:60px; height:60px; display:grid; place-items:center; margin:0 auto 20px; border-radius:20px; color:#fff; background:var(--ink); font-weight:800; }
dialog h2 { margin:0 0 12px; }
dialog p { margin:0 0 26px; color:var(--sub); font-size:13px; line-height:1.8; }
dialog .primary-button { width:100%; }
.text-button { margin-top:10px; border:0; color:var(--sub); background:transparent; cursor:pointer; padding:10px 16px; }
.toast { position:fixed; z-index:20; left:50%; bottom:28px; transform:translateX(-50%); padding:12px 18px; border-radius:10px; color:#fff; background:var(--ink); box-shadow:var(--shadow); font-size:13px; }
footer { max-width:1120px; min-height:100px; margin:auto; padding:30px 28px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); color:var(--sub); font-size:12px; }
footer span { color:var(--ink); font-weight:800; }
.share-shell { min-height:calc(100vh - 176px); display:grid; place-items:start center; padding-top:70px; }
.share-card { width:min(620px,100%); text-align:center; }
.share-card h1 { margin:0 0 30px; font-family:"Zen Kaku Gothic New"; font-size:38px; }
.share-card ul { list-style:none; padding:0; margin:0 0 30px; text-align:left; border-top:1px solid var(--line); }
.share-card li { display:flex; gap:14px; padding:16px 4px; border-bottom:1px solid var(--line); line-height:1.6; }
.share-card li span { color:var(--orange); font-weight:800; }
.share-card .primary-button { max-width:320px; margin:0 auto; }

@media (max-width:800px) {
  .site-header { height:65px; padding:0 20px; }
  .site-header p { display:none; }
  .app-shell,.share-shell { padding:40px 18px 0; }
  .hero { min-height:auto; grid-template-columns:1fr; gap:38px; }
  .hero-copy { text-align:center; }
  .hero h1 { font-size:48px; }
  .hero-copy>p:last-child { margin-top:30px; font-size:13px; }
  .draw-card { padding:25px 20px; border-radius:22px; }
  .result-section { margin-bottom:70px; }
  .result-heading { align-items:center; }
  .result-heading h2 { font-size:30px; }
  .result-heading .eyebrow { margin-bottom:9px; font-size:9px; }
  .result-heading .outline-button { min-height:42px; padding:0 14px; font-size:11px; }
  .prompt-card { border-radius:19px; }
  .prompt-row { grid-template-columns:38px 1fr 40px; gap:12px; min-height:84px; padding:15px 14px; }
  .prompt-icon { width:37px; height:37px; border-radius:11px; }
  .prompt-row strong { font-size:14px; }
  .result-actions { grid-template-columns:1fr; }
  .result-actions .primary-button { order:-1; }
  .share-box div { grid-template-columns:1fr 1fr; }
  .share-box input { grid-column:1/-1; }
  .how-it-works { margin:30px 0 80px; padding-top:60px; }
  .how-it-works>h2 { font-size:28px; }
  .steps { grid-template-columns:1fr; }
  footer { padding:25px 20px; }
}

@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }