:root { --bottom-fixed-clearance: 120px; } 

body {
  margin: 0;
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background: #fafafa;
}

.site-footer{
  text-align: center;
  color: #777;
  font-size: 12px;
  padding: 16px 12px;
  margin-top: 60px;
  margin-bottom: calc(env(safe-area-inset-bottom) + var(--bottom-fixed-clearance));
}

/* ヒーローだけを画面中央に配置 */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f5f5f5;
}

/* RINK の見た目 */
.rink {
  font-size: clamp(48px, 8vw, 160px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #0a7cff;
  margin: 0;
}

.sub-hero {
  min-height: 33vh;
  display: grid;
  place-items: center;
  background: #f5f5f5;
}

/* ページタイトルを画面中央に配置 */
.page_title {
  min-height: 25vh;
  display: grid;
  place-items: center;
  font-size: clamp(48px, 8vw, 160px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #0a7cff;
  margin: 0;
}

/* コンテンツのグリッド */
.contents-section {
  max-width: 1080px;
  margin: 60px auto;
  padding: 20px;
}

.contents-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
}

.grid {
  display: grid;
  gap: 30px;
  margin-bottom: 150px;
}

.grid-3 { 
  grid-template-columns: repeat(3, minmax(0, 1fr)); 
}

.br-tb, .br-sp { display: none; }