/* AIパクくん5 HP v051 の動き(motion.v051.js と対)。効果は html.mv-on の下だけ。「動きを減らす」設定では最初から完成形 */

/* 2. orbit: ループの絵の輪を光が回る(絵はそのまま・光だけを重ねる) */
.mv-orbit{position:relative}
.mv-orbit>svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s}
.mv-orbit.is-live>svg{opacity:1}
.mv-orbit__head{fill:url(#mv-orbit-glow)}
.mv-orbit__tail{fill:url(#mv-orbit-glow)}
.mv-orbit__station{fill:url(#mv-orbit-halo);opacity:0}

/* 5. chat: 相棒が返事をする(はじめの一歩) */
.mv-chat{max-width:980px;margin:52px auto 10px}
.mv-chat__window{position:relative;background:#fff;border:1px solid #eef0f6;border-radius:26px;box-shadow:0 30px 60px -28px rgba(35,60,102,.28);overflow:hidden}
.mv-chat__top{height:60px;display:flex;align-items:center;gap:18px;padding:0 24px;background:#fcfcff;border-bottom:1px solid #f0f1f5}
.mv-chat__top i{width:10px;height:10px;border-radius:50%;background:#d9dde7;display:inline-block;margin-right:6px}
.mv-chat__top b{font-size:19px;font-weight:750;letter-spacing:-.02em}
.mv-chat__top span:last-child{margin-left:auto;font-size:14px;color:#7b8492}
.mv-chat__log{height:clamp(330px,34vw,400px);overflow-y:auto;padding:22px 24px 12px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;overscroll-behavior:contain}
.mv-chat__empty{margin:auto;color:#9198a5;font-size:17px}
.mv-chat__msg{max-width:min(620px,88%);opacity:1;transform:none;transition:opacity .28s,transform .36s cubic-bezier(.2,1.2,.4,1)}
.mv-on .mv-chat.is-playing .mv-chat__msg:not(.is-in){opacity:0;transform:translateY(10px) scale(.98)}
.mv-chat__me{align-self:flex-end;background:#e8f0ff;border-radius:20px 20px 5px 20px;padding:11px 18px;font-size:15px;line-height:1.7}
.mv-chat__code{font:500 20px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px 20px}
.mv-chat__ai{align-self:flex-start;font-size:15px;line-height:1.75}
.mv-chat__ai p{margin:4px 0 0}
.mv-chat__who{display:block;color:#4574ce;font-size:14px;font-weight:700}
.mv-chat__welcome{display:grid;grid-template-columns:minmax(0,210px) 1fr;gap:22px;align-items:center;max-width:100%}
.mv-chat__welcome img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.mv-chat__welcome .hello{font-size:34px;font-weight:800;letter-spacing:-.045em;margin:0 0 6px;line-height:1.25}
.mv-chat__welcome .small{font-size:17px;margin:4px 0 0}
.mv-chat__skills{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:10px 0 0;padding:0}
.mv-chat__skills li{font-size:13px;font-weight:650;color:#2242a6;background:#eef3ff;border-radius:999px;padding:5px 11px}
.mv-chat__skills li:has(a){padding:0;background:none}
.mv-chat__skills a{display:inline-flex;align-items:center;min-height:30px;font-size:13px;font-weight:650;color:#2242a6;background:#eef3ff;border-radius:999px;padding:5px 11px;text-decoration:none;transition:background .2s}
.mv-chat__skills a:hover{background:#dfe8ff}
.mv-chat__skills a::after{content:" →";opacity:.6}
.mv-chat__work{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:12px;max-width:380px;margin:10px 0 0;padding:8px;border-radius:14px;background:#fff;border:1px solid #e3e8f2;text-decoration:none;color:inherit;box-shadow:0 10px 22px -18px rgba(24,50,68,.5);transition:transform .2s,box-shadow .2s}
.mv-chat__work:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(24,50,68,.55)}
.mv-chat__work img{width:120px;aspect-ratio:16/10;object-fit:cover;border-radius:9px;display:block;background:#eef1f5}
.mv-chat__work span{display:grid;gap:3px;min-width:0}.mv-chat__work small{font-size:12px;color:#5b6474;line-height:1.4}.mv-chat__work b{font-size:13.5px;color:#0768cc}

.mv-chat__think{align-self:flex-start;display:flex;gap:6px;padding:12px 4px}
.mv-chat__think span{width:8px;height:8px;border-radius:50%;background:#9db6e4;animation:mv-dot 1s ease-in-out infinite}
.mv-chat__think span:nth-child(2){animation-delay:.15s}.mv-chat__think span:nth-child(3){animation-delay:.3s}
@keyframes mv-dot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-5px);opacity:1}}
.mv-chat__composer{margin:6px 18px 18px;display:flex;align-items:center;gap:6px;min-height:54px;padding:8px 10px 8px 20px;border:1px solid #d4dbe9;border-radius:18px;background:#fff}
.mv-chat__entry{font:500 17px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mv-chat__caret{width:2px;height:22px;background:#487bee;display:none}
.mv-chat__composer.is-typing .mv-chat__caret{display:inline-block;animation:mv-caret 1s steps(1) infinite}
.mv-chat__ph{color:#9a9fa9;font-size:15px}
.mv-chat__composer.is-typing .mv-chat__ph{display:none}
.mv-chat__send{margin-left:auto;flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:#1769e0;color:#fff;display:grid;place-items:center;font-size:20px}
@keyframes mv-caret{50%{opacity:0}}
.mv-chat__asks{display:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:18px auto 0}
/* 頼み方は最初から見せる(実演の間に隠すと、速く読む人には空白に見える・出す時にページが伸びる)。実演の途中で押されたら実演を飛ばす */
.mv-on .mv-chat__asks{display:flex}
.mv-chat__asks p{width:100%;text-align:center;margin:0 0 4px;font-size:14px;color:#6c7486;font-weight:600}
.mv-chat__asks button{min-height:44px;border:1px solid #cfdcf6;background:#fff;color:#1d4ed8;border-radius:999px;padding:9px 18px;font-size:15px;font-weight:650;transition:background .2s,transform .2s,box-shadow .2s}
.mv-chat__asks button:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(29,78,216,.5)}
.mv-chat__asks button[aria-pressed="true"]{background:linear-gradient(135deg,#1d4ed8,#6d4cff);color:#fff;border-color:transparent}
@media(max-width:600px){
  .mv-chat{margin:36px -6px 6px}
  .mv-chat__window{border-radius:20px}
  .mv-chat__top{height:52px;padding:0 16px;gap:12px}.mv-chat__top b{font-size:17px}
  .mv-chat__log{height:350px;padding:14px 14px 8px}
  .mv-chat__welcome{grid-template-columns:1fr;gap:10px}
  .mv-chat__welcome img{aspect-ratio:16/6.4;object-fit:cover;object-position:center top;border-radius:12px}
  .mv-chat__welcome .hello{font-size:28px;margin-bottom:4px}
  .mv-chat__welcome .small{font-size:15px}
  .mv-chat__ai,.mv-chat__me{font-size:14px}
  .mv-chat__composer{margin:4px 12px 12px}
  .mv-chat__asks button{font-size:14px;padding:9px 15px}
}

/* 3. growth: スキルの歩み(1本目から・押すとその日のスキル) */
.update-history.mv-growth{max-width:700px}
.mv-growth__chart{position:relative;margin-top:4px}
.mv-growth__svg{touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent}
.update-chart .band{fill:#eef4ff}
.update-chart .grid{stroke:#ececf1;stroke-width:1}
.update-chart .m{fill:#0768cc;stroke:#fff;stroke-width:2}
.update-chart .sel{fill:none;stroke:#0768cc;stroke-width:2.2;opacity:.6;transition:cx .18s ease-out,cy .18s ease-out}
.update-history.is-waiting .update-chart .now,.update-history.is-waiting .update-chart .sel{opacity:0}
.update-history .update-chart .now{transition:opacity .3s}
.update-history.is-drawn .update-chart .now{animation:mv-now 1.6s ease-out 1}
@keyframes mv-now{0%{stroke-width:3}30%{stroke-width:7;filter:drop-shadow(0 0 6px rgba(7,104,204,.55))}100%{stroke-width:3}}
.update-chart .d,.update-chart .m{transition:opacity .25s}
.mv-growth__v5{position:absolute;top:1px;right:1.5%;font-size:12px;font-weight:700;color:#3a64b8;pointer-events:none}
.mv-growth__axis{position:relative;height:18px;margin-top:2px;font-size:12px;color:#5d5d63}
.mv-growth__axis span{position:absolute;top:0;white-space:nowrap}
.mv-growth__ctrl{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px}
.mv-growth__ctrl button{min-height:44px;min-width:44px;border-radius:999px;border:1px solid #d9e2f5;background:#fff;color:#1d3f7a;font-size:20px;font-weight:700;line-height:1;transition:background .2s,border-color .2s}
.mv-growth__ctrl button:hover:not(:disabled){background:#f2f6ff;border-color:#b8cdf2}
.mv-growth__ctrl button:disabled{opacity:.35;cursor:default}
.mv-growth__ctrl .mv-growth__play{font-size:14.5px;padding:0 18px;display:inline-flex;align-items:center;gap:8px}
.mv-growth__play span{font-size:11px}
.mv-growth__panel{margin-top:12px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #e6e9ef;text-align:left;word-break:keep-all;overflow-wrap:anywhere}
.mv-growth__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px}
.mv-growth__date{font-size:17px;font-weight:800;color:#1d1d1f}
.mv-growth__plus{font:800 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#0768cc}
.mv-growth__total{font-size:14px;color:#55555b;font-variant-numeric:tabular-nums}
.mv-growth__tag{font-size:12.5px;font-weight:700;color:#0a4f95;background:#eaf2fc;border-radius:999px;padding:4px 10px}
.mv-growth__skills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.mv-growth__skills a{display:inline-flex;align-items:center;min-height:36px;padding:6px 13px;border-radius:999px;background:#f4f7fb;border:1px solid #e1e8f2;color:#1d3f7a;font-size:14px;font-weight:650;text-decoration:none;transition:background .2s,border-color .2s}
.mv-growth__skills a:hover{background:#eaf2fc;border-color:#b8cdf2}
.mv-growth__hint{margin:8px 0 0;font-size:12.5px;color:#55555b;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:600px){.mv-growth__axis{font-size:12px}.mv-growth__v5{font-size:12px}.mv-growth__skills a{font-size:13.5px;padding:5px 12px;min-height:44px}.mv-chat__skills a{min-height:44px}}
@media (prefers-reduced-motion: reduce){.update-chart .sel{transition:none}}

/* 4. ロゴの「5」がときどき光る(14秒に1回・一瞬)。ヘッダーの手続きボタンの光は Fable の指摘で入れない */
.mv-on .brand span{background:linear-gradient(100deg,#4e75dc 0 42%,#9fd8ff 47%,#c9a2ff 50%,#ffb4d6 53%,#4e75dc 58% 100%);background-size:320% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:mv-five 14s ease-in-out 2.5s infinite}
@keyframes mv-five{0%,86%{background-position:100% 0}96%,100%{background-position:0 0}}

/* 5. xray: このページの作り方を透かす */
.mv-xray-toggle{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 13px 6px 9px;border-radius:999px;border:1px solid #d9e2f5;
  background:linear-gradient(135deg,#fff,#f2f6ff);color:#1d3f7a;font-size:14px;font-weight:650;letter-spacing:.01em;transition:transform .2s,box-shadow .2s,background .2s}
.mv-xray-toggle:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(35,74,160,.45)}
.mv-xray-toggle svg{width:22px;height:22px;flex:0 0 auto}
.mv-xray-toggle .lens-ring{fill:none;stroke:url(#mv-lens-grad);stroke-width:2.4}
.mv-xray-toggle .lens-handle{stroke:#1d3f7a;stroke-width:2.6;stroke-linecap:round}
.mv-xray-toggle .lens-glint{fill:#9fc3ff}
.mv-xray-toggle[aria-pressed="true"]{background:linear-gradient(135deg,#1d4ed8,#6d4cff);color:#fff;border-color:transparent}
.mv-xray-toggle[aria-pressed="true"] .lens-handle{stroke:#fff}
.mv-xray-wrap{position:relative;display:inline-flex}
.mv-xray-hint{position:absolute;top:calc(100% + 12px);right:-6px;z-index:31;width:max-content;max-width:300px;padding:10px 15px;border-radius:14px;border:0;
  background:#1d3f7a;color:#fff;font-size:13.5px;font-weight:650;line-height:1.55;text-align:left;white-space:pre-line;box-shadow:0 12px 28px -12px rgba(29,63,122,.6);
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .35s,transform .35s}
.mv-xray-hint::before{content:"";position:absolute;top:-6px;right:24px;width:12px;height:12px;background:#1d3f7a;transform:rotate(45deg);border-radius:2px}
.mv-xray-hint.is-shown{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
@media(max-width:600px){.mv-xray-toggle{padding:6px 10px;min-height:44px;min-width:44px;justify-content:center}.mv-xray-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .nav nav{gap:8px}.mv-xray-hint{right:-58px}.mv-xray-hint::before{right:74px}}
@media(max-width:360px){.brand{font-size:16px}.brand span{font-size:21px}}
/* タブレット幅: ヘッダーの項目を語の途中で折らない・「作り方」は虫めがねだけ */
.nav nav>a{white-space:nowrap}
@media(min-width:601px) and (max-width:1100px){.nav nav{gap:18px}.mv-xray-toggle{padding:6px 10px;min-width:44px;min-height:44px;justify-content:center}.mv-xray-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}

/* 透かした時の見え方: 方眼の地・各パーツの点線の枠と札 */
.xray-grid{position:fixed;inset:0;z-index:25;pointer-events:none;opacity:0;transition:opacity .45s;
  background-image:linear-gradient(rgba(47,111,235,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(47,111,235,.10) 1px,transparent 1px),
  linear-gradient(rgba(47,111,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,111,235,.05) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px}
.xray-on .xray-grid{opacity:1}
.xray-on [data-made-how]{position:relative;outline:1.5px dashed rgba(47,111,235,.85);outline-offset:6px;border-radius:14px;transition:outline-color .2s,box-shadow .25s}
.xray-on [data-made-how].mv-made-hot{outline:2px solid #6d4cff;box-shadow:0 0 0 8px rgba(109,76,255,.14),0 0 38px 6px rgba(109,76,255,.22)}
.xray-on [data-made-how] img,.xray-on [data-made-how] video{filter:saturate(.8) contrast(1.02)}
.mv-tag{display:none}
.xray-on .mv-tag{display:flex;flex-direction:column;gap:6px;position:absolute;z-index:26;left:10px;top:10px;max-width:min(340px,calc(100% - 20px));
  text-align:left;font:650 12.5px/1.5 -apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif;letter-spacing:.01em;
  color:#fff;background:linear-gradient(135deg,rgba(29,78,216,.95),rgba(109,76,255,.95));padding:8px 11px 9px;border-radius:12px;
  box-shadow:0 10px 26px -10px rgba(29,78,216,.6);opacity:0;transform:translateY(-6px) scale(.96);transition:opacity .35s,transform .45s cubic-bezier(.2,1.3,.4,1)}
.xray-on .mv-tag.is-in{opacity:1;transform:none}
.mv-tag__how{display:block}
.mv-tag__skills{display:flex;flex-wrap:wrap;gap:5px}
.mv-tag__skills a{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;text-decoration:none;font-size:12px;border:1px solid rgba(255,255,255,.35)}
.mv-tag__skills a:hover,.mv-tag__skills a:focus-visible{background:#fff;color:#2242a6}
@keyframes mv-tag{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
.mv-xray-beam{position:fixed;left:0;right:0;top:0;height:120px;z-index:45;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(120,170,255,.16) 70%,rgba(139,123,255,.55) 98%,transparent);
  animation:mv-beam .64s cubic-bezier(.55,.05,.35,1) forwards}
@keyframes mv-beam{from{transform:translateY(-120px)}to{transform:translateY(100vh)}}
.mv-xray-panel{position:fixed;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));z-index:41;transform:translateX(-50%);
  width:min(640px,calc(100% - 24px));padding:16px 18px 14px;border-radius:20px;background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 48px -18px rgba(29,63,122,.45),0 0 0 1px rgba(78,117,220,.16);color:#1d1d1f}
.mv-xray-panel[hidden]{display:none}
.mv-xray-panel p{margin:0 0 10px;font-size:14px;line-height:1.7;font-weight:600}
.mv-xray-panel ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.mv-xray-panel li a{display:inline-flex;align-items:center;min-height:30px;font:650 12.5px/1 -apple-system,BlinkMacSystemFont,sans-serif;color:#2242a6;background:#eef3ff;border-radius:999px;padding:6px 11px;text-decoration:none}
.mv-xray-panel li a:hover{background:#dfe8ff}
.mv-xray-panel .mv-xray-count{font-size:12.5px;color:#5b6474;margin:-4px 0 10px;font-weight:600}
.mv-xray-panel [data-mv-xray-close]{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;border-radius:50%;background:#eef0f5;color:#3a3a3c;font-size:20px;line-height:1}
.mv-tag__no{display:block;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;opacity:.72;margin-bottom:5px}
.mv-xray-tour{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #e8ebf2}
.mv-xray-tour button{min-height:40px;border:1px solid #d9e2f5;background:#fff;color:#1d3f7a;border-radius:999px;font-weight:700;font-size:14px;padding:0 14px}
.mv-xray-tour button[data-xt="prev"]{min-width:40px;padding:0;font-size:18px}
.mv-xray-tour button[data-xt="next"]{margin-left:auto;background:linear-gradient(135deg,#4d6cf5,#7a5cf0);border-color:transparent;color:#fff}
.mv-xray-tour [data-xt-count]{font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#3f4b63;font-variant-numeric:tabular-nums}
@media(max-width:600px){.xray-on .mv-tag{font-size:12px;left:8px;top:8px;padding:7px 9px 8px}.mv-xray-panel{bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));padding:14px 14px 12px}}

@media (prefers-reduced-motion: reduce){
  .mv-orbit>svg{display:none}
  .mv-chat__think span,.mv-chat__composer.is-typing .mv-chat__caret{animation:none}
  .mv-on .brand span{animation:none!important}
  .mv-xray-hint{transition:none}
  .mv-on .brand span{color:#4e75dc;background:none}
  .xray-on .mv-tag{transition:none}
}

/* 6. 媒体の帯(部品セット marquee): 両端をぼかして切れ目を見せない・1周約40秒・触ると止まる */
.mv-media{margin:0 calc(-1 * clamp(20px,3.2vw,52px));padding:4px 0 6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mv-media .dpro-platform-list{display:flex!important;grid-template-columns:none!important;gap:12px;width:max-content;padding:0 clamp(20px,3.2vw,52px)}
.mv-media .dpro-platform-list li{flex:0 0 auto;width:132px;min-height:126px}
.mv-media .dpro-platform-list img{width:60px!important;height:60px!important;border-radius:0}
.mv-on .mv-media{--lp-marquee-s:40s}
.lp-parts-on .mv-media.is-auto .lp-marquee__track{padding-right:12px}
/* 点検の道具は「はみ出しを隠す枠」の中の見切れを崩れと数える。帯は横に送れる枠にする(見た目は同じ・指でも送れる) */
.lp-parts-on .mv-media.is-auto{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.mv-media::-webkit-scrollbar{display:none}
@media(max-width:600px){.mv-media{margin:0 -20px}.mv-media .dpro-platform-list{padding:0 20px}.mv-media .dpro-platform-list li{width:104px;min-height:104px;padding:14px 4px 12px;gap:10px}.mv-media .dpro-platform-list img{width:44px!important;height:44px!important}.mv-media .dpro-platform-list span{font-size:13px}}

/* 7. 相棒の結晶(部品セット foil): 傾きは小さく、影はページの柔らかさに合わせる */
.mv-edition{max-width:1030px;margin:-12px auto 0}
.mv-edition>*{border-radius:30px;box-shadow:0 30px 60px -34px rgba(35,60,102,.35);transform:rotateX(calc(var(--ry,0) * -3.5deg)) rotateY(calc(var(--rx,0) * 4.5deg))}
.lp-parts-on .mv-edition>*::after{mix-blend-mode:soft-light;opacity:calc(var(--lp-sheen,0) * .55)}
.mv-edition .edition-art{margin:0;max-width:none;border-radius:0}
@media(max-width:600px){.mv-edition{margin:0 auto}.mv-edition>*{border-radius:15px}}

/* 2b. ループの絵の枠(光を重ねるため picture を包む) */
.mv-orbit__pic{display:block}
@media(max-width:600px){.mv-orbit__pic img{aspect-ratio:2/3;height:auto}}

/* 8. A/B比較: 比較の画面は窓で。ページにはサムネの列だけ */
.ab-archive .ab-filter{display:none}
.ab-archive .ab-set{flex-basis:clamp(210px,21vw,264px)}
.ab-archive .ab-set small{font-size:13px;color:#555d6b}
.mv-ab-dialog{padding:0;border:0;border-radius:24px;width:min(1080px,calc(100% - 28px));max-height:92svh;overflow:auto;overscroll-behavior:contain}
.mv-ab-dialog::backdrop{background:rgba(20,24,36,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mv-ab-dialog .ab-board{border:0;border-radius:0;margin:0}
.mv-ab-close{position:sticky;top:10px;float:right;margin:10px 10px -46px 0;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:#e9e9ec;color:#3a3a3c;font-size:24px;line-height:1}

@media(max-width:600px){.mv-ab-dialog{width:calc(100% - 14px);border-radius:18px}}

/* 9. 工房の動くLPパーツ: 中身が読み込まれてから高さを知らせるまでの間も、最終の比率で場所を取る(v045 から、読み込み後に 219→543px などへ伸びてページがずれていた)。
   実測の最終の高さ/幅: スマホ 1.41〜1.45・タブレット縦 1.40・PC 0.64(枠の幅で中の並びが切り替わる) */
.feature-motion{aspect-ratio:1.56}
@media(min-width:601px) and (max-width:1023px){.feature-motion{aspect-ratio:.716}.feature-motion .feature-poster{object-fit:contain;background:#eee5d9}}
@media(max-width:600px){.feature-motion{aspect-ratio:.7}}
/* 10. DPro とループの題の絵(遅れて読む・2048×1152)は、読み込み前から16:9で場所を取る。WebKit は src の無い img に width/height の比率を当てず、40px前後から634pxへ伸びていた(v050 から) */
@media(min-width:601px){#dpro picture.chapter-art img,#loop .mv-orbit__pic img{aspect-ratio:16/9;height:auto}}

/* 11. 相棒の結晶(v052): 押せると分かる印・押した時の仕掛け。勝手には動かない */
.mv-crystals{position:relative;max-width:1030px;margin:-12px auto 0}
.mv-crystals .edition-art{display:block;width:100%;margin:0;max-width:none}
.mv-crystal{position:absolute;border:0;border-radius:26px;background:transparent;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s,background .25s}
.mv-crystal:hover,.mv-crystal:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 7px var(--mv-c,#4e9dff),0 18px 48px -12px var(--mv-c,#4e9dff);background:rgba(255,255,255,.08)}
.mv-crystal[data-crystal="astra"]{--mv-c:#3b8cff}.mv-crystal[data-crystal="opus"]{--mv-c:#f08a4b}
.mv-crystal__cue{position:absolute;left:50%;bottom:-14px;transform:translate(-50%,6px);white-space:nowrap;font-size:13px;font-weight:700;color:#fff;background:var(--mv-c);border-radius:999px;padding:6px 14px;box-shadow:0 8px 18px -8px var(--mv-c);opacity:0;transition:opacity .2s,transform .25s}
.mv-crystal__cue::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;border-radius:50%;background:radial-gradient(circle,#fff 0 35%,transparent 40%),rgba(255,255,255,.35)}
.mv-crystal:hover .mv-crystal__cue,.mv-crystal:focus-visible .mv-crystal__cue{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.mv-crystal__cue{opacity:1;transform:translate(-50%,0);font-size:12px;padding:5px 12px}}
.mv-pop{position:absolute;z-index:6;top:6%;bottom:auto;min-height:88%;width:min(420px,46%);display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:16px;border-radius:24px;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 30px 60px -24px rgba(24,50,68,.45),0 0 0 1px rgba(24,50,68,.06);
  opacity:0;transform:scale(.92);transition:opacity .25s,transform .35s cubic-bezier(.2,1.3,.4,1)}
.mv-pop[data-pop="astra"]{left:4%;transform-origin:30% 60%}.mv-pop[data-pop="opus"]{right:4%;transform-origin:70% 60%}
.mv-pop.is-on{opacity:1;transform:none}
.mv-pop__term{border-radius:14px;background:#f4f7fb;border:1px solid #dfe7f1;overflow:hidden}
.mv-pop__bar{display:block;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#5a6b80;padding:8px 12px;border-bottom:1px solid #dfe7f1;letter-spacing:.08em}
.mv-pop__lines{margin:0;padding:10px 12px;min-height:6.4em;font:500 12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1d3f7a;white-space:pre-wrap}
.mv-pop__think{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#fdf4ee;border:1px solid #f4dccb;font-weight:700;color:#b4562a}
.mv-pop__spark{display:inline-block;font-size:22px;line-height:1;color:#d97a45;animation:mv-spark 1.1s linear infinite}
@keyframes mv-spark{to{transform:rotate(360deg)}}
.mv-pop__verb{font:600 14px/1.4 -apple-system,BlinkMacSystemFont,sans-serif}
.mv-pop__who{position:relative;overflow:hidden;min-height:0;opacity:0;transform:translateY(24px) scale(.7);transition:opacity .25s,transform .45s cubic-bezier(.2,1.6,.4,1)}
.mv-pop__who img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(24,50,68,.18))}
.mv-pop.is-who .mv-pop__who{opacity:1;transform:none}
.mv-pop__bubble{position:relative;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid #e3e8ef;opacity:0;transform:translateY(8px);transition:opacity .3s .15s,transform .35s .15s}
.mv-pop.is-who .mv-pop__bubble{opacity:1;transform:none}
.mv-pop__bubble b{display:block;font-size:12.5px;color:#5a6b80}
.mv-pop__bubble p{margin:2px 0 10px;font-size:19px;font-weight:800;letter-spacing:-.01em}
.mv-pop__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mv-pop__acts .pill{padding:10px 18px;gap:10px}
.mv-pop__acts button{border:0;background:#eef1f5;color:#3a4552;border-radius:999px;min-height:44px;padding:8px 16px;font-weight:650}
@media(max-width:600px){.mv-crystals{margin:0 auto}.mv-pop{width:auto;left:3%!important;right:3%!important;top:3%;bottom:auto;min-height:94%}.mv-pop__who{min-height:200px}.mv-pop__lines{min-height:5.6em;font-size:12px}.mv-pop__bubble p{font-size:17px}}
@media (prefers-reduced-motion: reduce){.mv-chat__work{transition:none}.mv-pop,.mv-pop__who,.mv-pop__bubble{transition:none}.mv-pop__spark{animation:none}}

/* 12. 会話の実演の顔アイコン(公式の設定画から・v052) */
.mv-chat__withav{display:flex;gap:10px;align-items:flex-start}
.mv-chat__av{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 30%;flex:0 0 auto;background:#f2f4fa;box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(24,50,68,.35)}

/* v052: スキルのカードと札はリンク(移る物はリンク)。見た目はボタンの時のまま */
a.skill-card{display:block;text-decoration:none}
a.skill-tile{text-decoration:none}
a.skill-card:focus-visible,a.skill-tile:focus-visible{outline:3px solid #0768cc;outline-offset:3px}

/* v052: 作り方の札に生成費(本人 9/30「それぞれのパーツにいくらかかったか、全部で幾らかまで見えたら面白い」) */
.mv-tag__cost{display:inline-flex;margin-top:6px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.2);font:700 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.mv-xray-total{margin:-2px 0 10px!important;font-size:15px!important;font-weight:800!important;color:#1d2330}
.mv-xray-total b{font:800 18px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#4d45e0;font-variant-numeric:tabular-nums}
.mv-xray-total small{display:block;margin-top:4px;font-size:12px;font-weight:600;color:#55555b;line-height:1.6}
@media(max-width:600px){.mv-xray-panel>p:first-of-type,.mv-xray-panel .mv-xray-count,.mv-xray-panel ul{display:none}.mv-xray-total{margin:0 34px 8px 0!important;font-size:14px!important}.mv-xray-total b{font-size:17px}.mv-xray-total small{font-size:11.5px}.mv-xray-tour{margin-top:8px;padding-top:8px}}
.mv-xray-total b{white-space:nowrap}
/* v052 9/30: 吹き出しは中身に合わせて伸ばす(タブレットで枠が低く、端末の行が切れ・キャラの絵が高さ0になった)。絵の行に下限 */
.mv-pop__who{min-height:clamp(170px,22vw,300px)}
.mv-pop__term,.mv-pop__think,.mv-pop__bubble{flex-shrink:0;min-height:min-content}
@media(min-width:601px) and (max-width:1100px){.mv-pop{width:min(440px,58%)}}
/* 9/30 「作り方」のアイコン=お金を調べる虫めがね(レンズの中に ¥ の金貨) */
.mv-xray-toggle .lens-coin{fill:url(#mv-coin-grad);stroke:#c98a0c;stroke-width:.6}
.mv-xray-toggle .lens-yen{fill:none;stroke:#7a4b00;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.mv-xray-toggle .lens-glint{fill:none;stroke:#fff;stroke-width:1.2;stroke-linecap:round;opacity:.85}
.mv-xray-toggle:hover .lens-coin{animation:mv-coin-shine .9s ease-out 1}
@keyframes mv-coin-shine{0%{filter:none}40%{filter:brightness(1.25) drop-shadow(0 0 2px #ffd35c)}100%{filter:none}}
@media (prefers-reduced-motion: reduce){.mv-xray-toggle:hover .lens-coin{animation:none}}
/* 9/30 ヒーロー下の説明文: 真ん中そろえ・PC は「使う、」で改行して2行・スマホは言葉の切れ目で折る */
.search-intro.mv-intro{text-align:center;padding:6px 24px 30px}
.search-intro.mv-intro p{margin:0 auto;max-width:44em;font-size:16px;line-height:1.9;color:#3a3a3c;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
@media (max-width:700px){.mv-intro__br{display:none}.search-intro.mv-intro{padding:4px 22px 26px}.search-intro.mv-intro p{font-size:15px}}
.mv-nw{display:inline-block;white-space:nowrap}
.mv-xray-hint{word-break:keep-all;overflow-wrap:anywhere}
/* 9/30 セルフリファイン: 320幅で「使いたい方/へ」と語の途中で折れた→文節で折る */
.edition-kicker,.receive-choices small{word-break:keep-all;overflow-wrap:anywhere}
.receive-choices small{text-wrap:balance}
/* 9/30 本人の画面(約280px幅)で「つくりた/い。」と折れ、ヘッダーのボタンが2行になった → 文節で折る・とても狭い幅は少し小さく */
.hero-bottom p{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:340px){.hero-bottom p{font-size:18px}header .pill.small{padding-left:12px;padding-right:12px;font-size:12.5px;white-space:nowrap}header .brand{font-size:15px}.mv-xray-toggle{min-width:44px;padding:6px 8px}}
@media (max-width:330px){.mv-pill-tail{display:none}}

/* v056: controls fit the viewing area without shrinking the character artwork. */
.mv-pop{display:flex;flex-direction:column;min-height:0;max-height:var(--mv-pop-room,calc(100dvh - 100px));overflow-y:auto;overscroll-behavior:contain}
.mv-pop__who{flex:1 0 auto}
.mv-pop__bubble{position:sticky;bottom:0;z-index:1;background:#fff}
.mv-quiz__meta:focus-visible{outline:2px solid #4d6cf5;outline-offset:6px;border-radius:3px}
.mv-cost-row{display:flex;align-items:baseline;gap:10px}
.mv-cost-row .mv-xray-total{margin:0!important}
.mv-cost-short{display:none}
.mv-cost-details{flex:none;padding:0;border:0;margin:0;min-width:0}
.mv-cost-details summary{display:flex;align-items:center;justify-content:center;min-height:44px;cursor:pointer;color:#2242a6;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mv-cost-details summary::after{display:none}
.mv-cost-details[open] summary::after{content:'−'}
.mv-cost-note{position:absolute;left:0;right:0;bottom:calc(100% + 8px);padding:16px 20px;border:1px solid #d9e2f5;border-radius:16px;background:#fff;box-shadow:0 8px 30px #243a6520;font-size:13px;line-height:1.7;max-height:40dvh;overflow:auto}
@media(max-width:600px){
 .mv-xray-panel{padding:4px 10px 8px;max-width:calc(100vw - 24px)}
 .mv-cost-row{align-items:center;padding-right:44px;gap:6px;justify-content:space-between;min-height:44px}
 .mv-cost-full{display:none}.mv-cost-short{display:inline;font-size:12px}
 .mv-cost-row .mv-xray-total{font-size:12px!important;white-space:nowrap}
 .mv-cost-row .mv-xray-total b{font-size:16px}
 .mv-xray-panel [data-mv-xray-close]{top:4px;right:4px;width:44px;height:44px;background:transparent}
 .mv-xray-tour{margin-top:0;padding-top:4px}
 .mv-xray-tour button{min-height:44px}
 .mv-xray-tour button[data-xt="prev"]{min-width:44px}
}