@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;

  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;

  --primary: 203 75% 30%;
  --primary-foreground: 210 40% 98%;

  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;

  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;

  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 203 75% 30%;

  --radius: 0.5rem;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
}

section#hero > div {
  aspect-ratio: 16 / 9;
}

section#hero > div > div {
  height: 100%;
}

/* タブ関連のスタイル */
.tabs-list {
  display: flex;
  position: relative;
  top: -1.75rem;
}

.tab-trigger {
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-trigger.active {
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* アニメーション */
.group:hover .group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
}

.hover\:scale-110:hover {
  transform: scale(1.1);
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

/* スクロールボタンのアニメーション */
.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* スクロールボタンのコンテナスタイル */
#scroll-button-container {
  pointer-events: none; /* コンテナ自体はクリックイベントを通過させる */
}

#scroll-button {
  pointer-events: auto; /* ボタン自体はクリック可能にする */
}

.yt-box {
  max-width: 960px;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  position: relative;
}

.yt-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.coming-soon {
  background-color: rgb(255 255 255 / 0.9);
  text-align: center;
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 500;
  padding: 1rem;
  border-radius: 1rem;
  color: rgb(8 47 73 / var(--tw-text-opacity, 1));
}