body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, 
    #B3E5FC 0%,
    #81D4FA 12%,
    #4FC3F7 25%,
    #29B6F6 38%,
    #0288D1 50%,
    #0277BD 62%,
    #01579B 75%,
    #003F5C 88%,
    #002F5C 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  color: #fff;
  overflow-x: hidden;
  min-height: 100vh;
}

/* テキスト等と重なった際に自動で薄くするための状態クラス */
.fish.dimmed { opacity: 0.18; }

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientShiftEnhanced {
  0% { background-position: 0% 50%; }
  20% { background-position: 25% 50%; }
  40% { background-position: 50% 50%; }
  60% { background-position: 75% 50%; }
  80% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

header {
  /* unify with hero background look */
  background: linear-gradient(135deg, rgba(176, 224, 230, 0.9), rgba(176, 224, 230, 1));
  backdrop-filter: blur(10px);
  padding: 20px;
  margin-top: 0;
  text-align: center;
  color: #003366;
  font-size: 1.8em;
  animation: headerAnimation 1.5s ease-out;
  transform-origin: top;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-size: 400% 400%;
  animation: gradientShiftEnhanced 20s ease infinite;
  position: relative;
  overflow: hidden;
}

@keyframes headerAnimation {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.95);
  }
  50% {
    opacity: 0.8;
    transform: translateY(10px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

nav a {
  margin: 0 15px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  animation: navButtonFadeIn 0.8s ease-out forwards;
  opacity: 0;
}

@keyframes navButtonFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

nav a:nth-child(1) { animation-delay: 0.2s; }
nav a:nth-child(2) { animation-delay: 0.4s; }
nav a:nth-child(3) { animation-delay: 0.6s; }
nav a:nth-child(4) { animation-delay: 0.8s; }

.hero {
  text-align: center;
  padding: 120px 20px 40px;
  animation: fadeIn 1.5s ease-in;
  position: relative;
  background: linear-gradient(135deg, rgba(176, 224, 230, 0.9), rgba(176, 224, 230, 1));
  backdrop-filter: blur(10px);
  min-height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: 400% 400%;
  animation: gradientShiftEnhanced 20s ease infinite;
  overflow: hidden;
}

.hero img {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

.hero img.animate-clockwise {
  animation: iconAnimationClockwise 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.hero img.animate-counterclockwise {
  animation: iconAnimationCounterclockwise 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.hero img:active {
  transform: scale(0.95);
}

.app-icon {
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-icon:hover {
  transform: scale(1.1);
}

.app-icon.rotate-clockwise {
  animation: iconAnimationClockwise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.app-icon.rotate-counterclockwise {
  animation: iconAnimationCounterclockwise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes iconAnimationClockwise {
  0% { transform: rotate(0deg) scale(1); }
  2% { transform: rotate(7.2deg) scale(1.01); }
  4% { transform: rotate(14.4deg) scale(1.02); }
  6% { transform: rotate(21.6deg) scale(1.03); }
  8% { transform: rotate(28.8deg) scale(1.04); }
  10% { transform: rotate(36deg) scale(1.05); }
  12% { transform: rotate(43.2deg) scale(1.06); }
  14% { transform: rotate(50.4deg) scale(1.07); }
  16% { transform: rotate(57.6deg) scale(1.08); }
  18% { transform: rotate(64.8deg) scale(1.09); }
  20% { transform: rotate(72deg) scale(1.1); }
  22% { transform: rotate(79.2deg) scale(1.1); }
  24% { transform: rotate(86.4deg) scale(1.1); }
  26% { transform: rotate(93.6deg) scale(1.1); }
  28% { transform: rotate(100.8deg) scale(1.1); }
  30% { transform: rotate(108deg) scale(1.1); }
  32% { transform: rotate(115.2deg) scale(1.1); }
  34% { transform: rotate(122.4deg) scale(1.1); }
  36% { transform: rotate(129.6deg) scale(1.1); }
  38% { transform: rotate(136.8deg) scale(1.1); }
  40% { transform: rotate(144deg) scale(1.1); }
  42% { transform: rotate(151.2deg) scale(1.1); }
  44% { transform: rotate(158.4deg) scale(1.1); }
  46% { transform: rotate(165.6deg) scale(1.1); }
  48% { transform: rotate(172.8deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1.1); }
  52% { transform: rotate(187.2deg) scale(1.1); }
  54% { transform: rotate(194.4deg) scale(1.1); }
  56% { transform: rotate(201.6deg) scale(1.1); }
  58% { transform: rotate(208.8deg) scale(1.1); }
  60% { transform: rotate(216deg) scale(1.1); }
  62% { transform: rotate(223.2deg) scale(1.1); }
  64% { transform: rotate(230.4deg) scale(1.1); }
  66% { transform: rotate(237.6deg) scale(1.1); }
  68% { transform: rotate(244.8deg) scale(1.1); }
  70% { transform: rotate(252deg) scale(1.1); }
  72% { transform: rotate(259.2deg) scale(1.1); }
  74% { transform: rotate(266.4deg) scale(1.1); }
  76% { transform: rotate(273.6deg) scale(1.1); }
  78% { transform: rotate(280.8deg) scale(1.1); }
  80% { transform: rotate(288deg) scale(1.1); }
  82% { transform: rotate(295.2deg) scale(1.09); }
  84% { transform: rotate(302.4deg) scale(1.08); }
  86% { transform: rotate(309.6deg) scale(1.07); }
  88% { transform: rotate(316.8deg) scale(1.06); }
  90% { transform: rotate(324deg) scale(1.05); }
  92% { transform: rotate(331.2deg) scale(1.04); }
  94% { transform: rotate(338.4deg) scale(1.03); }
  96% { transform: rotate(345.6deg) scale(1.02); }
  98% { transform: rotate(352.8deg) scale(1.01); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes iconAnimationCounterclockwise {
  0% { transform: rotate(0deg) scale(1); }
  2% { transform: rotate(-7.2deg) scale(1.01); }
  4% { transform: rotate(-14.4deg) scale(1.02); }
  6% { transform: rotate(-21.6deg) scale(1.03); }
  8% { transform: rotate(-28.8deg) scale(1.04); }
  10% { transform: rotate(-36deg) scale(1.05); }
  12% { transform: rotate(-43.2deg) scale(1.06); }
  14% { transform: rotate(-50.4deg) scale(1.07); }
  16% { transform: rotate(-57.6deg) scale(1.08); }
  18% { transform: rotate(-64.8deg) scale(1.09); }
  20% { transform: rotate(-72deg) scale(1.1); }
  22% { transform: rotate(-79.2deg) scale(1.1); }
  24% { transform: rotate(-86.4deg) scale(1.1); }
  26% { transform: rotate(-93.6deg) scale(1.1); }
  28% { transform: rotate(-100.8deg) scale(1.1); }
  30% { transform: rotate(-108deg) scale(1.1); }
  32% { transform: rotate(-115.2deg) scale(1.1); }
  34% { transform: rotate(-122.4deg) scale(1.1); }
  36% { transform: rotate(-129.6deg) scale(1.1); }
  38% { transform: rotate(-136.8deg) scale(1.1); }
  40% { transform: rotate(-144deg) scale(1.1); }
  42% { transform: rotate(-151.2deg) scale(1.1); }
  44% { transform: rotate(-158.4deg) scale(1.1); }
  46% { transform: rotate(-165.6deg) scale(1.1); }
  48% { transform: rotate(-172.8deg) scale(1.1); }
  50% { transform: rotate(-180deg) scale(1.1); }
  52% { transform: rotate(-187.2deg) scale(1.1); }
  54% { transform: rotate(-194.4deg) scale(1.1); }
  56% { transform: rotate(-201.6deg) scale(1.1); }
  58% { transform: rotate(-208.8deg) scale(1.1); }
  60% { transform: rotate(-216deg) scale(1.1); }
  62% { transform: rotate(-223.2deg) scale(1.1); }
  64% { transform: rotate(-230.4deg) scale(1.1); }
  66% { transform: rotate(-237.6deg) scale(1.1); }
  68% { transform: rotate(-244.8deg) scale(1.1); }
  70% { transform: rotate(-252deg) scale(1.1); }
  72% { transform: rotate(-259.2deg) scale(1.1); }
  74% { transform: rotate(-266.4deg) scale(1.1); }
  76% { transform: rotate(-273.6deg) scale(1.1); }
  78% { transform: rotate(-280.8deg) scale(1.1); }
  80% { transform: rotate(-288deg) scale(1.1); }
  82% { transform: rotate(-295.2deg) scale(1.09); }
  84% { transform: rotate(-302.4deg) scale(1.06); }
  86% { transform: rotate(-309.6deg) scale(1.07); }
  88% { transform: rotate(-316.8deg) scale(1.06); }
  90% { transform: rotate(-324deg) scale(1.05); }
  92% { transform: rotate(-331.2deg) scale(1.04); }
  94% { transform: rotate(-338.4deg) scale(1.03); }
  96% { transform: rotate(-345.6deg) scale(1.02); }
  98% { transform: rotate(-352.8deg) scale(1.01); }
  100% { transform: rotate(-360deg) scale(1); }
}

.track {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 20px;
  margin: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  width: 250px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.track:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.track button {
  margin-top: 10px;
  background: linear-gradient(135deg, #B3E5FC, #81D4FA);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.track button:hover {
  background: linear-gradient(135deg, #81D4FA, #B3E5FC);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* 泡エフェクトのスタイル */
.bubble {
  position: fixed;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  animation: bubbleRise 1.7s ease-out forwards;
}

@keyframes bubbleRise {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ムービーボックスのアニメーション */
.movie-box {
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.movie-box.slide-in-right.animate {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.movie-box.slide-in-left.animate {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.movie-box.slide-in-depth.animate {
  opacity: 1;
  transform: scale(1) translateZ(0);
  transition: all 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 右上のアイコン */
.top-right-icon {
  position: fixed;
  top: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px) scale(0.8);
  z-index: 1000;
}
.top-right-icon.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.top-right-icon:hover {
  transform: scale(1.1);
}
.top-right-icon.clicked {
  animation: iconClick 0.3s ease-out;
}
@keyframes iconClick {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* トップに戻るボタン */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #87CEEB, #4682B4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  z-index: 1000;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 8px 25px rgba(135,206,235,0.4);
}
.back-to-top::before {
  content: '↑ top';
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
} 

.nav-button {
  background-color: rgba(255, 255, 255, 0.2);
  color: #003366;
  padding: 20px 36px;
  border-radius: 40px;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.nav-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
  z-index: 1;
}

.nav-button:hover {
  background-color: rgba(255, 255, 255, 0.4);
  color: #001a33;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

.nav-button:hover::before {
  left: 100%;
}

.nav-button:active {
  transform: translateY(-1px) scale(1.02);
  transition: all 0.1s ease;
}

/* （宝箱陰影は削除） */

.flying-note {
  position: absolute;
  font-size: 24px;
  color: #FF69B4;
  opacity: 0;
  animation: flyNote 2s ease-out forwards;
  transform-origin: center;
}

@keyframes flyNote {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(var(--rot)); }
  100% { opacity: 0; transform: translate(calc(var(--tx) * 2), calc(var(--ty) * 2)) scale(0.5) rotate(calc(var(--rot) * 2)); }
}

#mimeIcon:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.tracks {
  background: linear-gradient(135deg, rgba(176, 224, 230, 0.9), rgba(135, 206, 235, 1));
  background-size: 400% 400%;
  animation: gradientShiftEnhanced 20s ease infinite;
  position: relative;
  /* 高さは固定せず、最小高さのみを確保してシフトを防ぐ */
  min-height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120px 20px;
  box-sizing: border-box;
}

#features-1 {
  background: linear-gradient(135deg, rgba(2, 136, 209, 0.9), rgba(2, 136, 209, 1));
  background-size: 400% 400%;
  animation: gradientShiftEnhanced 20s ease infinite;
}

#features-2 {
  background: linear-gradient(135deg, rgba(2, 119, 189, 0.9), rgba(2, 119, 189, 1));
  background-size: 400% 400%;
  animation: gradientShiftEnhanced 20s ease infinite;
}

#features-3 {
  background: linear-gradient(135deg, rgba(1, 87, 155, 0.9), rgba(1, 87, 155, 1));
  background-size: 400% 400%;
  animation: gradientShiftEnhanced 20s ease infinite;
}

#roadmap {
  background: linear-gradient(135deg, rgba(0, 0, 51, 0.9), rgba(0, 0, 51, 1));
  background-size: 400% 400%;
  animation: gradientShiftEnhanced 20s ease infinite;
}

#contact {
  background: linear-gradient(135deg, rgba(0, 0, 34, 0.9), rgba(0, 0, 34, 1));
  background-size: 400% 400%;
  animation: gradientShiftEnhanced 20s ease infinite;
}

/* ===== Area2 Submit Button ===== */
.tracks-submit-btn {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #42A5F5, #1E88E5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2,119,189,0.35), 0 2px 6px rgba(0,0,0,0.15);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  backdrop-filter: blur(6px);
}
.tracks-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2,119,189,0.4), 0 3px 10px rgba(0,0,0,0.18);
  filter: brightness(1.03);
}
.tracks-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(2,119,189,0.32), 0 2px 6px rgba(0,0,0,0.15);
}
.tracks-submit-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66,165,245,0.25), 0 6px 18px rgba(2,119,189,0.35);
}

@media (max-width: 620px) {
  .tracks-submit-btn {
    right: 16px;
    bottom: 16px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .tracks-submit-btn {
    right: 12px;
    bottom: 12px;
    padding: 9px 14px;
    font-size: 13px;
  }
}

/* エリア4からエリア6（海） */
.area4, .area5, .area6 {
  background: linear-gradient(135deg, #4FC3F7, #0288D1);
  backdrop-filter: blur(5px);
  min-height: 20vh;
}

/* エリア7からエリア9（深海） */
.area7, .area8, .area9 {
  background: linear-gradient(135deg, #01579B, #002F5C);
  backdrop-filter: blur(5px);
  min-height: 20vh;
}

/* エリア1からエリア2（青空） */
.area1, .area2 {
  position: relative;
}

.area1::before, .area2::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 100px;
  background: url('clouds.png') repeat-x;
  opacity: 0.5;
  animation: moveClouds 60s linear infinite;
}

@keyframes moveClouds {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

/* エリア3からエリア6（海）
   旧：fish.png を使った魚装飾は撤去しました（魚影は全削除）。*/
.area3, .area4, .area5, .area6 {
  position: relative;
}

/* エリア7からエリア9（深海） */
.area7, .area8, .area9 {
  position: relative;
}

.area7::before, .area8::before, .area9::before {
  content: '';
  position: absolute;
  bottom: 5%;
  right: 10%;
  width: 60px;
  height: 60px;
  background: url('treasure.png') no-repeat;
  opacity: 0.6;
}

/* ========= Parallax & Animated Background (added) ========= */
/* Animated conic gradient overlay for hero */
.hero::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: conic-gradient(from 0deg, rgba(140,210,255,0.20), rgba(2,136,209,0.12), rgba(255,255,255,0.08), rgba(140,210,255,0.20));
  filter: blur(24px) saturate(110%);
  animation: rotateSlow 60s linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes rotateSlow {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Soft cloud blobs for parallax layers */
.cloud {
  position: absolute;
  /* base puff */
  background: radial-gradient(closest-side, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%);
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  opacity: var(--opacity, 0.65);
  pointer-events: none;
  /* horizontal drift only; vertical parallax is handled in JS (top) */
  animation: 
    cloudDrift var(--driftDur, 110s) linear var(--driftDelay, 0s) infinite;
  z-index: 1; /* above background overlays, below content */
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  inset: auto; /* we'll position via top/left */
  width: 70%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%);
  border-radius: 50%;
  filter: blur(calc(var(--blur, 8px) * 0.9));
}

/* side lobes to look puffier */
.cloud::before { left: -20%; top: 10%; }
.cloud::after  { right: -20%; top: -5%; }

/* Cloud shape variants (multi-radial backgrounds) */
.cloud.shape-a {
  background:
    radial-gradient(120px 80px at 35% 55%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%),
    radial-gradient(90px 70px  at 65% 45%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
    radial-gradient(70px 60px  at 50% 65%, rgba(255,255,255,0.70), rgba(255,255,255,0) 70%);
}
.cloud.shape-b {
  background:
    radial-gradient(100px 70px at 40% 50%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%),
    radial-gradient(70px 60px  at 70% 55%, rgba(255,255,255,0.8),  rgba(255,255,255,0) 70%),
    radial-gradient(60px 50px  at 25% 60%, rgba(255,255,255,0.65), rgba(255,255,255,0) 70%);
}
.cloud.shape-c {
  background:
    radial-gradient(130px 90px at 45% 55%, rgba(255,255,255,0.8),  rgba(255,255,255,0) 70%),
    radial-gradient(80px 60px  at 65% 40%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
    radial-gradient(90px 60px  at 30% 70%, rgba(255,255,255,0.7),  rgba(255,255,255,0) 70%);
}
.cloud.shape-d {
  background:
    radial-gradient(110px 80px at 50% 45%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%),
    radial-gradient(70px 60px  at 30% 60%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
    radial-gradient(80px 60px  at 75% 60%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%);
}

@keyframes cloudDrift {
  0%   { transform: translateX(100vw); }
  100% { transform: translateX(-100vw); }
}

/* bobbing removed to avoid transform conflicts with drift */

/* Header cloud presets */

/* ===== Info Bubbles for Coming Soon Area ===== */
.info-bubble-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 60px;
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
}

.info-bubble {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.2),
    inset 0 10px 20px rgba(255, 255, 255, 0.1),
    inset 0 -10px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
  color: #fff;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  animation: floatBubble 6s ease-in-out infinite;
}

.info-bubble:nth-child(2) {
  animation-delay: 3s;
}

.info-bubble::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 25%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
  transform: rotate(-45deg);
  pointer-events: none;
}

.info-bubble:hover {
  transform: translateY(-15px) scale(1.05);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.3),
    inset 0 10px 30px rgba(255, 255, 255, 0.2),
    inset 0 -10px 30px rgba(0, 0, 0, 0.1);
  animation-play-state: paused;
  cursor: pointer;
}

.info-bubble p {
  font-family: "Yu Gothic Medium", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.35em;
  line-height: 1.9;
  letter-spacing: 0.08em;
  margin: 0;
  color: #f0faff;
  text-shadow: 0 2px 5px rgba(0,0,0,0.15), 0 0 15px rgba(179, 229, 252, 0.4);
  font-weight: 500;
  width: 100%;
}

.fade-in-text {
  animation: fadeInText 0.8s ease-out forwards;
}

@keyframes fadeInText {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes floatBubble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@media (max-width: 768px) {
  .info-bubble {
    width: 260px;
    height: 260px;
    padding: 30px;
  }
  .info-bubble h3 {
    font-size: 1.4em;
  }
  .info-bubble p {
    font-size: 1em;
  }
}
.cloud-header.cloud1 { width: 160px; height: 160px; top: -18px; left: 3%;  --driftDur: 128s; --driftDelay: -6s;  --blur: 7px; }
.cloud-header.cloud2 { width: 210px; height: 210px; top: 22px;  right: 12%; --driftDur: 138s; --driftDelay: -18s; --blur: 8px; }
.cloud-header.cloud3 { width: 138px; height: 138px; top: 48px;  left: 37%; --driftDur: 118s; --driftDelay: -11s; --blur: 6px; }
.cloud-header.cloud4 { width: 184px; height: 184px; top: -8px;  left: 58%; --driftDur: 144s; --driftDelay: -24s; --blur: 9px; }
.cloud-header.cloud5 { width: 115px; height: 115px; top: 34px;  right: 28%; --driftDur: 114s; --driftDelay: -3s;  --blur: 5px; }
.cloud-header.cloud6 { width: 150px; height: 150px; top: 6px;   left: 16%; --driftDur: 126s; --driftDelay: -14s; --blur: 7px; }
.cloud-header.cloud7 { width: 172px; height: 172px; top: 26px;  right: 21%; --driftDur: 136s; --driftDelay: -27s; --blur: 8px; }

/* Hero cloud presets */
.cloud-hero.cloud1 { width: 250px; height: 250px; top: 14%; left: 6%;   --driftDur: 124s; --driftDelay: -9s;  --blur: 10px; }
.cloud-hero.cloud2 { width: 205px; height: 205px; top: 22%; right: 9%;   --driftDur: 134s; --driftDelay: -2s;  --blur: 9px; }
.cloud-hero.cloud3 { width: 160px; height: 160px; top: 31%; left: 28%;  --driftDur: 117s; --driftDelay: -16s; --blur: 8px; }
.cloud-hero.cloud4 { width: 230px; height: 230px; top: 43%; right: 18%; --driftDur: 142s; --driftDelay: -21s; --blur: 11px; }
.cloud-hero.cloud5 { width: 138px; height: 138px; top: 19%; left: 51%;  --driftDur: 112s; --driftDelay: -12s; --blur: 7px; }
.cloud-hero.cloud6 { width: 184px; height: 184px; top: 29%; left: 13%;  --driftDur: 127s; --driftDelay: -5s;  --blur: 9px; }
.cloud-hero.cloud7 { width: 172px; height: 172px; top: 24%; right: 13%; --driftDur: 137s; --driftDelay: -28s; --blur: 9px; }

/* ===== Sea Layers (Area 3-10: shallow to deep) ===== */
/* Common utilities */
.sea-overlay {
  position: relative;
  overflow: hidden;
}
.sea-overlay::before,
.sea-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@keyframes lightRay {
  0% { transform: translateX(-10%) rotate(-8deg); opacity: .20; }
  50% { transform: translateX(10%) rotate(-8deg); opacity: .30; }
  100% { transform: translateX(-10%) rotate(-8deg); opacity: .20; }
}
@keyframes bubbleRise {
  0% { background-position: 0 100%, 30% 110%, 60% 105%, 85% 120%; opacity: .25; }
  100% { background-position: 0 -10%, 30% -20%, 60% -15%, 85% -30%; opacity: .35; }
}
@keyframes sparkle {
  0%, 100% { opacity: .18; }
  50% { opacity: .4; }
}

/* Area 3 Shallow: light rays + small bubbles */
#intro-video { position: relative; overflow: hidden; }
#intro-video::before {
  background:
    linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%) 0 0 / 40% 140% no-repeat,
    linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%) 50% 0 / 35% 140% no-repeat;
  animation: lightRay 12s ease-in-out infinite;
  mix-blend-mode: screen;
  z-index: 0;
}
#intro-video::after {
  background:
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.25) 0 6px, transparent 7px),
    radial-gradient(circle at 30% 95%, rgba(255,255,255,0.22) 0 5px, transparent 6px),
    radial-gradient(circle at 60% 92%, rgba(255,255,255,0.22) 0 4px, transparent 5px),
    radial-gradient(circle at 85% 98%, rgba(255,255,255,0.20) 0 6px, transparent 7px);
  background-repeat: no-repeat;
  animation: bubbleRise 16s linear infinite;
  opacity: .25;
  z-index: 0;
}

/* Area 4 Mid-shallow: fewer rays, more bubbles */
#features { position: relative; overflow: hidden; }
#features::before {
  background:
    linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%) 20% 0 / 30% 140% no-repeat;
  animation: lightRay 16s ease-in-out infinite;
  mix-blend-mode: screen;
  z-index: 0;
}
#features::after {
  background:
    radial-gradient(circle at 15% 100%, rgba(255,255,255,0.22) 0 6px, transparent 7px),
    radial-gradient(circle at 45% 105%, rgba(255,255,255,0.20) 0 5px, transparent 6px),
    radial-gradient(circle at 75% 102%, rgba(255,255,255,0.20) 0 4px, transparent 5px);
  background-repeat: no-repeat;
  animation: bubbleRise 18s linear infinite;
  opacity: .25;
  z-index: 0;
}

/* Area 5-6 Mid: fewer rays, subtle bubbles */
#features-1, #features-2 { position: relative; overflow: hidden; }
#features-1::after, #features-2::after {
  background:
    radial-gradient(circle at 25% 105%, rgba(255,255,255,0.18) 0 5px, transparent 6px),
    radial-gradient(circle at 65% 110%, rgba(255,255,255,0.18) 0 4px, transparent 5px);
  background-repeat: no-repeat;
  animation: bubbleRise 22s linear infinite;
  opacity: .22;
  z-index: 0;
}

