/* トップページだけの上書き（site.css の後に読む） */

/* ヘッダーのリンクで区画へ飛んだとき、固定ヘッダー（高さ68px）の下に見出しが隠れないようにする */
html { scroll-padding-top: 68px; }

/* 「丸五市場について」の最後の一文は、文字の読み込み具合で3行→2行に変わり、
   下の「交通アクセス」の位置がずれる。旧サイトと同じ3行分の高さで固定する */
.about-note { min-height: 63px; }

/* TOPICS が増えても下の区画にめり込まないよう、ロゴと TOPICS の区画の高さを中身に合わせて伸ばす（元の 1132px は下限として残す）。
   お知らせ1件ごとに間をあけて区切りを分かりやすくする */
.hero { height: auto; min-height: 1132px; padding-bottom: 64px; }
.topics li { padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.topics li:first-child { padding-top: 0; }
.topics li a { display: block; line-height: 30px; text-decoration: none; }
.topics li a:hover { text-decoration: underline; }
.topics-upd { display: block; font-size: 13px; line-height: 22px; color: #888; }
.topics-date { display: block; font-weight: 700; }
.topics li.is-ended a { color: #999; }
.topics li.is-ended .topics-date { font-weight: 400; }

/* 終わったイベントの「終了しました」札（見出しの下・ポスターの上） */
.event-ended {
  width: fit-content;
  margin: 24px auto 0;
  padding: 6px 18px;
  border: 2px solid var(--red);
  border-radius: 4px;
  color: var(--red);
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
}

@media (max-width: 767px) {
  html { scroll-padding-top: calc(74 * var(--u)); }
  .about-note { min-height: 0; }
  /* スマホの背景の筆跡: 旧サイトの見え方（左に金・右下に赤）に合わせた寸法 */
  .bg-brush {
    background-size: calc(848 * var(--u)) calc(663 * var(--u));
    background-position: calc(-276 * var(--u)) calc(58 * var(--u));
  }
  /* 写真 300 ＋左余白 22 が幅320を超えて横にはみ出すのを防ぐ（左余白を10に） */
  .about-photo { margin-left: calc(10 * var(--u)); }
  /* ギャラリー: 旧サイトのスマホは横送りではなく、12枚を3列×4段のマス目（1枚 約107×79） */
  .gallery { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; scroll-snap-type: none; }
  .gallery a { height: calc(79 * var(--u)); }
  /* イベント見出しの負の右余白（字間の打ち消し）で横に約9pxはみ出すのを防ぐ。
     同じ分を左の内余白に回して、文字の中心位置は変えない */
  .event h2 { margin-right: 0; padding-left: calc(7.2 * var(--u)); }
  .hero { min-height: 0; padding-bottom: calc(38 * var(--u)); }
  .topics li { padding: calc(9 * var(--u)) 0 calc(8 * var(--u)); }
  .topics li:first-child { padding-top: 0; }
  .topics li a { line-height: calc(21 * var(--u)); }
  /* スマホでは右の赤い筆跡が文字に重なるので、一覧の下地を白くして読めるようにする */
  .topics ul { position: relative; margin-right: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(8 * var(--u)) 0; background: rgba(255, 255, 255, .92); }
  .topics-upd { font-size: calc(10 * var(--u)); line-height: calc(16 * var(--u)); }
  .event-ended {
    margin-top: calc(12 * var(--u));
    padding: calc(4 * var(--u)) calc(12 * var(--u));
    font-size: calc(13 * var(--u));
    letter-spacing: calc(1 * var(--u));
  }
}

/* スマホの読みやすさ（2026-11-05 追加）: お知らせの文字を標準的な大きさと行間に固定する（site.css の同名の節と対） */
@media (max-width: 767px) {
  .topics li a { font-size: 16px; line-height: 1.6; }
  .topics-upd { font-size: 14px; line-height: 1.6; }
  .event-ended { font-size: 16px; }
}