/* 基本スタイル */
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f7f3;
  color: #333;
  line-height: 1.8;
  padding-top: 60px; /* ナビゲーションバーの高さ分 */
}
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
section {
  padding: 60px 0;
  border-bottom: 1px solid #eee;
}
section:last-of-type {
  border-bottom: none;
}
h1, h2, h3 {
  font-weight: normal;
  color: #5a4c40;
}
h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 40px;
}

/* ナビゲーションバー（固定ヘッダー） */
nav#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  min-height: 60px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ハンバーガーメニューボタン (モバイルでのみ表示) */
.menu-toggle-button {
  display: none;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1001;
  order: 1;
}
.menu-toggle-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #5a4c40;
  position: relative;
  transition: background-color 0.3s ease;
}
.menu-toggle-icon::before,
.menu-toggle-icon::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background-color: #5a4c40;
  position: absolute;
  left: 0;
  transition: transform 0.3s ease, top 0.3s ease;
}
.menu-toggle-icon::before { top: -7px; }
.menu-toggle-icon::after { top: 7px; }

.menu-toggle-button.menu-open .menu-toggle-icon { background-color: transparent; }
.menu-toggle-button.menu-open .menu-toggle-icon::before { transform: rotate(45deg); top: 0; }
.menu-toggle-button.menu-open .menu-toggle-icon::after { transform: rotate(-45deg); top: 0; }

/* ナビゲーションリスト */
nav#mainNav ul#mainNavList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}
nav#mainNav ul#mainNavList li {
  margin: 0 10px;
}
nav#mainNav ul#mainNavList li a {
  color: #5a4c40;
  text-decoration: none;
  font-size: 1.1em; /* ★デスクトップ用の文字サイズ */
  padding: 15px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
}
nav#mainNav ul#mainNavList li a:hover,
nav#mainNav ul#mainNavList li a.active {
  background-color: #f0ebe5;
  color: #333;
}
.nav-home-icon, .nav-social-icon {
  width: 28px; height: 28px; opacity: 0.8; transition: opacity 0.3s ease;
}
.nav-home-icon:hover, .nav-social-icon:hover { opacity: 1; }
.nav-home-link, .nav-social-link { padding: 10px !important; }
.nav-home-link:hover, .nav-social-link:hover { background-color: #f0ebe5; }

/* モバイル・タブレット表示用のスタイル (例: 768px以下) */
@media (max-width: 768px) {
  nav#mainNav {
      justify-content: flex-end; /* ハンバーガーボタンを右に配置 */
  }
  .menu-toggle-button {
      display: block;
  }
  nav#mainNav ul#mainNavList {
      display: none;
      position: absolute;
      top: 60px; /* ナビゲーションバーの高さに合わせる */
      left: 0;
      width: 100%;
      background-color: #ffffff;
      flex-direction: column;
      align-items: center;
      padding: 10px 0;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  nav#mainNav ul#mainNavList.nav-open {
      display: flex;
  }
  nav#mainNav ul#mainNavList li {
      margin: 0; /* ★モバイルでは縦並びなので上下マージンは a タグのpaddingで調整 */
      width: 100%;
      text-align: center;
  }
  nav#mainNav ul#mainNavList li a {
      padding: 12px 0; /* ★モバイル時の上下パディングを少し調整 */
      width: 100%;
      justify-content: center;
      font-size: 1em; /* ★★★ スマホ表示時の文字サイズを小さく変更 (例: 1em) ★★★ */
      /* もし1emでも大きい場合は、0.9em や 14px など、さらに小さい値にしてみてください */
  }
}

/* ヒーローセクション */
.hero {
  width: 100%;
  height: 60vh;
  background-image: url("../baby1.JPG"); /* CSSファイルからの相対パスに変更 */
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}
.hero-title-block {
  margin-bottom: 30px;
}
.hero-title-block h1 {
  font-size: 2.2em; margin-bottom: 0.2em; text-shadow: 2px 2px 6px rgba(0,0,0,0.6); color: white;
}
.hero-title-block p {
  font-size: 3em; font-weight: bold; color: #fffde4; margin-top: 0.2em;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7), 0 0 10px rgba(255, 223, 186, 0.3);
  letter-spacing: 0.05em; line-height: 1.2;
}

/* 各セクション共通 */
.content-box { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.content-box p { margin-bottom: 15px; }
.content-box p:last-child { margin-bottom: 0; }

/* レッスン内容の個別スタイル */
.lesson-item { background-color: #fffaf5; padding: 20px; margin-bottom: 30px; border-radius: 6px; border: 1px solid #f0e0d0; }
.lesson-item h3 { font-size: 1.5em; margin-top: 0; margin-bottom: 15px; border-bottom: 2px solid #f0e0d0; padding-bottom: 10px; display: flex; align-items: center; }
.lesson-item-first h3 { color: #87CEEB; }
.lesson-item-stepup h3 { color: #FFB6C1; }
.lesson-item-dads h3 { color: #90EE90; }
.lesson-item-visit h3 { color: #FFD700; }
.lesson-badge { background-color: #ffab73; color: white; font-size: 0.7em; padding: 4px 8px; border-radius: 4px; margin-right: 10px; font-weight: bold; }
.lesson-item ul { padding-left: 20px; margin-bottom: 10px; }
.lesson-item ul li { margin-bottom: 8px; }
.lesson-item ul ul { padding-left: 20px; margin-top: 5px; }

/* お問い合わせフォーム */
#contact form { display: flex; flex-direction: column; gap: 15px; max-width: 600px; margin: 0 auto; }
#contact input, #contact textarea, #contact button { padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 1em; }
#contact textarea { min-height: 150px; resize: vertical; }
#contact button { background-color: #877461; color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; }
#contact button:hover { background-color: #6a5c4e; }

/* フッター */
footer { text-align: center; padding: 30px 0; background-color: #e9e2d9; color: #5a4c40; font-size: 0.9em; margin-top: 40px; }