/* Area 7-9 Deep: bioluminescent specks */
#features-3, #roadmap, #contact { position: relative; overflow: hidden; }
#features-3::before, #roadmap::before, #contact::before {
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(173,216,230,0.35), transparent 60%),
    radial-gradient(2px 2px at 30% 40%, rgba(135,206,250,0.35), transparent 60%),
    radial-gradient(2.5px 2.5px at 60% 30%, rgba(176,224,230,0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 60%, rgba(0,191,255,0.35), transparent 60%),
    radial-gradient(2px 2px at 50% 70%, rgba(64,224,208,0.35), transparent 60%);
  animation: sparkle 4s ease-in-out infinite;
}
#features-3::after, #roadmap::after, #contact::after {
  background:
    radial-gradient(circle at 20% 110%, rgba(255,255,255,0.16) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 115%, rgba(255,255,255,0.14) 0 5px, transparent 6px);
  background-repeat: no-repeat;
  animation: bubbleRise 26s linear infinite;
  opacity: .18;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .cloud { animation: none; }
  #intro-video::before,
  #intro-video::after,
  #features::before,
  #features::after,
  #features-1::after,
  #features-2::after,
  #features-3::before,
  #features-3::after,
  #roadmap::before,
  #roadmap::after,
  #contact::before,
  #contact::after { animation: none; }
}

