/* ==========================================================
   File: /common/css/responsive.css
   Project: Karuizawa Symphonic Chorus Website
   Revision: Rev.F (2025-10-29)
   Description:
     マルチデバイス対応（タブレット／スマホ）。
     768px／1024pxブレイクポイント対応。
   ========================================================== */

/* ---- タブレット（～1024px） ---- */
@media screen and (max-width: 1024px) {
  header#top-header {
    padding: 0.5em;
  }

  #mainNav a {
    padding: 0.6em 1em;
    font-size: 0.95em;
  }

  .threeCol {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .threeCol .inner {
    width: 48%;
    margin-bottom: 1em;
  }
}

/* ---- スマホ（～768px） ---- */
@media screen and (max-width: 768px) {
  header h1 small {
    font-size: 0.6em;
  }

  header h1 em {
    display: block;
    font-size: 1.2em;
  }

  #slender h1 {
    font-size: 1.3em;
  }

  #mainNav ul {
    flex-direction: column;
  }

  #mainNav a {
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }

  .threeCol {
    flex-direction: column;
  }

  .threeCol .inner {
    width: 100%;
  }

  .starburst {
    transform: scale(0.85);
  }

  footer {
    font-size: 0.85em;
    padding: 1.5em 0.8em;
  }
}

/* ---- スマホ限定非表示／PC限定非表示 ---- */
.site-title-pc { display: block; }
.site-title-sp { display: none; }

@media screen and (max-width: 768px) {
  .site-title-pc { display: none; }
  .site-title-sp { display: block; }
}