/* ページ全体の基本設定 */
html {
  height: 100%;
}

body {
  /* 背景画像をCSS変数として定義 */
  --bg-image: url('/static/background.png'); /* PC用の背景 */

  position: relative; /* 疑似要素のz-indexを機能させるために必要 */
  min-height: 100%;
  margin: 0;
  color: white;
  font-family: 'Arial', sans-serif;
}

/* ::before疑似要素を背景として使用 */
body::before {
  content: '';
  position: fixed; /* ビューポートに固定 */
  top: 0;
  left: 0;
  width: 100vw;  /* 表示領域全体の幅 */
  height: 100vh; /* 表示領域全体の高さ */
  z-index: -1;   /* コンテンツの背面に配置 */

  /* 背景関連のスタイルをこちらに移動 */
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* スマートフォン向けのスタイル (画面幅が768px以下の場合に適用) */
@media (max-width: 768px) {
  body {
    /* スマホの場合は背景画像の変数を上書き */
    --bg-image: url('/static/background1.png');
  }
}

/* ヘッダーとメインコンテンツを縦に並べるコンテナ */
.page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

/* ヘッダーのスタイル */
.page-header {
  background-color: #2c3e50;
  padding: 0.5% 5%;
  width: 100%;
  box-sizing: border-box;
}

.header-content {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.main-title {
  font-size: 3.5vw;
  font-weight: bold;
  margin: 0;
}

.sub-title {
  font-size: 1.5vw;
  margin: 0;
}

/* メインコンテンツエリア */
.main-content-area {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2% 0;
  box-sizing: border-box;
}