/* ============================================================
   トップページの「ゲームはこちら」の帯
   ------------------------------------------------------------
   ・帯ぜんたいが /game.html へのリンクです
   ・絵は assets/game/ の小さなドット絵を拡大して使っています
   ============================================================ */
.gmband{
  padding: clamp(18px, 3vw, 32px) var(--pad);
}
.gmband__in{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  max-width: var(--max);
  margin: 0 auto;
  overflow: hidden;
  border: 4px solid #141414;
  box-shadow: 0 0 0 2px #FFD81A, 8px 8px 0 rgba(0,0,0,.55);
  color: #141414;
  text-decoration: none;
  background: #F2D8A2;
}

/* 左：空・海・砂浜の上を飛ぶキャラ */
.gmband__art{
  position: relative;
  min-height: 220px;
  background:
    linear-gradient(#F2D8A2, #F2D8A2) bottom / 100% 16% no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) left 0 bottom 16% / 100% 4px no-repeat,
    linear-gradient(180deg, #1C7FC4 0%, #35BCD4 60%, #5ADBCF 100%) bottom 16% left 0 / 100% 22% no-repeat,
    linear-gradient(180deg, #4EC0E2 0%, #7DD4EA 45%, #BCE9F0 75%, #FFD6D8 100%);
  image-rendering: pixelated;
}
.gmband__art img{
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.gmband__top{ top: 0; left: 58%; width: 68px; height: 36%; object-fit: cover; object-position: bottom; }
.gmband__bot{ bottom: 16%; left: 58%; width: 68px; height: 30%; object-fit: cover; object-position: top; }
.gmband__hero{
  top: 42%; left: 18%;
  width: 144px; height: 64px;
  transform: translateY(-50%) rotate(-10deg);
  animation: gmband-bob 1.6s steps(4) infinite alternate;
}
@keyframes gmband-bob{
  from{ transform: translateY(-58%) rotate(-12deg); }
  to  { transform: translateY(-42%) rotate(-4deg); }
}

/* 右：文字 */
.gmband__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: clamp(20px, 3vw, 36px);
  background: #FFF6E2;
  border-left: 4px solid #141414;
}
.gmband__tag{
  margin: 0;
  font-family: "DotGothic16", var(--body);
  font-size: 14px;
  color: #FF5FA2;
}
.gmband__title{
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: .02em;
  color: #141414;
}
.gmband__lead{
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #3A3A3A;
  max-width: 30em;
}
.gmband__btn{
  align-self: flex-start;
  margin-top: 6px;
  padding: 10px 26px 8px;
  font-family: "DotGothic16", var(--body);
  font-size: 18px;
  color: #fff;
  background: #FF5FA2;
  border: 3px solid #141414;
  box-shadow: 4px 4px 0 #141414;
  text-shadow: 2px 2px 0 #141414;
  transition: transform .12s ease, box-shadow .12s ease;
}
.gmband__in:hover .gmband__btn{ transform: translate(2px, 2px); box-shadow: 2px 2px 0 #141414; }
.gmband__in:focus-visible{ outline: 3px solid #3FD3E0; outline-offset: 4px; }

@media (max-width: 760px){
  .gmband__in{ grid-template-columns: minmax(0, 1fr); }
  .gmband__art{ min-height: 180px; }
  .gmband__body{ border-left: 0; border-top: 4px solid #141414; }
  .gmband__hero{ width: 117px; height: 52px; left: 12%; }
  .gmband__top, .gmband__bot{ width: 51px; left: 62%; }
}
@media (prefers-reduced-motion: reduce){
  .gmband__hero{ animation: none; }
}