/* ねこMBTI・いぬMBTI（NEKOMBTI1026）。名前はすべて .nmb で始める。動きは transform と opacity だけ */
.nmb{--nmb-ink:#3b2f2f;--nmb-sub:#7a6a5f;--nmb-bg:#fff8ee;--nmb-wood:#e7c9a2;--nmb-wood2:#d6ae80;--nmb-acc:#d9875a;--nmb-c:#d9875a;max-width:720px;margin:0 auto;padding:12px 16px 40px;color:var(--nmb-ink);box-sizing:border-box}
.nmb *,.nmb *::before,.nmb *::after{box-sizing:border-box}
.nmb--inu{--nmb-acc:#5f9a62;--nmb-wood:#cfe3b8;--nmb-wood2:#a9c98c}
.nmb-crumb{font-size:12px;color:var(--nmb-sub);margin:0 0 8px}
.nmb-crumb a{color:inherit}
.nmb-spr{image-rendering:pixelated;image-rendering:crisp-edges;display:block;opacity:0;transition:opacity .2s}
.nmb-spr.is-on{opacity:1}

/* 見出し */
.nmb-hero{text-align:center;padding:8px 0 12px}
.nmb-hero__kicker{display:inline-block;margin:0 0 6px;padding:3px 12px;border-radius:999px;background:var(--nmb-acc);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}
.nmb-hero__h1{margin:0;font-size:clamp(34px,9vw,48px);line-height:1.1;font-weight:900;letter-spacing:.02em}
.nmb-hero__h1 small{display:block;margin-top:6px;font-size:14px;font-weight:700;color:var(--nmb-sub);letter-spacing:0}
.nmb-hero__lead{margin:12px auto 0;max-width:34em;font-size:15px;line-height:1.75}
.nmb-hero__meta{display:block;margin-top:4px;font-size:12px;color:var(--nmb-sub)}
.nmb-hero__sw{margin:8px 0 0;font-size:14px;font-weight:700}

/* 共通のボタン */
.nmb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;border-radius:14px;border:2px solid var(--nmb-ink);background:#fff;color:var(--nmb-ink);font-weight:800;font-size:15px;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--nmb-ink)}
.nmb-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--nmb-ink)}
.nmb-btn--main{background:var(--nmb-acc);color:#fff;border-color:#5a3a2a;box-shadow:0 4px 0 #5a3a2a}
.nmb-btn[disabled]{opacity:.45;cursor:not-allowed}

/* シェアされた結果 */
.nmb-got{margin:4px 0 18px;padding:16px;border-radius:20px;background:#fff;border:3px solid var(--nmb-c);text-align:center}
.nmb-got__who{margin:0;font-weight:700;color:var(--nmb-sub)}
.nmb-got__row{display:flex;gap:12px;align-items:center;justify-content:center;text-align:left}
.nmb-got__spr{width:112px;height:112px;flex:0 0 112px}
.nmb-got__code{margin:0;font-size:12px;font-weight:800;color:var(--nmb-sub)}
.nmb-got__name{margin:0;font-size:22px;font-weight:900;line-height:1.3}
.nmb-got__catch{margin:4px 0 0;font-size:14px}
.nmb-got__d{font-size:14px;line-height:1.7;text-align:left}

/* 診断の箱（おうちの部屋） */
.nmb-app{margin:8px 0 28px;border-radius:24px;background:var(--nmb-bg);border:3px solid var(--nmb-ink);overflow:hidden;box-shadow:0 6px 0 rgba(59,47,47,.18);scroll-margin-top:72px}
.nmb-stage{padding:16px}
.nmb-room{position:relative;height:150px;margin:-16px -16px 12px;background:linear-gradient(#fdeed8 0 70%,var(--nmb-wood) 70% 100%);border-bottom:3px solid var(--nmb-ink)}
.nmb-room::before{content:"";position:absolute;left:18px;top:16px;width:64px;height:54px;border:4px solid #fff;border-radius:6px;background:linear-gradient(#bfe3ff,#e8f6ff);box-shadow:inset 0 0 0 2px var(--nmb-wood2)}
.nmb-room__pet{position:absolute;left:50%;bottom:10px;width:120px;height:120px;margin-left:-60px}
.nmb-setup{display:grid;gap:12px}
.nmb-f{display:grid;gap:6px;margin:0;border:0;padding:0;font-weight:800;font-size:14px}
.nmb-f small{font-weight:500;color:var(--nmb-sub);margin-left:4px}
.nmb-f input{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:2px solid var(--nmb-ink);font-size:16px;background:#fff;color:var(--nmb-ink)}
.nmb-f__err{margin:-6px 0 0;color:#c0392b;font-size:13px;font-weight:700}
.nmb-coats legend{padding:0;margin-bottom:6px}
.nmb-coats__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.nmb-coat{display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:12px;border:2px solid transparent;background:#fff;cursor:pointer;font-size:11px;font-weight:700;color:var(--nmb-ink);line-height:1.25;min-height:44px}
.nmb-coat .nmb-spr{width:48px;height:48px}
.nmb-coat[aria-pressed="true"]{border-color:var(--nmb-acc);background:#fff1e3;box-shadow:0 0 0 2px #fff inset}
.nmb-start{width:100%;min-height:54px;font-size:17px}
.nmb-note{font-size:13px;color:var(--nmb-sub)}

/* 質問 */
.nmb-q__top{display:flex;align-items:center;gap:8px}
.nmb-q__back{flex:0 0 40px;height:40px;border-radius:50%;border:2px solid var(--nmb-ink);background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--nmb-ink)}
.nmb-paws{flex:1;display:grid;grid-template-columns:repeat(12,1fr);gap:3px}
.nmb-paws i{height:10px;border-radius:5px;background:#eadbc8}
.nmb-paws i.is-done{background:var(--nmb-acc)}
.nmb-paws i.is-now{background:#f2b48d}
.nmb-q__n{flex:0 0 auto;font-weight:800;font-size:13px;color:var(--nmb-sub)}
.nmb-q__pet{position:relative;height:132px;margin:10px -16px 6px;background:linear-gradient(#fdeed8 0 72%,var(--nmb-wood) 72% 100%);border-top:2px solid #f0dcc2;border-bottom:2px solid var(--nmb-wood2)}
.nmb-q__spr{position:absolute;left:50%;bottom:6px;width:112px;height:112px;margin-left:-56px}
.nmb-q__bub{position:absolute;left:calc(50% + 46px);top:8px;min-width:30px;height:30px;padding:0 6px;border-radius:15px;background:#fff;border:2px solid var(--nmb-ink);font-weight:900;text-align:center;line-height:26px}
.nmb-q__nm{position:absolute;left:8px;bottom:6px;font-size:12px;font-weight:800;background:#fff;border-radius:8px;padding:2px 8px;border:2px solid var(--nmb-wood2)}
.nmb-q__q{margin:10px 0 12px;font-size:19px;line-height:1.5;font-weight:900}
.nmb-q__q small{display:block;font-size:12px;color:var(--nmb-acc);letter-spacing:.06em}
.nmb-q__opts{display:grid;gap:8px}
.nmb-opt{min-height:52px;padding:12px 14px;border-radius:14px;border:2px solid var(--nmb-ink);background:#fff;color:var(--nmb-ink);font-size:15px;font-weight:700;text-align:left;line-height:1.5;cursor:pointer;box-shadow:0 3px 0 rgba(59,47,47,.35);transition:transform .12s}
.nmb-opt:active,.nmb-opt.is-sel{transform:translateY(2px);background:#fff1e3;border-color:var(--nmb-acc)}
.is-hop{animation:nmb-hop .42s ease-out}
@keyframes nmb-hop{0%{transform:translateY(0)}35%{transform:translateY(-18px)}70%{transform:translateY(0) scaleY(.92)}100%{transform:none}}

/* 演出 */
.nmb-stage--show{cursor:pointer;padding:0 0 12px}
.nmb-show{position:relative;height:300px;overflow:hidden}
.nmb-show__wall{position:absolute;inset:0 0 34%;background:#fdeed8}
.nmb-show__floor{position:absolute;inset:66% 0 0;background:repeating-linear-gradient(90deg,var(--nmb-wood) 0 46px,var(--nmb-wood2) 46px 48px);border-top:3px solid var(--nmb-ink)}
.nmb--inu .nmb-show__wall{background:linear-gradient(#cfeaff,#eaf7ff)}
.nmb-hide{position:absolute;left:50%;bottom:22%;width:144px;height:144px;margin-left:-72px;overflow:hidden}
.nmb-hide__img{position:absolute;inset:0;background-size:200% 100%;background-position:0 0;image-rendering:pixelated}
.nmb-pop,.nmb-sit{position:absolute;left:50%;bottom:24%;width:132px;height:132px;margin-left:-66px}
.nmb-pop{transform:translateY(40px) scale(.6)}
.nmb-show .nmb-pop.is-on{opacity:0}
.nmb-show .nmb-sit.is-on{opacity:0}
.nmb-show.is-shake .nmb-hide{animation:nmb-shake .5s ease-in-out 0s 3}
@keyframes nmb-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg) translateX(-3px)}75%{transform:rotate(5deg) translateX(3px)}}
.nmb-show.is-open .nmb-hide__img{background-position:100% 0}
.nmb-show.is-open .nmb-pop.is-on{opacity:1;transform:translateY(-70px) scale(1);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .1s}
.nmb-show.is-dash .nmb-pop.is-on{opacity:0;transform:translate(420px,-40px) scale(1);transition:transform .5s ease-in,opacity .5s ease-in}
.nmb-runner{position:absolute;left:50%;bottom:22%;width:144px;height:144px;margin-left:-72px;transform:translateX(130vw);opacity:0}
.nmb-runner__spr{position:absolute;inset:0;background-size:400% 100%;background-repeat:no-repeat;image-rendering:pixelated}
.nmb-show.is-run .nmb-runner{opacity:1;transform:translateX(0);transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.nmb-show.is-run .nmb-runner__spr{animation:nmb-run .32s steps(4) infinite}
@keyframes nmb-run{from{background-position:0 0}to{background-position:133.333% 0}}
.nmb-show.is-arrive .nmb-runner{opacity:0;transition:opacity .15s}
.nmb-show.is-arrive .nmb-sit.is-on{opacity:1;animation:nmb-hop .42s ease-out}
.nmb-show.is-run .nmb-hide{opacity:0;transition:opacity .4s}
.nmb-show__msg{margin:10px 16px 0;text-align:center;font-weight:800;min-height:1.6em}
.nmb-show__skip{margin:2px 0 0;text-align:center;font-size:12px;color:var(--nmb-sub)}

/* 名札 */
.nmb-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px 4px 6px;border-radius:8px;background:#fffdf5;border:2px solid var(--nmb-ink);font-weight:900;font-size:13px;color:var(--nmb-ink);white-space:nowrap;box-shadow:0 2px 0 rgba(59,47,47,.4)}
.nmb-tag i{width:8px;height:8px;border-radius:50%;border:2px solid var(--nmb-ink);background:var(--nmb-bg)}
.nmb-tag--mouth{position:absolute;right:calc(100% - 26px);top:46%;transform:rotate(-8deg);transform-origin:right center}
.nmb-show.is-run .nmb-tag--mouth{animation:nmb-swing .32s ease-in-out infinite alternate}
@keyframes nmb-swing{from{transform:rotate(-12deg)}to{transform:rotate(-2deg)}}
.nmb-tagcard{display:grid;justify-items:center;gap:10px;padding:28px 12px}
.nmb-tag--big{font-size:22px;padding:10px 18px 10px 12px;border-width:3px}
.nmb-tag--big i{width:14px;height:14px}
.nmb-tagcard p{margin:0;font-size:13px;color:var(--nmb-sub)}

/* 結果のカード（SD.reveal の裏面） */
.nmb .sd-rv__num{display:none}
.nmb-card{padding:18px 16px 20px;text-align:center;background:linear-gradient(180deg,#fff 0,#fff 55%,color-mix(in srgb,var(--nmb-c) 22%,#fff) 100%);border-radius:20px;border:3px solid var(--nmb-c)}
.nmb-card__who{margin:0;font-weight:800;color:var(--nmb-sub)}
.nmb-card__spr{width:168px;height:168px;margin:6px auto}
.nmb-card__code{margin:0;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--nmb-sub)}
.nmb-card__name{margin:2px 0 8px;font-size:28px;line-height:1.25;font-weight:900}
.nmb-card__catch{display:inline-block;margin:0;padding:8px 14px;border-radius:14px;background:#fff;border:2px solid var(--nmb-ink);font-weight:800;font-size:15px;position:relative}
.nmb-card__catch::before{content:"";position:absolute;left:50%;top:-9px;margin-left:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--nmb-ink)}
.nmb-card__axes{margin:10px 0 0;font-size:13px;font-weight:800;color:var(--nmb-sub)}

/* くわしく */
.nmb-res{display:grid;gap:12px;margin-top:14px}
.nmb-res__d{margin:0;font-size:15px;line-height:1.8}
.nmb-res__box{padding:14px 16px;border-radius:16px;background:#fff;border:2px solid #eadbc8}
.nmb-res__box h3{margin:0 0 6px;font-size:16px;font-weight:900}
.nmb-res__box h3+*{margin-top:0}
.nmb-res__box ul{margin:0;padding-left:1.2em;line-height:1.8;font-size:14px}
.nmb-res__like{margin:8px 0 0;font-size:13px;color:var(--nmb-sub)}
.nmb-res__s{font-size:14px;line-height:1.7}
.nmb-mix h3:not(:first-child){margin-top:14px}
.nmb-meters{display:grid;gap:10px;margin-top:6px}
.nmb-m{display:grid;grid-template-columns:5.5em 1fr 5.5em;align-items:center;gap:8px;font-size:12px;font-weight:700}
.nmb-m span:last-child{text-align:right}
.nmb-m__t{position:relative;height:10px;border-radius:5px;background:#eadbc8}
.nmb-m__t i{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--nmb-c);border:2px solid var(--nmb-ink)}
.nmb-vet{padding:12px 14px;border-radius:12px;background:#f3f8ef;border:1px solid #cfe1c2;font-size:13px;line-height:1.7}
.nmb-vet--s{margin:0}

/* 相性 */
.nmb-cp{margin-top:16px;padding:16px;border-radius:18px;background:#fff;border:2px solid #eadbc8}
.nmb-cp h3{margin:0 0 8px;font-size:17px;font-weight:900}
.nmb-cp__pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nmb-cp__pick label{display:grid;gap:4px;font-size:12px;font-weight:800}
.nmb-cp__pick select{min-height:44px;border-radius:10px;border:2px solid var(--nmb-ink);padding:6px 8px;font-size:15px;background:#fff;color:var(--nmb-ink)}
.nmb-cp__hint{font-size:12px;color:var(--nmb-sub)}
.nmb-cp__me{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto}
.nmb-cp__pet{width:96px;height:96px;margin:0 auto}
.nmb-cp__stage b,.nmb-cp__stage small{display:block;text-align:center}
.nmb-cp__stage small{color:var(--nmb-sub);font-size:11px}
.nmb-cp__static{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.nmb-cp__pct{font-size:28px;font-weight:900;color:var(--nmb-acc)}
.nmb-cp__lb{font-size:16px;font-weight:800}
.nmb-cp__lb b{font-size:24px;color:var(--nmb-acc)}
.nmb-cp__txt p{line-height:1.75;font-size:14px}

/* シェア・次へ */
.nmb-share{margin-top:16px}
.nmb-share h3{margin:0 0 8px;font-size:17px;font-weight:900}
.nmb-hide-name{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700;margin-bottom:8px;min-height:44px}
.nmb-hide-name input{width:20px;height:20px}
.nmb-next{display:grid;gap:8px;margin-top:16px}

/* 16タイプ一覧 */
.nmb-types h2,.nmb-axes h2{font-size:22px;font-weight:900;margin:28px 0 8px}
.nmb-types>p{font-size:14px;line-height:1.8}
.nmb-types__g{margin:18px 0 8px;font-size:17px;font-weight:900}
.nmb-types__g small{display:block;font-size:12px;font-weight:600;color:var(--nmb-sub);margin-top:2px}
.nmb-tl{display:grid;gap:8px}
.nmb-tl__i{border-radius:16px;background:#fff;border:2px solid #eadbc8;border-left:8px solid var(--nmb-c);scroll-margin-top:72px}
.nmb-tl__i summary{display:flex;gap:10px;align-items:center;padding:8px 10px;cursor:pointer;list-style:none;min-height:64px}
.nmb-tl__i summary::-webkit-details-marker{display:none}
.nmb-tl__spr{width:64px;height:64px;flex:0 0 64px}
.nmb-tl__t{display:grid;min-width:0}
.nmb-tl__t b{font-size:16px;font-weight:900}
.nmb-tl__t small{font-size:11px;color:var(--nmb-sub);font-weight:700}
.nmb-tl__t i{font-style:normal;font-size:13px;overflow-wrap:anywhere}
.nmb-tl__b{padding:0 14px 12px;font-size:14px;line-height:1.75}
.nmb-tl__b ul{margin:0;padding-left:1.2em}
.nmb-tl__h{margin:8px 0 2px;font-weight:900;font-size:13px}
.nmb-tl__like{color:var(--nmb-sub);font-size:13px}
.nmb-dl{margin:0;display:grid;gap:8px}
.nmb-dl dt{font-weight:900;display:flex;align-items:center;gap:8px}
.nmb-dl__k{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--nmb-acc);color:#fff;font-size:14px}
.nmb-dl dd{margin:0 0 6px 36px;font-size:14px;line-height:1.7}

@media (min-width:600px){.nmb-coats__list{grid-template-columns:repeat(6,minmax(0,1fr))}.nmb-next{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.nmb *{animation:none!important;transition:none!important}}
.nmb-app>.sd-rv{padding:16px}
.nmb-app>.sd-rv .sd-rv__more{padding:0}
.nmb-has-tag .nmb-tag{background:var(--nmb-tag) center/100% 100% no-repeat;border:0;box-shadow:none;image-rendering:pixelated;padding-left:22px}
.nmb-has-tag .nmb-tag i{visibility:hidden}
.nmb-has-bg-room.nmb--neko .nmb-show__wall,.nmb-has-bg-room.nmb--neko .nmb-room,.nmb-has-bg-room.nmb--neko .nmb-q__pet{background:var(--nmb-bg-room) center bottom/cover no-repeat;image-rendering:pixelated}
.nmb-has-bg-room.nmb--neko .nmb-show__wall{inset:0}
.nmb-has-bg-room.nmb--neko .nmb-show__floor,.nmb-has-bg-yard.nmb--inu .nmb-show__floor{opacity:0}
.nmb-has-bg-yard.nmb--inu .nmb-show__wall,.nmb-has-bg-yard.nmb--inu .nmb-room,.nmb-has-bg-yard.nmb--inu .nmb-q__pet{background:var(--nmb-bg-yard) center bottom/cover no-repeat;image-rendering:pixelated}
.nmb-has-bg-yard.nmb--inu .nmb-show__wall{inset:0}
.nmb-has-bg-room .nmb-room::before,.nmb-has-bg-yard .nmb-room::before{display:none}