/* トップページの思い出バナー。テーマの CSS とぶつからないよう、すべて .mm-banner の中だけに効かせる */
.mm-banner{position:relative;overflow:hidden;height:190px;border-radius:28px;background:#b7a7e6;box-shadow:0 18px 40px rgba(70,50,110,.22);color:#fff8ef;font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif}
.mm-banner-scene{position:absolute;left:0;top:0;z-index:0;display:block;width:100%;height:100%}
.mm-banner-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.mm-banner-card{position:absolute;left:0;top:0;box-sizing:border-box;padding:6px 6px 0;background:#fffdf8;border-radius:3px;box-shadow:0 10px 22px rgba(59,51,80,.28);will-change:transform;color:#3b3350}
.mm-banner-card img{display:block;width:100%;aspect-ratio:var(--mm-ratio,4/3);object-fit:cover;border-radius:1px}
.mm-banner-card p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:8px;margin:0;padding:5px 2px 7px;font:600 12px/1.35 'Klee One','Zen Maru Gothic',sans-serif;text-align:center}
.mm-banner-text{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 20px;text-align:center;text-shadow:0 1px 3px rgba(50,20,70,.9),0 2px 12px rgba(50,20,70,.75);pointer-events:none}
.mm-banner-text p,.mm-banner-text h2{margin:0;color:inherit}
.mm-banner-text h2{font-size:36px;font-weight:700;line-height:1.3}
.mm-banner-text h2 a{color:inherit;text-decoration:none;pointer-events:auto}
.mm-banner-text h2 a::after{content:"";position:absolute;inset:0}   /* 見出しのリンクをバナー全体に広げる */
.mm-banner-text h2 a:hover{color:inherit}
.mm-banner-text h2 a:focus-visible{outline:none}
.mm-banner:has(h2 a:focus-visible){outline:3px solid #fff;outline-offset:-5px}
.mm-banner-stats{font-size:18px}
.mm-banner-stats[hidden]{display:block;visibility:hidden}   /* 枚数が届いても見出しの位置が動かないように */
.mm-banner-stats b{font-size:22px}
.mm-banner-hint{font-size:14px;font-weight:700}
/* カーソルが乗ると、バナーが浮き上がって明るくなる */
.mm-banner{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
@media (hover:hover){
  .mm-banner:hover{transform:translateY(-5px) scale(1.012);filter:brightness(1.08);box-shadow:0 26px 52px rgba(70,50,110,.38)}
}
@media (prefers-reduced-motion:reduce){
  .mm-banner{transition:none}
  .mm-banner:hover{transform:none}
}