@media (max-width: 800px) {
  /* header, hero, aboutを1画面に詰め込まず、自然な高さに */
  .header-hero-about {
    display: flex;
    flex-direction: column;
    height: auto;        /* ← これが一番大事 */
    overflow: visible !important;
  }




  
  .hero {
    min-height: 70vh;    /* ← 固定せず、ある程度高さを確保 */
    height: auto;
    padding: 80px 20px;
  }

  .about {
    padding: 50px 20px;
  }

  .about-titles {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .hero-content h1 {
    font-size: 8vw;
  }

  .hero-content p {
    font-size: 5vw;
  }
  
  topic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;        /* ← 横スクロールON */
    white-space: nowrap;     /* 折り返し防止 */
    scrollbar-width: none;   /* Firefox用: スクロールバー非表示 */
 padding: 0px 0px 0px 12px;
  }


  .news-ticker span {
    font-size: 14px;
    display: inline-block;
  }

    .news-ticker {
  white-space: nowrap;
  overflow-x: hidden; /* ← これ！ */
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}




.news-links {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 12px 10px 200px; /* ← 右をちょい小さめに */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.school-card {
  flex: 0 0 auto;
  scroll-snap-align: start; /* ← スクロールがピタッと止まる */
    padding: 6px 8px;
    gap: 6px;
    flex-shrink: 0; /* 潰れ防止 */
  }

.news-links .school-card:last-child {
  margin-right: 0;
}




  .school-card img {
    width: 30px;
    height: 30px;
  }

  .school-info h3 {
    font-size: 12px;
  }
}