@charset "UTF-8";
/* ============================================================
   top.css（2026リニューアル）
   トップページ（index.html）の本文だけで使う
   PC：チラシ＋「見出し・タイトル・日程・チケット」の列をひとかたまりにして、画面の中央に置く。
       画面が狭くて中央に置けないときは、左カラムにぶつからない位置まで右にずらす（チラシはなるべく縮めない）
   スマホ：タイトル → チラシ → 日程の表 → チケット の順に縦に並べる
============================================================ */

.top-stage {
  --stage-w: 944px;   /* 最大のとき：チラシ520 ＋ 間44 ＋ 右の列380 */
  --top-over: 30px;   /* タイトルが右の列からはみ出してよい幅 */
  display: grid; column-gap: 44px; align-items: start;
  /* チラシが先に最大（520px）まで広がり、残りが右の列になる。画面が狭いときは右の列が300pxまで細くなってからチラシが縮む */
  grid-template-columns: minmax(0, 520px) minmax(300px, 1fr);
  grid-template-areas: "flyer head" "flyer info";
  grid-template-rows: auto 1fr;
  /* タイトルのはみ出し分＋16px を、SNSの手前に必ず空けておく */
  width: min(var(--stage-w), calc(100% - var(--top-over) - 16px));
  /* 画面の中央に置くための、本文の左端からの余白。0未満にならず、右側の余白も食いつぶさない */
  margin-left: max(0px, min(calc(50vw - var(--stage-w) / 2 - var(--bz-main-left)), calc(100% - var(--stage-w) - var(--top-over) - 16px)));
}
.top-head { grid-area: head; min-width: 0; container-type: inline-size; }
.top-flyer { grid-area: flyer; }
.top-info { grid-area: info; }

/* タイトル：1行・左寄せ。右の列の幅に合わせて大きさが変わり、右に --top-over まではみ出してよい。
   長いタイトルは横にはみ出さず2行に折り返す */
.top-title {
  width: calc(100% + var(--top-over)); margin: 10px 0 24px; font-family: var(--bz-font);
  font-size: clamp(34px, calc((100cqi + var(--top-over)) / 7.8), 72px); font-weight: 900; line-height: 1.1; letter-spacing: -.03em;
  color: var(--bz-ink); text-align: left; line-break: strict; overflow-wrap: anywhere;
}

/* frame.css の .bz-main img { max-width:100% } より優先させるため .bz-main を付ける */
.bz-main .top-flyer img {
  display: block; width: 100%; max-width: none; height: auto; margin: 0 auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 16px 38px rgba(60, 45, 30, .24);
}
.top-flyer .top-flyer__caption { margin: 12px 0 0; font-size: 11px; letter-spacing: 0; color: var(--bz-sub); text-align: center; }
.top-flyer__caption a:link, .top-flyer__caption a:visited { font-weight: 500; border-bottom: 1px solid var(--bz-sub); }
.top-info { display: flex; flex-direction: column; gap: 26px; }
.bz-table dd.top-date { font-size: 22px; font-weight: 900; line-height: 1.3; }
.top-actions .bz-links { margin-top: 10px; }

/* 小さめのノートPC：右の列を細く、間を詰めて、チラシの幅を確保する */
@media screen and (min-width: 901px) and (max-width: 1200px) {
  .top-stage { --stage-w: 794px; --top-over: 20px; column-gap: 34px; grid-template-columns: minmax(0, 480px) minmax(250px, 1fr); }
}

@media screen and (max-width: 900px) {
  .top-stage {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "flyer" "info"; grid-template-rows: auto;
    gap: 22px; width: auto; margin-left: 0;
  }
  /* スマホ・タブレットはタイトルを1行で（元の大きさ）。長いタイトルは折り返す */
  .top-title { width: auto; margin: 6px 0 0; font-size: clamp(30px, 10.5vw, 64px); }
  .bz-main .top-flyer img { max-width: 480px; }
  /* base.css より後に読み込まれないので、.top-info を付けて優先度を上げる */
  .top-info .bz-table dd { font-size: 15px; }
  .top-info .bz-table dd.top-date { font-size: 24px; }
  .top-info a.bz-button:link, .top-info a.bz-button:visited { padding: 17px 8px; font-size: 16px; }
  .top-info .bz-links a:link, .top-info .bz-links a:visited { padding: 6px 2px; font-size: 14px; }
}