body {
  font-size: 18px;
  line-height: 1.6;
  background-color: #f0f8ff;
  color: #333;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow-x: hidden;  /* 横スクロール防止 */
  overflow-y: auto;    /* 縦スクロール許可 */
  position: relative;
}

h1 {
  font-size: 28px;
}

img {
  max-width: 600px;
  width: 90%;
  height: auto;
}

a {
  text-decoration: none;
  color: #0000ee;
}

center {
  position: relative;
  z-index: 1;
  padding: 1em;
  border-radius: 1em;
  max-width: 90%;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.7);
}

.background-text {
  position: fixed;
  white-space: nowrap;
  font-size: 5vw;
  color: rgba(0, 0, 0, 0.2);
  transform: rotate(-45deg);
  pointer-events: none;
  z-index: 0;
}

.background-text1 { top: 15vh; left: -10vw; animation: scrollDiagonal 30s linear infinite; }
.background-text2 { top: 20vh; left: -20vw; animation: scrollDiagonal 30s linear infinite; }
.background-text3 { top: 25vh; left: -30vw; animation: scrollDiagonal 30s linear infinite; }
.background-text4 { top: 85vh; left: -10vw; animation: scrollDiagonal 30s linear infinite; }
.background-text5 { top: 90vh; left: -20vw; animation: scrollDiagonal 30s linear infinite; }
.background-text6 { top: 95vh; left: -30vw; animation: scrollDiagonal 30s linear infinite; }
.background-text7 { top: 155vh; left: -10vw; animation: scrollDiagonal 30s linear infinite; }
.background-text8 { top: 160vh; left: -20vw; animation: scrollDiagonal 30s linear infinite; }
.background-text9 { top: 165vh; left: -30vw; animation: scrollDiagonal 30s linear infinite; }


@keyframes scrollDiagonal {
  0% {
    transform: translate(0, 0) rotate(-45deg);
  }
  100% {
    transform: translate(150vw, -150vh) rotate(-45deg);
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: 22px;
  }

  img {
    max-width: 100%;
  }

  .background-text {
    font-size: 12vw;
    animation: scrollDiagonal 30s linear infinite;
  }

  /* スマホ用に top の位置を間隔広げて再設定 */
  .background-text1 { top: 10vh; left: -60vw; }
  .background-text2 { top: 25vh; left: -70vw; }
  .background-text3 { top: 40vh; left: -80vw; }
  .background-text4 { top: 60vh; left: -60vw; }
  .background-text5 { top: 75vh; left: -70vw; }
  .background-text6 { top: 90vh; left: -80vw; }
  .background-text7 { top: 110vh; left: -60vw; }
  .background-text8 { top: 125vh; left: -70vw; }
  .background-text9 { top: 140vh; left: -80vw; }

  center {
    padding: 1.5em;
    font-size: 100%;
  }
}

center {
  position: absolute;
  top: 5vh; /* ← 画面上から10%下に */
  left: 50%;
  transform: translateX(-50%); /* 横方向だけ中央にする */
  z-index: 1;
  padding: 2em;
  border-radius: 1em;
  width: 90%;
  max-width: 600px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}
/* ぽよんぽよんアニメーション */
@keyframes poyon {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2, 0.8);
  }
  50% {
    transform: scale(0.9, 1.1);
  }
  70% {
    transform: scale(1.05, 0.95);
  }
}

/* アニメーションのスタイル */
.poyon {
  display: inline-block;
  animation: poyon 2s infinite;
  transform-origin: center;
}

.new-badge {
  color: red;
  font-weight: bold;
  margin-right: 5px;
  font-size: 0.9em;
  animation: flash 0.5s infinite alternate;
}

/* ピカピカ点滅する感じ（オプション） */
@keyframes flash {
  from { opacity: 1; }
  to { opacity: 0.4; }
}