/* ちゃいなシリーズのマスコット（过过＝パンダ・关关＝レッサーパンダ）2026-10-21 ＝ assets/mascot.js
 *  トップのヒーローの右下に2体が並んでかけあい。スマホはヒーローの文の下。 */
.hero2.has-mascot .hero2-inner{max-width:min(640px,56%)}
.ctm-stage{position:absolute;right:0;bottom:0;z-index:2;width:min(46%,520px);height:100%;pointer-events:none}
.ctm-floor{position:absolute;left:4%;right:2%;bottom:6px;height:56px;border-radius:50%;background:radial-gradient(closest-side,rgba(63,125,94,.30),rgba(63,125,94,.10) 70%,rgba(63,125,94,0));opacity:0;transition:opacity .6s}
.ctm-stage.ctm-ready .ctm-floor{opacity:1}
.ctm-chr{position:absolute;bottom:2px;width:220px;height:220px;pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .9s cubic-bezier(.3,.8,.3,1)}
.ctm-chr.a{right:44%}
.ctm-chr.b{right:4%}
/* 白いふさふさ（レッサーの耳・ほっぺ）が明るい地に溶けないよう、ふちに薄い影 */
.ctm-cv{display:block;width:100%;height:100%;filter:drop-shadow(0 0 1px rgba(60,40,25,.5)) drop-shadow(0 8px 12px rgba(30,50,40,.16))}
.ctm-chr.hop .ctm-cv{animation:ctmHop .3s ease-in-out infinite}
@keyframes ctmHop{50%{transform:translateY(-9px)}}
.ctm-name{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);font:700 11px/1.6 "M PLUS Rounded 1c",sans-serif;color:#2f6248;background:rgba(255,255,255,.9);border-radius:99px;padding:0 9px;opacity:0;transition:opacity .2s;white-space:nowrap;pointer-events:none}
.ctm-chr.b .ctm-name{color:#9a4a1c}
.ctm-chr:hover .ctm-name{opacity:1}
/* 吹き出し（中国語＋拼音＋小さく日本語） */
.ctm-bub{position:absolute;bottom:86%;left:50%;transform:translate(-50%,8px) scale(.9);transform-origin:bottom center;opacity:0;transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.3,1.3);background:#fff;border:2px solid #3f7d5e;border-radius:14px;padding:6px 13px 7px;white-space:normal;width:max-content;max-width:min(360px,88vw);word-break:keep-all;line-break:strict;overflow-wrap:normal;text-align:center;box-shadow:0 8px 18px -10px rgba(0,0,0,.35);pointer-events:none;z-index:3}
.ctm-bub.on{opacity:1;transform:translate(-50%,0) scale(1)}
.ctm-bub::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-8px;border:8px solid transparent;border-top-color:#3f7d5e;border-bottom:0}
.ctm-bub b{display:block;font:700 17px/1.35 "Noto Sans SC",sans-serif;color:#1f2a22;letter-spacing:.02em}
.ctm-bub i{display:block;font:500 12px/1.4 "Noto Sans",sans-serif;font-style:normal;color:#3f7d5e}
.ctm-bub small{display:block;font-size:10.5px;line-height:1.4;color:#7a837b}
.ctm-chr.b .ctm-bub{left:auto;right:6px;transform:translateY(8px) scale(.9);transform-origin:bottom right;border-color:#c0602a}
.ctm-chr.b .ctm-bub.on{transform:none}
.ctm-chr.b .ctm-bub::after{left:auto;right:64px;border-top-color:#c0602a}
.ctm-chr.b .ctm-bub i{color:#b0561f}
@media (max-width:960px){.ctm-chr{width:180px;height:180px}.ctm-chr.a{right:46%}}
/* スマホ: ヒーローの文の下に並ぶ */
@media (max-width:680px){
  .hero2.has-mascot .hero2-inner{max-width:none;padding-bottom:6px}
  .ctm-stage{position:relative;width:100%;height:196px;right:auto;bottom:auto}
  .ctm-chr{width:150px;height:150px}
  .ctm-chr.a{right:auto;left:10%}
  .ctm-chr.b{right:8%}
  .ctm-bub{bottom:84%;max-width:min(300px,70vw)}
  .ctm-bub b{font-size:15px}
  .ctm-chr.a .ctm-bub{left:0;transform:translateY(8px) scale(.9);transform-origin:bottom left}
  .ctm-chr.a .ctm-bub.on{transform:none}
  .ctm-chr.a .ctm-bub::after{left:52px}
}
@media (prefers-reduced-motion:reduce){.ctm-chr{transition:none}.ctm-chr.hop .ctm-cv{animation:none}}