@charset "UTF-8";

/**
* 基本フォント設定
-------------------------- */
body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #f9fafb; /* bg-gray-50 */
  color: #374151; /* bg-gray-700 */
}

/* ヒーロースセクションのスライド */
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out, transform 8s ease-in-out;
  transform: scale(1.05);
}

.slide.active {
  opacity: 1;
  transform: scale(1);
}

/* ヒーローセクションのテキストアニメーション */
.hero-text-line {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hero-text-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* スクロールに応じたフェードインアニメーション */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* セクションタイトルのスタイル */
.section-title {
  position: relative;
  text-align: center;
  margin-bottom: 4rem;
}

.section-title .en {
  color: #d1fae5; /* emerald-100 */
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.section-title .ja {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 700;
  color: #059669; /* emerald-600 */
  white-space: nowrap;
}

/* メガメニュー (ドロップダウン) のスタイル */
.mega-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  pointer-events: none;
}

/* JSで制御するためのactiveクラス */
.mega-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ハンバーガーメニューのトグルアニメーション */
#hamburger-icon .line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px; /* w-5 */
  height: 2px; /* h-0.5 */
  background-color: #374151; /* bg-gray-700 */
  border-radius: 9999px; /* rounded-full */
  transition: all 0.3s ease-in-out;
}
#hamburger-icon .line1 { top: 6px; }
#hamburger-icon .line2 { top: 13px; }
#hamburger-icon .line3 { top: 20px; }

/* メニューが開いたとき（is-openクラスが付いたとき）のアニメーション */
#mobile-menu-button.is-open .line1 {
  top: 13px;
  transform: translateX(-50%) rotate(45deg);
}
#mobile-menu-button.is-open .line2 {
  opacity: 0;
}
#mobile-menu-button.is-open .line3 {
  top: 13px;
  transform: translateX(-50%) rotate(-45deg);
}

/* モバイルメニュー用のCSS */
#mobile-menu {
  background-color: #f9fafb;
}
#mobile-menu .menu-item a {
  display: block;
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 500;
  color: #374151; /* gray-700 */
  border-bottom: 1px solid #e5e7eb;
  transition: color 0.2s, background-color 0.2s;
}
/* 最初のメニュー項目には上にも線を入れる */
#mobile-menu .menu-item:first-child a {
  border-top: 1px solid #e5e7eb; /* gray-200 */
}
/* ホバー（マウスが乗った時）のスタイル */
#mobile-menu .menu-item a:hover {
  color: #059669; /* emerald-600 */
  background-color: #ffffff;
}


/* 波アニメーションの共通キーフレーム */
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* ヒーローセクションの波アニメーション */
.waves-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}

.waves {
  position: relative;
  width: 100%;
  height: 15vh;
  min-height: 100px;
  max-height: 150px;
}

.parallax>use {
  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

/* スクロールダウンアニメーション */
@keyframes scroll-wheel-animation {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(10px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-scroll-wheel {
  animation: scroll-wheel-animation 2.2s ease-in-out infinite;
}