body {
  font-family: "Zen Maru Gothic", sans-serif;
  overflow-x: hidden;
  background-color: #f0f7ff;
}

.hero-container {
  height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}

/* 縦書きの「紡ごうよ、キミの感性。」用の極太白フチ */
.emotive-vertical-text {
  writing-mode: vertical-rl;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #2563eb;

  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
    1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff,
    -1.5px 1.5px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff,
    0 -3px 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff,
    -2px 2px 0 #fff, 4px 0 0 #fff, -4px 0 0 #fff, 0 4px 0 #fff, 0 -4px 0 #fff,
    3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff,
    5px 0 0 #fff, -5px 0 0 #fff, 0 5px 0 #fff, 0 -5px 0 #fff, 4px 4px 0 #fff,
    -4px -4px 0 #fff, 4px -4px 0 #fff, -4px 4px 0 #fff,
    0px 6px 15px rgba(37, 99, 235, 0.45);
}

@keyframes floatBubble {
  0%,
  100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
}
.floating-bubble-1 {
  animation: floatBubble 5s ease-in-out infinite;
}
.floating-bubble-2 {
  animation: floatBubble 7s ease-in-out infinite 1s;
}
.floating-bubble-3 {
  animation: floatBubble 6s ease-in-out infinite 2s;
}

/* 掲示板セクション用コルクボード風背景 */
.bulletin-board-bg {
  background-color: #f4ebd0; /* やわらかいボード色 */
  background-image: radial-gradient(#d1bfae 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* 1枚の大きな掲示板（横スクロール）構造 */
.horizontal-outer {
  overflow: hidden;
  width: 100%;
}
.horizontal-inner {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
}

.retro-box-shadow {
  box-shadow: 8px 8px 0px #333333;
  border: 3px solid #333333;
}
.retro-pink-shadow {
  box-shadow: 8px 8px 0px #ff5a9e;
  border: 3px solid #333333;
}

.hand-drawn-line {
  position: relative;
}
.hand-drawn-line::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 6px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0,5 Q50,0 100,5 T150,5" fill="none" stroke="%23FF5A9E" stroke-width="3" stroke-linecap="round"/></svg>')
    no-repeat;
  background-size: 100% 100%;
}

.carousel-slide {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  inset: 0;
}
.carousel-slide.active {
  opacity: 1;
  z-index: 10;
}