:root{
    --bg:#e9e6de; --card:#fffdf9; --ink:#23282c; --sub:#646b72; --line:#e2ddd2;
    --accent:#3f6b5c; --accent-d:#2f5246; --accent-soft:#e4eee9; --warm:#fbeedd; --warm-d:#a8641c; --cool:#e3ecf6; --cool-d:#2f5f94; --focus:#1f4f8f;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
  body{background:var(--bg);color:var(--ink);
    font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic",Meiryo,sans-serif;
    line-height:1.5;font-size:15px;-webkit-text-size-adjust:100%;touch-action:manipulation;user-select:none;-webkit-user-select:none}
  button{font:inherit;color:inherit;cursor:pointer}
  .stage{height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center}
  .phone{position:relative;width:100%;max-width:430px;height:100vh;height:100dvh;max-height:860px;background:var(--card);overflow:hidden}
  @media (min-width:600px){ .phone{height:min(100dvh - 32px,820px);border-radius:26px;box-shadow:0 10px 40px #0002;border:1px solid var(--line)} }
  .screen{position:absolute;inset:0;display:flex;flex-direction:column;
    padding:max(env(safe-area-inset-top),clamp(8px,2.2dvh,18px)) 16px max(env(safe-area-inset-bottom),clamp(8px,2dvh,16px));
    animation:slidein .22s ease-out both}
  @keyframes slidein{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
  @keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.035)}100%{transform:scale(1.015)}}
  @keyframes rise{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
  :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  h1,h2,h3,p{margin:0}

  /* ドット */
  .dots{display:flex;gap:8px;align-items:center;justify-content:center}
  .dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:0;padding:0;transition:background .2s,transform .2s}
  .dot.done{background:#9bb9ac}
  .dot.on{background:var(--accent);transform:scale(1.35)}

  /* スタート */
  .start{align-items:center;text-align:center}
  .start .mid{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.2dvh,18px)}
  .start .kicker{font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.08em}
  .start h1{font-size:clamp(30px,9vw,40px);line-height:1.25;letter-spacing:.02em}
  .start .lead{font-size:clamp(14px,4vw,16px);color:var(--sub)}
  .start .mini{display:flex;gap:6px;margin-top:2px}
  .go{margin-top:clamp(6px,2dvh,16px);font-size:clamp(17px,4.8vw,20px);font-weight:700;background:var(--accent);color:#fff;border:0;border-radius:999px;
    padding:clamp(10px,1.8dvh,13px) clamp(34px,11vw,52px);box-shadow:0 4px 0 var(--accent-d);transition:transform .08s,box-shadow .08s}
  .go:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-d)}
  .fine{font-size:10.5px;line-height:1.55;color:var(--sub);text-align:left}
  .fine p+p{margin-top:2px}
  .start .fine{align-self:stretch}

  /* 質問 */
  .q .top{display:flex;align-items:center;justify-content:space-between;height:34px;flex:none}
  .q .back{width:44px;height:34px;background:none;border:0;font-size:13px;color:var(--sub);text-align:left;padding:0}
  .q .back[hidden]{display:block;visibility:hidden}
  .q .count{width:44px;text-align:right;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
  .qtext{flex:none;text-align:center;font-size:clamp(18px,5vw,22px);line-height:1.4;font-weight:700;padding:clamp(8px,4dvh,36px) 0 clamp(8px,2dvh,16px);outline:0}
  .choices{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(10px,1.8dvh,14px);padding-bottom:clamp(8px,6dvh,56px)}
  .choice{flex:none;width:min(100%,330px);height:clamp(76px,14dvh,118px);border:0;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 14px;
    transition:transform .12s,opacity .15s}
  .choice .big{font-size:clamp(17px,5vw,22px);font-weight:800;line-height:1.3}
  .choice .small{font-size:clamp(12px,3.4vw,14px);opacity:.75}
  .c0{background:var(--accent-soft);color:var(--accent-d);box-shadow:inset 0 -4px 0 #c4d9cf}
  .c1{background:var(--warm);color:var(--warm-d);box-shadow:inset 0 -4px 0 #f1d9b8}
  .c2{background:var(--cool);color:var(--cool-d);box-shadow:inset 0 -4px 0 #c6d8ec}
  .choice:active{transform:scale(.98)}
  .choice.picked{animation:pop .18s ease-out forwards}
  .choices.locked .choice:not(.picked){opacity:.35}
  .skip{flex:none;align-self:center;background:none;border:0;color:var(--sub);font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:6px 10px;margin-bottom:clamp(4px,2dvh,14px)}

  /* 結果（キャラ選択画面風） */
  .r{align-items:stretch}
  .r .you{text-align:center;font-size:12px;color:var(--sub);letter-spacing:.1em;flex:none}
  .r .type{text-align:center;text-wrap:balance;word-break:auto-phrase;font-size:clamp(22px,6.6vw,29px);line-height:1.25;font-weight:800;color:var(--accent-d);flex:none;outline:0;animation:rise .35s ease-out both}
  .r .typesub{text-align:center;font-size:12px;color:var(--sub);margin:2px 0 clamp(2px,1dvh,8px);flex:none}
  .stagebox{flex:1;min-height:0;display:flex;flex-direction:column;touch-action:pan-y}
  .panel{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;animation:swapin .2s ease-out both}
  .panel[hidden]{display:none}
  .stagebox.intro .panel{animation:chara .45s cubic-bezier(.2,.9,.3,1.2) .08s both}
  @keyframes swapin{from{opacity:.2;transform:scale(.94)}to{opacity:1;transform:none}}
  @keyframes chara{from{opacity:0;transform:translateY(16px) scale(.88)}to{opacity:1;transform:none}}
  .badge{flex:none;font-size:13px;font-weight:800;border-radius:999px;padding:2px 14px}
  .badge.top{background:#ffe9a8;color:#7a5600;border:2px solid #f0c64a}
  .badge.other{background:var(--accent-soft);color:var(--accent-d);border:2px solid #c4d9cf}
  .emblem{flex:1;min-height:56px;max-height:230px;width:100%;margin:2px 0}
  .emblem svg{display:block;width:100%;height:100%}
  .maker{flex:none;font-size:11px;color:var(--sub)}
  .sname{flex:none;font-size:clamp(20px,6vw,25px);font-weight:800;line-height:1.25;text-align:center}
  .fname{flex:none;font-size:10.5px;color:var(--sub);text-align:center;margin-bottom:2px}
  .catch{flex:none;font-size:clamp(14px,4vw,16px);font-weight:700;color:var(--accent-d);background:var(--accent-soft);border-radius:999px;padding:3px 16px;margin:2px 0 clamp(4px,1.2dvh,10px)}
  .gauges{flex:none;width:min(100%,300px);display:grid;gap:clamp(1px,.4dvh,4px);margin-bottom:clamp(4px,1.2dvh,10px)}
  .gauge{display:flex;align-items:center;gap:8px;font-size:12px}
  .gauge .gl{width:7.5em;color:var(--ink)}
  .pips{display:flex;gap:3px;flex:1}
  .pip{flex:1;height:9px;border-radius:3px;background:var(--line)}
  .pip.on{background:var(--accent)}
  .gnote{font-size:10px;color:var(--sub);border:1px solid var(--line);border-radius:4px;padding:0 4px;line-height:1.4}
  .link{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;width:min(100%,300px);background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;border-radius:10px;padding:8px 14px;box-shadow:0 2px 0 var(--accent-d)}
  .link:active{transform:translateY(1px);box-shadow:0 1px 0 var(--accent-d)}
  .link.official{background:#fff;color:var(--accent-d);border:2px solid var(--accent);box-shadow:0 2px 0 var(--accent);padding:6px 14px}
  .link.rakuten{background:#bf0000;box-shadow:0 2px 0 #7a0000}
  .link.rakuten:active{box-shadow:0 1px 0 #7a0000}
  .offers{flex:none;width:min(100%,300px);display:flex;flex-direction:column;align-items:stretch;gap:3px}
  .subs{display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;color:var(--sub);line-height:1.4}
  .subs .sub{color:var(--accent-d);text-decoration:underline;text-underline-offset:2px;display:inline-flex;align-items:center;gap:3px}
  .subs .sub .ad{color:var(--sub);border-color:var(--line);font-size:9px;line-height:1.3;padding:0 3px}
  .ad{font-size:10.5px;font-weight:600;border:1px solid #fffa;border-radius:4px;padding:0 5px;line-height:1.5}
  .r .fine{flex:none;font-size:10px;margin-top:clamp(3px,.8dvh,8px)}
  .thumbs{flex:none;display:flex;justify-content:center;gap:clamp(10px,3vw,18px);margin-top:clamp(4px,1dvh,10px);animation:rise .3s ease-out .15s both}
  .thumb{border:3px solid transparent;background:#f4f1ea;border-radius:16px;padding:4px 6px;width:clamp(60px,18vw,76px);display:flex;flex-direction:column;align-items:center;transform:scale(.9);opacity:.85;transition:transform .2s,border-color .2s,background .2s,opacity .2s}
  .thumb .tem{width:100%;height:clamp(38px,7dvh,58px)}
  .thumb .tem svg{display:block;width:100%;height:100%}
  .thumb .tl{font-size:9.5px;line-height:1.2;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding-bottom:2px}
  .thumb.on{transform:scale(1.08);opacity:1;border-color:var(--accent);background:var(--accent-soft)}
  .again{flex:none;margin-top:clamp(4px,1dvh,10px);align-self:center;font-size:13.5px;font-weight:700;background:#fff;color:var(--accent-d);border:2px solid var(--accent);border-radius:999px;padding:5px 22px}
  /* v5: スキル・おすすめ診断 */
  .hero{display:flex;gap:6px;width:min(100%,336px);flex:1;min-height:0;max-height:250px;align-items:stretch}
  .hero .emblem{width:auto;flex:1;min-width:0;max-height:none;margin:0}
  .skills{flex:none;width:106px;display:flex;flex-direction:column;justify-content:center;gap:5px}
  .sk{display:flex;align-items:center;gap:4px;border-radius:999px;border:1.5px solid;padding:2px 8px 2px 5px;font-size:11.5px;font-weight:700;line-height:1.4;white-space:nowrap}
  .sk svg{width:14px;height:14px;flex:none}
  .sk.r0{background:#f1efe9;border-color:#d9d4c7;color:#5d646a}
  .sk.r1{background:#f6e4cf;border-color:#d39b62;color:#7a4a1d}
  .sk.r2{background:#e6ecf3;border-color:#9fb0c4;color:#37475a}
  .sk.r3{background:#ffeeb0;border-color:#e0b030;color:#6a4b00}
  .skills .gnote{align-self:flex-start;margin-left:4px}
  .maker{display:none}
  .fname{margin-top:0}
  .thumbs{margin-top:clamp(3px,.8dvh,8px)}
  .thumb .tem{height:clamp(30px,5.6dvh,48px)}
  /* 商品写真（image がある商品）。白地に収め、キャラと同じ枠に入れる */
  .art svg{display:block;width:100%;height:100%;color:var(--accent-d)}
  .ktag{flex:none;font-size:11px;font-weight:700;color:var(--accent-d);background:var(--accent-soft);border-radius:999px;padding:1px 10px;margin:0 0 2px}
  .link.next{background:var(--accent-d);box-shadow:0 2px 0 #1d352c}
  .link.next::after{content:"→";font-weight:400}
  .photo.card a{position:relative}
  .photo .cap{position:absolute;left:0;right:0;bottom:0;font-size:10px;line-height:1.5;color:var(--sub);background:#ffffffd9;text-align:center}
  .photo{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:18px;border:1px solid var(--line);overflow:hidden}
  .photo img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}
  .photo a{display:block;width:100%;height:100%}
  .thumb .photo{border-radius:10px}
  .thumb .photo img{padding:2px}
  .thumb{padding:3px 6px;width:clamp(54px,16vw,70px)}
  .rel{flex:none;margin-top:clamp(3px,.8dvh,8px)}
  .relhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .relhead span{font-size:11px;color:var(--sub);font-weight:700}
  .relhead .again{margin:0;padding:1px 12px;font-size:12px;border-width:1.5px}
  .tiles{display:flex;gap:6px}
  .rtile{flex:1;min-width:0;position:relative;display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);background:#f7f5ef;border:1.5px solid var(--line);border-radius:12px;padding:5px 6px}
  .rtile:active{background:var(--accent-soft)}
  .rtile .ric{flex:none;width:24px;height:24px;color:var(--accent-d)}
  .rtile .ric svg{width:100%;height:100%}
  .rtile .rt{min-width:0;display:flex;flex-direction:column;line-height:1.3}
  .rtile .rn{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rtile .rl{font-size:10px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rtile .rg{position:absolute;top:-9px;right:6px;font-size:9px;font-weight:700;background:#fff;border:1px solid var(--line);color:var(--accent-d);border-radius:999px;padding:0 6px;line-height:1.5}
  @media (max-height:760px){ .r .typesub{display:none} }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}