/* ==========================================================================
   1. 変数・リセット・全体設定
   ========================================================================== */
:root {
  --primary: #29b5e8;
  --secondary: #1a365d;
  --acc-blue: #e3f2fd;
  --text: #2d3748;
  --text-light: #718096;
  --bg: #ffffff;
  --card-bg: #ffffff;
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --font-family: 'Inter', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  font-family: var(--font-family); 
  color: var(--text); 
  background-color: var(--bg); 
  line-height: 1.6; 
  overflow-x: hidden; 
}

.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px; 
  position: relative; 
  z-index: 10; 
}

/* 波を配置するための土台 */
main {
  position: relative;
  display: block;
  width: 100%;
}

/* ==========================================================================
   2. 共通コンポーネント
   ========================================================================== */
.btn {
  display: inline-block; padding: 12px 30px;
  background: linear-gradient(135deg, var(--primary) 0%, #1fa2d4 100%);
  color: #fff !important; text-decoration: none; border-radius: 30px;
  font-weight: 600; transition: var(--transition); border: none; cursor: pointer;
  box-shadow: 0 4px 15px rgba(41, 181, 232, 0.3);
  position: relative; z-index: 20;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(41, 181, 232, 0.4); }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

section { padding: 80px 0; position: relative; z-index: 5; }
section h2 { font-size: 2.5rem; color: var(--secondary); text-align: center; margin-bottom: 60px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.card { background: var(--card-bg); padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: var(--transition); border: 1px solid #e2e8f0; }

/* ==========================================================================
   3. 動く波（1ページに1つ・全幅）
   ========================================================================== */
main::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw; 
  height: 200px;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200'%3E%3Cpath d='M0,100 C400,180 1200,20 1600,100' fill='none' stroke='rgba(41,181,232,0.12)' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M0,120 C400,200 1200,40 1600,120' fill='none' stroke='rgba(41,181,232,0.06)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 1600px 200px; 
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 1;
  animation: waveMoveLoop 45s linear infinite;
}

@keyframes waveMoveLoop {
    from { background-position: 0 0; }
    to { background-position: -1600px 0; }
}

/* ==========================================================================
   4. ヘッダー・PCナビゲーション
   ========================================================================== */
header { 
  background-color: rgba(255, 255, 255, 0.85); padding: 25px 0; position: fixed; 
  width: 100%; top: 0; z-index: 1000; 
  backdrop-filter: blur(16px) saturate(180%) brightness(120%); 
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

header::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: 
    radial-gradient(rgba(41, 181, 232, 0.4) 3px, transparent 3px),
    radial-gradient(rgba(41, 181, 232, 0.3) 2px, transparent 2px);
  background-size: 150px 150px, 230px 230px;
  opacity: 0.8; pointer-events: none; z-index: -1;
  animation: snowLayer1 20s linear infinite, snowLayer2 15s linear infinite;
}
@keyframes snowLayer1 { from { background-position: 0 0; } to { background-position: 150px 300px; } }
@keyframes snowLayer2 { from { background-position: 40px 60px; } to { background-position: 270px 520px; } }

header.scrolled { padding: 10px 0; background-color: rgba(255, 255, 255, 0.98); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }

.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.6rem; font-weight: 800; color: var(--secondary); text-decoration: none; }
.logo span { color: var(--primary); }

.nav-links { display: flex; gap: 30px; list-style: none; align-items: center; position: relative; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--secondary); font-weight: 600; padding: 5px 0; display: block; }

#nav-slider {
  position: absolute; height: 2px; background-color: var(--primary); bottom: -2px; left: 0; width: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 0 12px rgba(41, 181, 232, 0.9); border-radius: 2px; pointer-events: none; opacity: 0;
}

/* ==========================================================================
   5. 🌟 モバイルメニュー・ハンバーガー（文字消失修正版）
   ========================================================================== */
.burger { 
  display: none; 
  cursor: pointer; 
  z-index: 1200; 
  position: relative; 
}
.burger div { 
  width: 25px; height: 3px; background-color: var(--secondary); 
  margin: 5px; transition: all 0.3s ease; 
}

#scroll-indicator {
  position: fixed; bottom: 0; left: 0; height: 4px; z-index: 2000;
  background: linear-gradient(90deg, var(--primary), #ffffff);
  width: 0%; transition: width 0.1s ease-out;
}

footer { background-color: var(--secondary); color: #fff; padding: 50px 0; text-align: center; position: relative; z-index: 100; }

@media screen and (max-width: 768px) {
  .burger { display: block !important; }

  .nav-links { 
    position: fixed; right: 0; top: 0; height: 100vh; width: 75%; 
    background-color: rgba(26, 54, 93, 0.98); /* 濃いネイビー */
    backdrop-filter: blur(15px); 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); 
    z-index: 1100;
  }
  
  /* 🌟 メニュー展開時の設定：文字を確実に白く表示 */
  .nav-active { transform: translateX(0%); }
  
  .nav-links li { 
    opacity: 1 !important; /* 強制的に表示 */
    margin: 20px 0; 
    width: 100%;
    text-align: center;
  }
  
  .nav-links a { 
    color: #ffffff !important; /* 🌟 濃い背景でも見えるように白を強制 */
    font-size: 1.4rem; 
    display: block;
    width: 100%;
  }

  #nav-slider { display: none !important; }
}

/* ハンバーガーアニメーション */
.toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); background-color: #fff; }
.toggle .line2 { opacity: 0; }
.toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); background-color: #fff; }