/* めぶっち 共通CSS（2026-10-02 index.html から切り出し）。トップと下層ページで共用。 */
/* 見出しのめぶっち（2026-10-01 試作） */
.hm{display:flex;align-items:center;gap:14px}
.hm-i{height:96px;width:auto;flex:none;display:block;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-drag:none;user-select:none;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.hm-t{display:block;min-width:0}
.hm-i{transform-origin:50% 100%;will-change:auto}
/* めぶっち5種の動き（足元中心・transform のみ・終わると元の姿勢） */
.mebu{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mb-hop{animation:mb-hop 1s ease-in-out 1}
.mb-wave{animation:mb-wave 1.1s ease-in-out 1}
.mb-spin{animation:mb-spin 1s ease-in-out 1}
.mb-wiggle{animation:mb-wiggle .8s ease-in-out 1}
.mb-bow{animation:mb-bow 1.2s ease-in-out 1}
@keyframes mb-hop{0%{transform:translateY(0) scale(1,1)}14%{transform:translateY(0) scale(1.07,.9)}40%{transform:translateY(-14px) scale(.98,1.04)}66%{transform:translateY(0) scale(1,1)}76%{transform:translateY(0) scale(1.09,.86)}90%{transform:translateY(0) scale(.98,1.03)}100%{transform:translateY(0) scale(1,1)}}
@keyframes mb-wave{0%{transform:rotate(0)}15%{transform:rotate(-12deg)}35%{transform:rotate(11deg)}55%{transform:rotate(-9deg)}75%{transform:rotate(6deg)}100%{transform:rotate(0)}}
@keyframes mb-spin{0%{transform:perspective(500px) rotateY(0)}100%{transform:perspective(500px) rotateY(360deg)}}
@keyframes mb-wiggle{0%,100%{transform:translateX(0) rotate(0)}10%{transform:translateX(-3px) rotate(-3deg)}20%{transform:translateX(3px) rotate(3deg)}30%{transform:translateX(-3px) rotate(-3deg)}40%{transform:translateX(3px) rotate(3deg)}50%{transform:translateX(-2px) rotate(-2deg)}60%{transform:translateX(2px) rotate(2deg)}75%{transform:translateX(-1px) rotate(-1deg)}}
@keyframes mb-bow{0%{transform:rotate(0) scaleY(1)}35%{transform:rotate(22deg) scaleY(.96)}62%{transform:rotate(22deg) scaleY(.96)}100%{transform:rotate(0) scaleY(1)}}
@media (prefers-reduced-motion:reduce){.mb-hop,.mb-wave,.mb-spin,.mb-wiggle,.mb-bow{animation:none}}
@media (max-width:767px){.hm{gap:10px}.hm-i{height:56px;filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 2px 4px rgba(0,0,0,.15))}}
.mebu{
  display:block;padding:0;margin:0;border:0;background:none;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:10px;
}
.mebu[hidden]{display:none}
.mebu:focus-visible{outline:2px solid var(--navy-ink);outline-offset:4px}
.mebu-inner{position:relative;display:block;width:100%;height:100%;transform-origin:50% 100%}
.mebu-inner img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.mebu-sprout{transform-origin:51.4% 20.5%} /* 茎の付け根 */
@media (hover:hover) and (pointer:fine){
  .mebu.is-sway .mebu-sprout{animation:mebu-sway-soft .6s ease-out both}
}
.mebu.is-boing .mebu-inner{animation:mebu-boing .78s cubic-bezier(.3,.7,.4,1) both}
.mebu.is-boing .mebu-sprout{animation:mebu-sway .86s ease-out both}
@keyframes mebu-boing{
  0%  {transform:scale(1,1) rotate(0)}
  16% {transform:scale(1.07,.9) rotate(0)}
  38% {transform:translateY(-7%) scale(.95,1.08) rotate(-3deg)}
  60% {transform:translateY(0) scale(1.03,.97) rotate(2deg)}
  80% {transform:scale(.99,1.01) rotate(-1deg)}
  100%{transform:scale(1,1) rotate(0)}
}
@keyframes mebu-sway{
  0%  {transform:rotate(0)}
  20% {transform:rotate(-16deg)}
  42% {transform:rotate(12deg)}
  62% {transform:rotate(-7deg)}
  80% {transform:rotate(3deg)}
  100%{transform:rotate(0)}
}
@keyframes mebu-sway-soft{
  0%  {transform:rotate(0)}
  25% {transform:rotate(-9deg)}
  55% {transform:rotate(6deg)}
  80% {transform:rotate(-2deg)}
  100%{transform:rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .mebu.is-boing .mebu-inner,.mebu.is-boing .mebu-sprout,.mebu.is-sway .mebu-sprout{animation:none}
}

/* ---- 下層ページ用（トップでは使わない。2026-10-02）----
   .hm-row … 見出し(h2)に左ぼうやアンダーラインがあるページ用。めぶっち+見出しを横に並べる箱。
   h2.hm.hm-sub … 見出し自体を横並びにするページ用（中にimgとspan.hm-t）。
   .hm-fw … フッターの「またね」。ここも押すと動く（自動では動かない）。 */
.hm-row{display:flex;align-items:center;gap:12px;margin:52px 0 14px}
.hm-row>h2{margin:0;min-width:0;flex:1}
.hm-row .hm-i,.hm-sub .hm-i{height:72px}
h2.hm.hm-sub{max-width:none;gap:12px}
.hm-fw{display:flex;align-items:center;gap:8px}
.hm-fw .hm-i{height:56px}
@media (max-width:767px){
  .hm-row,h2.hm.hm-sub{gap:8px}
  .hm-row .hm-i,.hm-sub .hm-i{height:52px}
  .hm-fw .hm-i{height:44px}
}
.cta .hm-sub{justify-content:center}