/* ==========================================================
   responsive-480.css
   スマートフォン（max-width: 480px）向けレスポンシブ上書き
   responsive-768.cssの縦積みレイアウトを土台に、
   さらに幅が狭い端末向けの調整のみ追加する。
========================================================== */

@media (max-width: 480px) {

  /* hero: 日付行のline-height:normalの余白がこの幅では下の会場名と被るため、行間を詰める */
  .hero__date {
    line-height: 1;
  }

  /* sec1: PC文面用の強制改行はこの幅では折返し位置が崩れて不自然になるため解除し、自然な折返しに任せる */
  .sec1__lead-br {
    display: none;
  }

  /* sec2: 主催のテキストが長く、nowrapのままだとカードからはみ出すため折返しを許可する */
  .sec2 .sec2__value--org {
    white-space: normal;
    max-width: 100%;
  }

  /* sec3: ステージコンテンツ 768pxでは2,2,1配置だが、480px以下は
     2カラムだと見えにくいため1カラムに戻す（card5は元々全幅） */
  .sec3__grid {
    grid-template-columns: 1fr;
  }

  /* card2・card3・card6はPC/タブレット用に grid-column:2/3 等を固定指定しているため、
     1カラム化しても暗黙の2カラム目が生成されそちらに配置されてしまう。
     明示配置を解除してソース順（縦積み）に戻す */
  .event-card.card2,
  .event-card.card3,
  .event-card.card6 {
    grid-row: auto;
    grid-column: auto;
  }

  /* sec3 card5: ゲスト講師欄は幅が狭いカラムのため、480px以下では
     写真+テキスト横並びをやめて縦積みにする（司会はそのまま横並び維持） */
  .card5__guest-row {
    flex-direction: column;
    align-items: center;
  }

  .card5__guest-text {
    align-items: center;
    text-align: center;
  }

  .card5__guest-photo {
    width: 6rem !important;
  }

  /* sec5: グルメグリッドは2カラム→1カラムへ */
  .sec5__content {
    grid-template-columns: 1fr;
  }

  .sec5 .gourmet-box__photo {
    aspect-ratio: 710 / 500;
  }

  .sec5__subtitle,
  .sec5__title {
    width: 45% !important;
  }

  /* sec4: カード内余白を少し詰める */
  .sec4-box {
    width: 94%;
    padding: 6% 5%;
  }

  .sec4 .sec4-box__badge {
    width: 2.6rem;
    height: 2.6rem;
  }

  .sec4 .sec4-box__badge span {
    font-size: 0.7rem;
  }

  /* box4（缶バッジづくり）は団体名が長いため、このコンテンツだけ
     サブタイトルを少し小さくし、収まらない場合は折り返す */
  .sec4__box4-subtitle {
    font-size: 0.78rem;
    white-space: normal;
  }

  /* box2（トンコリ体験）はタイトルが2行になりバッジと被るため、
     このコンテンツだけタイトルと写真の間あたりまでバッジを下げる */
  .sec4 .sec4__box2-badge {
    top: 14%;
  }

  /* sec6: イベントスケジュール 480px以下はpaddingが縮んで
     タイトルとの間隔が狭くなるため、区切り線の位置も詰める */
  .sec6__line {
    top: 36px;
  }

  /* footer: バナー・アイコン幅を調整 */
  .footer__renkei-banner {
    width: 100% !important;
  }

  .footer__other-jhlogo,
  .footer__other-kamuylogo {
    width: 2.5rem !important;
  }
}

/* 350px〜480pxの範囲限定：sec3 ステージコンテンツ カード1〜4は2カラムで幅が狭くなるが、
   極端に狭い画面（350px未満）では枠に収まらないため、この範囲でのみ
   768px時より文字サイズを引き上げ視認性を上げる（card5は対象外） */
@media (min-width: 350px) and (max-width: 480px) {
  .event-card:not(.event-card--wide) .event-card__title {
    font-size: 1.2rem;
  }

  .event-card:not(.event-card--wide) .event-card__subtitle {
    font-size: 0.85rem;
  }

  .event-card:not(.event-card--wide) .event-card__desc {
    font-size: 0.85rem;
  }

  .event-card:not(.event-card--wide) .event-card__num-lg { font-size: 1.1rem; }
  .event-card:not(.event-card--wide) .event-card__num-sm { font-size: 0.8rem; }
  .event-card:not(.event-card--wide) .event-card__num-md { font-size: 0.95rem; }
  .event-card:not(.event-card--wide) .event-card__date-note { font-size: 0.8rem; }
}