/* coropiacere.choir.jp/style.css */

/* サイト全体の背景画像（本文幅や余白は共通スタイルをそのまま使用） */
body {
  background: #f7f4f0 url("/img/background.png") repeat;
}

/* ヘッダ画像: 背景画像を表示し、見出しはその下に表示する */
header {
  color: inherit;
}

/* バナー画像リンク: 画像の表示領域全体をクリッカブルに */
.header-banner-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  cursor: pointer;
  z-index: 1;
}

/* 見出しは背景画像の下に出す（header の padding-top により位置が下がる） */
header h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0.75rem 0;
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: center;
  color: #1b4266;
}

/* PC: 画面幅 > 800px のとき、ヘッダ画像の横幅を800pxに縮小（元画像 1000x400 -> 高さは 320px） */
@media (min-width: 801px) {
  .header-banner-link {
    width: 800px;
    height: 320px;
  }

  header {
    background: url("/img/header.png") center top no-repeat;
    background-size: 800px auto; /* 横800px固定・縦は自動（=約320px） */
    padding-top: 320px;          /* 元画像比率 1000x400 に合わせて高さを確保 */
    padding-bottom: 0;
  }
}

/* スマホ: 画面幅 <= 800px のとき、横を画面幅にフィット（高さは幅の0.4倍） */
@media (max-width: 800px) {
  .header-banner-link {
    width: 100vw;
    height: 40vw;
  }

  header {
    background: url("/img/header.png") center top no-repeat;
    background-size: 100% auto;  /* 横を画面幅にフィット */
    padding-top: 40vw;           /* 元画像 1000x400 -> 高さ = 幅の 0.4 倍 */
    padding-bottom: 0;
  }
}

.btn {
  background: #1b4266;
  color: white;
}

.btn:hover {
  background: #255a8c;
  color: white;
}

.event-meta-label {
  color: #255a8c;
}