/* Add overflow and position to header and hero */
header, .hero {
  position: relative;
  overflow: hidden;
}

/* Ensure content is above clouds (exclude cloud elements) */
header > :not(.cloud),
.hero  > :not(.cloud) { position: relative; z-index: 3; }

/* Fish silhouettes (shallow/mid only, rebuilt) */
#intro-video, #features, #features-1, #features-2 {
  position: relative;
  overflow: hidden;
}

.fish-layer {
  position: absolute; /* JSでエリア3〜6の範囲に配置 */
  left: 0; right: 0;
  pointer-events: none;
  z-index: 1; /* コンテンツより背面（コンテンツは z>=3 に） */
}

/* 魚影は全削除ポリシー：念のため強制的に非表示 */
.fish-layer, .fish { display: none !important; }

/* base fish */
.fish {
  position: absolute;
  width: 120px;
  height: 48px;
  opacity: 0.36; /* ほんの少し濃く */
  filter: blur(3px); /* つなぎ目を目立たせないよう強めに */
  --fish-color: rgba(0,0,0,0.62);
  /* 胴体＋尾（2つの楕円のみ、オーバーラップ多めでつなぎ目を隠す） */
  background:
    radial-gradient(40px 24px at 48px 24px, var(--fish-color) 80%, rgba(0,0,0,0) 81%) no-repeat,
    radial-gradient(20px 16px at 12px 24px, var(--fish-color) 80%, rgba(0,0,0,0) 81%) no-repeat;
  background-size: 80px 48px, 36px 32px;
  background-position: 0 0, 0 8px;
  will-change: transform;
}

