/* 各セクション共通・ヒーロー・ロゴ */

/* 各セクションを画面いっぱいに表示 */
section {
  min-height: 100vh;
  /* 画面の高さ分 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 縦方向中央寄せ */
  align-items: center;
  /* 横方向中央寄せ */
  padding: 40px 20px;
  /* 余白調整 */
  box-sizing: border-box;
}

.section.alt {
  background: #121212;
}

.hero {
  padding: 120px 12px 96px;
  background: linear-gradient(
    180deg,
    rgba(192, 134, 79, 0.25),
    rgba(0, 0, 0, 0)
  );
  min-height: 100vh;
  /* 全画面高さを確保 */
  display: flex;
  align-items: center;
  /* 縦中央寄せ */
  justify-content: center;
  /* 横中央寄せ（必要なら） */
  padding-top: var(--nav-h);
  /* ← ナビゲーション分だけ押し下げる */
  box-sizing: border-box;
}

h1,
h2 {
  text-align: center;
  margin: 0 0 12px;
}

.home-logo {
  text-align: center;
  margin-bottom: 20px;
}

.home-logo img {
  width: clamp(180px, 35vw, 380px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  opacity: 0.95;
}

@media (max-width: 768px) {
  .home-logo img {
    width: clamp(160px, 90vw, 300px);
    /* スマホでは幅を広めに */
  }
}

/* 1画面＝1セクションで中央配置 */
.section {
  .section {
    padding: 80px 20px;
    /* 上下に余裕 */
    min-height: 100vh;
    /* 1画面分を確保すると見栄えが良い */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* コンテンツ幅だけ整える（任意） */
.section .container {
  width: min(var(--container), 92vw);
  margin: 0 auto;
  text-align: center;
  /* 見出し/本文も中央に */
}

/* COUSE セクションの写真 */
.course-photo {
  margin: 16px auto 12px;
  max-width: 800px; /* 画像の最大幅を制限（お好みで調整） */
  text-align: center; /* 中央寄せ */
}

.course-photo img {
  width: 100%; /* ラッパにフィット */
  height: auto; /* 縦横比を維持 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 大きめ画面で少し制限したい場合は max-height を付けてオーバーをスクロールではなく縮小 */
@media (min-width: 1024px) {
  .course-photo img {
    max-height: 520px; /* 任意。不要なら削除OK */
    object-fit: contain; /* はみ出さず縦横比維持で収める */
  }
}