/* 尾びれ（三角）と目（ハイライト）を追加して「魚」感を強化 */
.fish::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px; /* 体より少し左に突き出す */
  width: 0; height: 0;
  border-style: solid;
  border-width: 12px 16px 12px 0; /* 上 右 下 左 */
  border-color: transparent var(--fish-color) transparent transparent;
  transform: translateY(-50%) scaleX(var(--flip,1));
  opacity: inherit;
  filter: inherit;
}

.fish::before {
  content: '';
  position: absolute;
  right: 26px; /* 体の前方側に配置 */
  top: 18px;  /* 高さの中心より少し上 */
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35) inset;
  opacity: 0.9;
}

/* エリア3〜6内の直下要素（動画・テキスト・ボタンなど）を前面に */
#intro-video > *,
#features > *,
#features-1 > *,
#features-2 > * {
  position: relative;
  z-index: 3;
}

/* 特にムービーボックスはさらに上に（重なり対策強化） */
.movie-box { position: relative; z-index: 4; }

/* type variants (どうぶつの森の魚影を意識: 極小/小/中/大/特大/背びれ/長物/丸) */
.fish.type-tiny {
  width: 90px; height: 34px;
  background:
    radial-gradient(28px 16px at 36px 17px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(12px 10px at 8px 17px, var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 56px 32px, 20px 18px;
  background-position: 0 1px, 0 6px;
}

.fish.type-small {
  width: 110px; height: 42px;
  background:
    radial-gradient(34px 20px at 42px 21px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(14px 12px at 10px 21px, var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 68px 40px, 24px 22px;
  background-position: 0 1px, 0 8px;
}

.fish.type-medium {
  width: 130px; height: 50px;
  background:
    radial-gradient(42px 24px at 52px 25px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(18px 14px at 12px 25px, var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 84px 48px, 30px 26px;
  background-position: 0 0, 0 9px;
}

.fish.type-large {
  width: 150px; height: 56px;
  background:
    radial-gradient(50px 26px at 62px 28px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(22px 16px at 14px 28px, var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 100px 52px, 34px 28px;
  background-position: 0 0, 0 11px;
}

.fish.type-xlarge {
  width: 170px; height: 62px;
  background:
    radial-gradient(58px 30px at 72px 31px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(26px 18px at 16px 31px, var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 116px 60px, 40px 30px;
  background-position: 0 0, 0 12px;
}

/* dorsal fin (shark-like) */
.fish.type-fin {
  width: 145px; height: 50px; /* 細長い（背びれ型）をやや小さく */
  background:
    radial-gradient(46px 23px at 61px 25px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(22px 14px at 14px 25px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(9px  12px at 43px 7px,   var(--fish-color) 80%, transparent 81%) no-repeat; /* dorsal */
  background-size: 92px 46px, 34px 26px, 14px 18px;
  background-position: 0 2px, 0 10px, 0 0;
}

/* long (eel-like) */
.fish.type-long {
  width: 170px; height: 36px; /* 細長い魚をやや小さく */
  background:
    radial-gradient(62px 16px at 75px 18px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(20px 10px at 9px 18px,  var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 124px 32px, 32px 20px;
  background-position: 0 2px, 0 6px;
}

/* round (puffer-like) */
.fish.type-round {
  width: 120px; height: 60px;
  background:
    radial-gradient(34px 28px at 54px 30px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(18px 16px at 8px 30px, var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 68px 56px, 30px 26px;
  background-position: 0 0, 0 11px;
}

/* extra variants */
/* slim (細長い) */
.fish.type-slim {
  width: 180px; height: 34px; /* 細長い魚をやや小さく */
  background:
    radial-gradient(70px 14px at 86px 17px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(20px 10px at 9px 17px,  var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 140px 28px, 32px 20px;
  background-position: 0 3px, 0 6px;
}

/* broad (胴広) */
.fish.type-broad {
  width: 150px; height: 70px;
  background:
    radial-gradient(56px 32px at 64px 35px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(22px 18px at 10px 35px, var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 112px 64px, 36px 30px;
  background-position: 0 2px, 0 13px;
}

/* giant (特大：丸胴の更に大) */
.fish.type-giant {
  width: 320px; height: 125px; /* さらに大型化（クジラ） */
  background:
    radial-gradient(124px 57px at 142px 62px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(48px  34px at 23px  62px, var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 247px 114px, 75px 57px;
  background-position: 0 0, 0 23px;
}

/* ray-like (エイ型：菱形の胴＋短い尾) */
.fish.type-ray {
  width: 160px; height: 66px;
  background:
    radial-gradient(40px 28px at 70px 32px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(36px 26px at 40px 32px, var(--fish-color) 80%, transparent 81%) no-repeat,
    radial-gradient(20px 12px at 8px 32px, var(--fish-color) 80%, transparent 81%) no-repeat;
  background-size: 80px 56px, 72px 52px, 28px 20px;
  background-position: 20px 4px, 0 8px, 0 22px;
}

/* swim animations with direction + scale variables inside */
@keyframes swimLR {
  0%   { transform: translateX(-30vw) translateY(0)                                 scale(var(--s,1)) scaleX(var(--flip,1)); }
  25%  { transform: translateX(15vw)  translateY(calc(-1 * var(--vy, 2px)))         scale(var(--s,1)) scaleX(var(--flip,1)); }
  50%  { transform: translateX(60vw)  translateY(0)                                 scale(var(--s,1)) scaleX(var(--flip,1)); }
  75%  { transform: translateX(100vw) translateY(var(--vy, 2px))                    scale(var(--s,1)) scaleX(var(--flip,1)); }
  100% { transform: translateX(130vw) translateY(0)                                 scale(var(--s,1)) scaleX(var(--flip,1)); }
}
@keyframes swimRL {
  0%   { transform: translateX(130vw) translateY(0)                                scale(var(--s,1)) scaleX(var(--flip,1)); }
  25%  { transform: translateX(100vw) translateY(var(--vy, 2px))                   scale(var(--s,1)) scaleX(var(--flip,1)); }
  50%  { transform: translateX(60vw)  translateY(0)                                scale(var(--s,1)) scaleX(var(--flip,1)); }
  75%  { transform: translateX(15vw)  translateY(calc(-1 * var(--vy, 2px)))        scale(var(--s,1)) scaleX(var(--flip,1)); }
  100% { transform: translateX(-30vw) translateY(0)                                scale(var(--s,1)) scaleX(var(--flip,1)); }
}

/* visibility tuning: darker or lighter depending on section */
#features-1 .fish, #features-2 .fish { --fish-color: rgba(255,255,255,0.55); }
#features .fish, #intro-video .fish   { --fish-color: rgba(0,0,0,0.55); }

/* Reduced motion: slow down, but do not stop */
@media (prefers-reduced-motion: reduce) {
  .fish { animation-duration: 100s !important; }
}

/* 海エリア装飾 */
.sea-decoration {
  position: relative;
  overflow: hidden;
}

/* 旧：絵文字魚の定義は削除（シルエット魚に統一） */

/* バブルアニメーション */
.bubble {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: bubbleFloat 20s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.bubble:nth-child(2) {
  width: 12px;
  height: 12px;
  animation-delay: -5s;
  animation-duration: 25s;
}

.bubble:nth-child(3) {
  width: 6px;
  height: 6px;
  animation-delay: -12s;
  animation-duration: 22s;
}

.bubble:nth-child(4) {
  width: 10px;
  height: 10px;
  animation-delay: -8s;
  animation-duration: 28s;
}

@keyframes bubbleFloat {
  0% {
    transform: translateY(100vh) translateX(0px) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(50vh) translateX(-5px) scale(1);
  }
  90% {
    opacity: 0.8;
    transform: translateY(10vh) translateX(5px) scale(1);
  }
  100% {
    transform: translateY(-20px) translateX(0px) scale(0.5);
    opacity: 0;
  }
}

/* 波の効果 */
.wave-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 100%
  );
  animation: waveFlow 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes waveFlow {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-10px);
    opacity: 0.8;
  }
}



/* 詳細ボックス用スライドアニメーション */
.detail-box-slide-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.detail-box-slide-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.detail-box-slide-bottom {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.detail-box-slide-left.animate-in,
.detail-box-slide-right.animate-in,
.detail-box-slide-bottom.animate-in {
  opacity: 1;
  transform: translate(0, 0);
}

/* ===== 詳細ボックス読みやすさ改善（ハイライト・CTA・余白） ===== */
.detail-content { max-width: 720px; margin: 0 auto; text-align: left; }
.detail-body { font-size: clamp(15px, 1.8vw, 18px); line-height: 2.1; color: #fffde7; margin: 12px 0 18px; }
.detail-body .em { background: linear-gradient(90deg, rgba(255,234,0,.18), rgba(255,214,0,0)); padding: 0 4px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.05) inset; }
.detail-body .em { transition: background-color .2s ease; }

/* エリアごとの補色ハイライト（薄め） */
#features-1 .detail-body .em {
  background: linear-gradient(90deg, rgba(255,170,0,.22), rgba(255,170,0,0)); /* blue -> orange complement */
}
#features-2 .detail-body .em {
  background: linear-gradient(90deg, rgba(255,140,60,.22), rgba(255,140,60,0)); /* deep blue -> warm orange complement */
}
#features-3 .detail-body .em {
  background: linear-gradient(90deg, rgba(255,80,160,.22), rgba(255,80,160,0)); /* green -> magenta complement */
}
.cta-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #FFD600; text-decoration: none; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,214,0,.35); background: rgba(255,214,0,.06); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.cta-link:hover { transform: translateY(-2px); background: rgba(255,214,0,.12); border-color: rgba(255,214,0,.55); }
.detail-box-slide-left, .detail-box-slide-right, .detail-box-slide-bottom { padding: 36px; }

/* 要望: 詳細ボックスの見出し文言のみ非表示（ボックス自体は表示） */
.detail-box-slide-left h3,
.detail-box-slide-right h3,
.detail-box-slide-bottom h3 {
  display: none !important;
}

@keyframes slideInFromLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromBottom {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 海の装飾要素の位置指定 */
.fish-1 { top: 20%; left: 10%; }
.fish-2 { top: 60%; left: 70%; }
.fish-3 { top: 30%; left: 15%; }
.fish-4 { top: 70%; left: 75%; }
.fish-5 { top: 25%; left: 5%; }
.fish-6 { top: 65%; left: 85%; }
.fish-7 { top: 35%; left: 20%; }
.fish-8 { top: 75%; left: 60%; }
.fish-9 { top: 40%; left: 25%; }
.fish-10 { top: 80%; left: 65%; }
.fish-11 { top: 45%; left: 30%; }
.fish-12 { top: 85%; left: 70%; }

.bubble-1 { left: 20%; }
.bubble-2 { left: 50%; }
.bubble-3 { left: 80%; }
.bubble-4 { left: 25%; }
.bubble-5 { left: 65%; }
.bubble-6 { left: 30%; }
.bubble-7 { left: 70%; }
.bubble-8 { left: 35%; }
.bubble-9 { left: 75%; }
.bubble-10 { left: 40%; }
.bubble-11 { left: 80%; }
.bubble-12 { left: 45%; }
.bubble-13 { left: 85%; }

/* ===== Area2 Tracks Card (mimic rendering) ===== */
.tracks-card-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦方向中央配置 */
  align-items: center; /* 横方向中央配置 */
  text-align: center;
  padding: 10px 0 36px; /* ボタンがカード外に出る分の余白 */
  position: relative;
  min-height: 560px; /* 安定高さ */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
}

.track-card {
  width: min(92vw, 680px);
  background: rgba(255,255,255,0.92);
  color: #0f172a; /* near slate-900 */
  border: 2px solid #64B5F6; /* blue accent */
  border-radius: 14px;
  /* 陰影強化 */
  box-shadow:
    0 14px 28px rgba(2, 119, 189, 0.24),
    0 6px 12px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255,255,255,0.6) inset;
  padding: 18px 18px 12px;
  backdrop-filter: blur(6px);
  position: relative; /* 子要素の投稿ボタンの基準 */
  margin-left: auto;
  margin-right: auto;
  /* 中央配置を確実にする */
  display: block;
  flex-shrink: 0; /* flexbox内で縮小しない */
  align-self: center; /* flexbox内で中央配置 */
}

.track-card .card-header {
  font-weight: 800;
  font-size: clamp(18px, 2.4vw, 20px);
  text-align: center;
  letter-spacing: .02em;
}

.track-card .card-divider {
  height: 3px;
  background: #64B5F6;
  border-radius: 2px;
  margin: 12px 0 10px;
}

.track-card .card-body { text-align: center; }
.track-card .card-title {
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 900;
  letter-spacing: .01em;
}
.track-card .card-subtitle {
  margin-top: 6px;
  color: #78909C; /* blue-grey */
  font-size: clamp(14px, 2vw, 16px);
}

.track-card .card-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 4px;
  justify-content: center; /* 中央寄せ */
}
/* 以前の左右寄せルールを無効化（中央寄せに統一） */
.track-card .card-actions .icon-btn:nth-of-type(2),
.track-card .card-actions .icon-btn:nth-of-type(4) { margin-left: 0; }

.track-card .icon-btn {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, transform .1s ease;
}
.track-card .icon-btn:hover { background: rgba(2, 119, 189, 0.10); }
.track-card .icon-btn:active { transform: translateY(1px); }

.track-card .count {
  color: #455A64;
  font-weight: 600;
  min-width: 1.2em;
}

/* better contrast over animated gradient background */
.tracks .track-card svg { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }

/* ===== Transition between Experience Card and Vote Box ===== */
.track-card.slide-out {
  animation: cardSlideOut 550ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: transform, opacity, filter;
}
@keyframes cardSlideOut {
  to { transform: translateX(-120%); opacity: 0; filter: blur(2px); }
}

.vote-box {
  width: min(92vw, 630px);
  min-height: 630px;
  display: inline-block;
  margin: 0 auto; /* 中央配置 */
  background: rgba(255,255,255,0.96);
  border: 2px solid #64B5F6;
  border-radius: 18px; /* 角丸を少し強める */
  box-shadow:
    0 14px 28px rgba(2, 119, 189, 0.24),
    0 6px 12px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255,255,255,0.6) inset;
  padding: 28px 20px;
  color: #0f172a;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  display: none; /* 初期はDOMにあるがレイアウトから除外 */
  z-index: 5; /* カードやプレースホルダーより前面に */
  vertical-align: middle;
  align-self: center; /* flexbox内で中央配置 */
  box-sizing: border-box;
  position: relative; /* 注記を下部に固定するための基準 */
}

/* ==== 体験カードヘッダーの「M」トグルボタン ==== */
.track-card .card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.track-card .mime-m-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #90A4AE;
  background: #ffffff;
  color: #607D8B;
  font-weight: 900;
  font-family: inherit;
  line-height: 1;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.track-card .mime-m-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.track-card .mime-m-btn.active {
  background: #2196F3;
  color: #fff;
  border-color: #2196F3;
}

.vote-box.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  display: inline-block; /* 中央寄せのためinline-blockを維持 */
  /* flexbox内での中央配置を確実にする */
  flex-shrink: 0;
  align-self: center;
  vertical-align: middle;
}
.vote-box::before { /* 投入口スロット */
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #263238, #000);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.complete-banner {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: linear-gradient(135deg, #00C853, #00E676);
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,200,83,0.35);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.complete-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 投票箱に吸い込まれるカードの演出 */
.flying-card {
  position: fixed;
  left: 0; top: 0;
  margin: 0;
  z-index: 9999;
  pointer-events: none;
  box-shadow:
    0 14px 28px rgba(2, 119, 189, 0.28),
    0 6px 12px rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(255,255,255,0.6) inset;
  /* rAFでtransformを更新するためCSSトランジションは無効化 */
  transition: none !important;
  transform-origin: center center;
  will-change: transform, opacity;
}
.vote-box h3 { margin: 0 0 8px; font-size: clamp(18px,2.4vw,22px); font-weight: 800; }
.vote-box p { margin: 0 0 14px; color: #37474F; }

/* 集計中メッセージ */
.vote-box .aggregating-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vote-box .aggregating-message.show {
  opacity: 1;
  pointer-events: auto;
}
.vote-box .aggregating-message-text {
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 700;
  color: #0288D1;
  margin-bottom: 16px;
  text-align: center;
  letter-spacing: 0.05em;
}
.vote-box .aggregating-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.vote-box .aggregating-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0288D1;
  animation: aggregatingPulse 1.4s ease-in-out infinite;
}
.vote-box .aggregating-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.vote-box .aggregating-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes aggregatingPulse {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
}
.vote-actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.vote-btn {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(2,119,189,0.35);
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
  color: #0f172a;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.vote-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(2,119,189,0.25); }
.vote-btn:active { transform: translateY(0); }

/* ==== ミニ投票ボックス（ターゲット） ==== */
/* ミニ投票ボックス（ターゲット）: Apple Music風 */
.mini-vote-target {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff3d7a 0%, #ff5fb1 35%, #7b6cff 100%);
  box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    inset 0 10px 24px rgba(255,255,255,.22),
    inset 0 -8px 18px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.35);
  /* 出現アニメーションの初期状態 */
  opacity: 0;
  transform: scale(.82);
  transition: opacity .24s ease, transform .28s cubic-bezier(.2,1,.3,1), filter .28s ease;
}
.mini-vote-target.show { opacity: 1; transform: scale(1); }
.mini-vote-target.glow { filter: drop-shadow(0 0 18px rgba(255, 99, 158, .55)); }
.mini-vote-target::before {
  /* 上端に薄いハイライト（ガラス感） */
  content: '';
  position: absolute;
  left: 8px; right: 8px; top: 6px;
  height: 24%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
}
.mini-vote-target::after {
  /* 受け口の陰影 */
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  height: 18%;
  border-radius: 12px;
  background: radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.25), transparent 80%);
}

/* ミニボックス中央の音符アイコン */
.mini-vote-target .mini-note {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56%; height: 56%;
  display: grid; place-items: center;
  color: white; text-shadow: 0 2px 8px rgba(0,0,0,.25);
  font-size: 20px; /* フォールバック */
}
.mini-vote-target .mini-note::after {
  content: '♪';
  font-family: 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif;
  font-size: clamp(16px, 6.5vw, 22px);
}

/* 着地時のパルス演出 */
@keyframes miniPulse {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}
.mini-vote-target.pulse { animation: miniPulse 380ms ease-out 1; }

/* ==== 実投票ボックスの music box 風デザイン ==== */
/* 実投票ボックス: Apple Musicアイコン風 */
.vote-box.apple-music {
  /* 控えめな配色（彩度を落としたピンク〜ラベンダー） */
  background: linear-gradient(135deg, #f3a5bf 0%, #e9a9cc 35%, #aeb6ff 100%);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    0 16px 30px rgba(0,0,0,.18),
    inset 0 10px 22px rgba(255,255,255,.16);
  position: relative;
  /* 下端までミニカードを敷き詰めるために下パディングをゼロ化 */
  padding-bottom: 0 !important;
}
.vote-box.apple-music::before {
  /* 左上の透明なボックス（グロス）を無効化 */
  content: none !important;
  display: none !important;
}
.vote-box.apple-music::after {
  /* 下部の影を消す */
  content: none !important;
  display: none !important;
}

/* ===== 音符デコレーション（実投票ボックス内） ===== */
.vote-box.apple-music .music-notes {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.vote-box.apple-music .music-notes .note {
  position: absolute;
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  font-family: 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif;
  animation: noteFloat 2.4s ease-out forwards;
  will-change: transform, opacity;
  opacity: 0;
}
@keyframes noteFloat {
  0% { transform: translateY(10px) scale(.9) rotate(-6deg); opacity: 0; }
  12% { opacity: 1; }
  60% { transform: translateY(-34px) scale(1) rotate(6deg); }
  100% { transform: translateY(-58px) scale(1.05) rotate(10deg); opacity: 0; }
}

/* ===== ミニ投票ボックスの追加デコ ===== */
.mini-vote-target .mini-note-bubble {
  position: absolute;
  bottom: 10px; right: 12px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
  font-family: 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif;
  opacity: 0;
  animation: miniBubble 900ms ease-out forwards;
}
@keyframes miniBubble {
  0% { transform: translate(0, 0) scale(.8); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-8px, -26px) scale(1); opacity: 0; }
}
/* 体験カード専用の投稿ボタン（カード右下の直下に表示） */
.track-card .submit-btn {
  position: absolute;
  right: 12px;
  bottom: -18px; /* カードの外へ少し出す */
  padding: 8px 14px;
  background: linear-gradient(135deg, #42A5F5, #1E88E5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(2,119,189,0.35), 0 2px 6px rgba(0,0,0,0.15);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  backdrop-filter: blur(6px);
  z-index: 5;
}
.track-card.tall {
  padding-top: 41px;    /* 27px * 1.5 ≒ 40.5 */
  padding-bottom: 27px; /* 18px * 1.5 = 27 */
}
.track-card.tall .card-divider { margin: 22px 0 16px; }
.track-card.tall .card-actions { margin-top: 30px; }

/* 入力欄（タイトル・サブタイトル） */
  .track-card .card-input {
    width: 100%;
    text-align: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid #90CAF9;
    outline: none;
    color: #0f172a;
    padding: 8px 10px;
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    box-shadow: 0 1px 0 rgba(2,119,189,0.06) inset;
    margin-inline: auto;
  }
  .track-card .card-title-input {
    font-size: clamp(24px, 3.6vw, 30px);
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1.2;
    max-width: 92%;
  }
  .track-card .card-subtitle-input {
    margin-top: 6px;
    color: #0f172a; /* 入力後は濃い文字色 */
    font-size: clamp(14px, 2.2vw, 18px);
    font-weight: 600;
    max-width: 92%;
  }
.track-card .card-input::placeholder { color: rgba(2, 24, 43, 0.35); }
.track-card .card-input:focus {
  border-color: #42A5F5;
  box-shadow: 0 0 0 3px rgba(66,165,245,0.18);
  background: #ffffff;
}

/* Override vote-box grid to center the vote box */
@media (min-width: 420px) {
  .vote-box {
    display: grid;
    place-items: center; /* 元の配置に戻す */
  }
}
/* ==== Override: 完了バナーを投票ボックス内の全面に貼り付け（四隅に「投・稿・完・了」） ==== */
.vote-box > .complete-banner.grid-4 {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  right: 0;
  bottom: 0;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  margin: 0;
  padding: 12%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: none;
  transition: opacity .45s ease;
  background: transparent;
  box-shadow: none;
}
.vote-box > .complete-banner.grid-4.show {
  opacity: 1;
}

.vote-box > .complete-banner.grid-4 .complete-char {
  font-family: "Fredoka", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 9vw, 88px);
  line-height: 1;
  letter-spacing: .01em;
  color: #ff3d7a; /* シンプルでポップなカラー */
  text-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.vote-box > .complete-banner.grid-4 .complete-char.tl { justify-self: center; align-self: center; transform: none; }
.vote-box > .complete-banner.grid-4 .complete-char.tr { justify-self: center; align-self: center; transform: none; }
.vote-box > .complete-banner.grid-4 .complete-char.bl { justify-self: center; align-self: center; transform: none; }
.vote-box > .complete-banner.grid-4 .complete-char.br { justify-self: center; align-self: center; transform: none; }

@keyframes popInCompleteChars {
  0%   { opacity: 0; transform: scale(.6); filter: blur(2px); }
  60%  { opacity: 1; transform: scale(1.08); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
.vote-box > .complete-banner.grid-4.show .complete-char { animation: popInCompleteChars .5s cubic-bezier(.2,1.1,.3,1) both; }
.vote-box > .complete-banner.grid-4.show .complete-char.tr { animation-delay: .05s; }
.vote-box > .complete-banner.grid-4.show .complete-char.bl { animation-delay: .10s; }
.vote-box > .complete-banner.grid-4.show .complete-char.br { animation-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  .vote-box > .complete-banner.grid-4,
  .vote-box > .complete-banner.grid-4.show { transition: opacity .2s ease; }
  .vote-box > .complete-banner.grid-4 .complete-char { animation: none !important; }
}

/* ==== 完了表示の完全非表示オーバーライド ==== */
.vote-box > .complete-banner.grid-4,
.vote-box > .complete-banner.grid-4.show {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ==== 投票完了後に表示する縦並びのミニ体験カード ==== */
.vote-box .stacked-cards {
  height: 100%;
  padding: 24px 16px; /* 上下余白を増やし、底辺に接しないように */
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 12px; /* ボックス拡大に合わせてギャップも拡大 */
  align-content: stretch;
  justify-content: stretch;
  box-sizing: border-box;
}

/* 注記が下部固定になるため、下部パディングを追加して重なりを回避 */
.vote-box .stacked-cards { padding-bottom: 56px; }

/* 注記をボックス下部に固定配置し、重なりや揺れを防止 */
.vote-box .vote-note {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  margin: 0;
  width: calc(100% - 24px);
  text-align: center;
  z-index: 1;
}

/* バッジを注記より前面に（必要に応じて） */
.vote-box .top5-badge { z-index: 2; }

.vote-box .mini-track-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  /* 内部を2カラムのグリッドに再配置して右側スペースを活用 */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "ttl stats"
    "sub stats";
  column-gap: 8px;
  align-items: center;
  min-height: 0;
}
.vote-box .mini-track-card .mini-title {
  grid-area: ttl;
  font-weight: 800;
  font-size: clamp(14px, 2.6vw, 16px);
  color: #0f172a;
  line-height: 1.25;
}
.vote-box .mini-track-card .mini-subtitle {
  grid-area: sub;
  margin-top: 4px;
  font-size: clamp(12px, 2.2vw, 13px);
  color: #475569;
}

/* ==== ミニ体験カード: いいね/コメントのカウント表示 ==== */
.vote-box .mini-track-card .mini-stats {
  grid-area: stats;
  margin-top: 6px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: flex-end; /* 右側に寄せてスペースを埋める */
}
.vote-box .mini-track-card .mini-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: visible;
}
.vote-box .mini-track-card .mini-stat .icon {
  font-size: 13px;
  line-height: 1;
  opacity: .85;
}
.vote-box .mini-track-card .mini-stat .count {
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
}
.vote-box .mini-track-card .mini-stat .count.bump { animation: countBump .24s ease-out; }
@keyframes countBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.vote-box .mini-track-card .mini-stat.pop::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 999px;
  background: rgba(66,165,245,0.55);
  animation: statRing .38s ease-out forwards;
}
@keyframes statRing {
  0%   { opacity: .9; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  70%  { opacity: .45; transform: translate(-50%, -50%) scale(3.2); filter: blur(1px); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4); filter: blur(2px); }
}

/* ==== もう一度ボタン（投票ボックスの右下：ボックスに被らない位置） ==== */
.retry-btn {
  position: absolute;
  right: -10px;                 /* ボックスの外側に少し出す */
  bottom: -14px;
  transform: translate(100%, 0); /* 右外側に配置して被りを避ける */
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #0f172a;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  z-index: 20;
}
.retry-btn:hover { background: rgba(255,255,255,0.96); }
.retry-btn:active { transform: translate(100%, 0) scale(0.98); }
.retry-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(66,165,245,0.25); }

@media (max-width: 420px) {
  /* モバイルでは押しやすいように少し内側に寄せる */
  .retry-btn {
    right: -6px;
    bottom: -10px;
    padding: 12px 16px;
  }
}

/* 体験カードのプレースホルダー（アニメーション中にレイアウトを維持） */
.exp-card-placeholder {
  width: min(92vw, 680px);
  margin-left: auto;
  margin-right: auto;
  visibility: hidden;
  pointer-events: none;
  /* カードと同じ高さ・マージンを維持 */
  /* 中央配置を確実にする */
  display: block;
  flex-shrink: 0; /* flexbox内で縮小しない */
  align-self: center; /* flexbox内で中央配置 */
}

.mini-track-card.mini-card-insert-animate {
  animation: cardDropIn 0.5s cubic-bezier(.23,1.25,.32,1) both;
}
@keyframes cardDropIn {
  0%   { opacity: 0; transform: scale(0.82) translateY(-40px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(2px);}
  100% { opacity: 1; transform: scale(1.0) translateY(0);}
}

/* ==== 投票ボックスの内側余白を均等化（上下） ==== */
.vote-box.apple-music {
  padding: 20px 20px !important; /* 上下左右に余白を確保 */
}

/* ミニ体験カードのスタックがボックスの余白内に収まるように調整 */
.vote-box.apple-music .stacked-cards {
  height: calc(100% - 0px); /* vote-boxのpadding内に収める */
  align-content: stretch;
  justify-content: stretch;
}

/* エリア2中央に投票ボックスを絶対配置で固定 */
.tracks-card-wrap { position: relative; }
.vote-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.vote-box.show {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 強制中央固定とサイズ拡大（最優先） */
.tracks-card-wrap { position: relative !important; }
.vote-box,
.vote-box.show {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 630px) !important;
  min-height: 630px !important;
  box-sizing: border-box !important;
}

/* ミニ体験カード: 拡大比率に合わせてスケールアップ */
.vote-box .mini-track-card {
  padding: 15px 18px; /* 10x→15, 12x→18 */
  border-radius: 18px; /* 12→18 */
}
.vote-box .mini-track-card .mini-title {
  font-size: clamp(21px, 3.9vw, 24px); /* 14→21, 16→24 */
}
.vote-box .mini-track-card .mini-subtitle {
  font-size: clamp(18px, 3.3vw, 19.5px); /* 12→18, 13→19.5 */
}
.vote-box .mini-track-card .mini-stats {
  gap: 21px; /* 14→21 */
}
.vote-box .mini-track-card .mini-stat {
  gap: 9px; /* 6→9 */
  padding: 6px 12px; /* 4x8 → 6x12 */
}
.vote-box .mini-track-card .mini-stat .icon {
  font-size: 19.5px; /* 13→19.5 */
}
.vote-box .mini-track-card .mini-stat .count {
  font-size: 19.5px; /* 13→19.5 */
}

/* ===== Info Bubbles for Coming Soon Area ===== */

.info-bubble-container {

  display: flex;

  justify-content: center;

  gap: 40px;

  margin-top: 60px;

  flex-wrap: wrap;

  position: relative;

  z-index: 5;

}



.info-bubble {

  width: 300px;

  height: 300px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(8px);

  border: 2px solid rgba(255, 255, 255, 0.2);

  box-shadow: 

    0 15px 35px rgba(0, 0, 0, 0.2),

    inset 0 10px 20px rgba(255, 255, 255, 0.1),

    inset 0 -10px 20px rgba(0, 0, 0, 0.1);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 40px;

  color: #fff;

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  position: relative;

  overflow: hidden;

}



.info-bubble::before {

  content: '';

  position: absolute;

  top: 15%;

  left: 20%;

  width: 25%;

  height: 15%;

  border-radius: 50%;

  background: radial-gradient(ellipse at center, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);

  transform: rotate(-45deg);

  pointer-events: none;

}



.info-bubble:hover {

  transform: translateY(-15px) scale(1.05);

  background: rgba(255, 255, 255, 0.15);

  border-color: rgba(255, 255, 255, 0.4);

  box-shadow: 

    0 25px 50px rgba(0, 0, 0, 0.3),

    inset 0 10px 30px rgba(255, 255, 255, 0.2),

    inset 0 -10px 30px rgba(0, 0, 0, 0.1);

}



.info-bubble h3 {

  font-size: 1.6em;

  margin: 0 0 15px 0;

  color: #81D4FA;

  text-shadow: 0 2px 5px rgba(0,0,0,0.4);

  font-weight: 700;

  letter-spacing: 0.05em;

}



.info-bubble p {

  font-size: 1.1em;

  line-height: 1.6;

  margin: 0;

  color: #E0F7FA;

  text-shadow: 0 1px 2px rgba(0,0,0,0.3);

}



@media (max-width: 768px) {

  .info-bubble {

    width: 260px;

    height: 260px;

    padding: 30px;

  }

  .info-bubble h3 {

    font-size: 1.4em;

  }

  .info-bubble p {

    font-size: 1em;

  }

}